- Docs
- components
- Menu
Menu
A menu displays a list of actions or options that a user can choose.
Installation
npx @sly-cli/sly add jolly-ui menuNote: Only the default style can be installed via CLI at the moment
Usage
Basic
Full
Submenu
As in the example above, You can create a submenu by wrapping a MenuItem in a SubmenuTrigger. Then inside the SubmenuTrigger you can place a MenuPopover and Menu to create a submenu, using that the same as a menu.
Separator
In the example above, you can place a MenuSeparator between sections. Alternatively, you can use the separator prop on a MenuHeader to create a border as well.
Selection
Multiple
Single
Links
By default, interacting with an item in a Menu triggers onAction and optionally onSelectionChange depending on the selectionMode.
Alternatively, items may be links to another page or website. This can be achieved by passing the href prop to the <MenuItem> component. Link items in a menu are not selectable.
Client side routing
The <MenuItem> component works with frameworks and client side routers like Next.js, Remix and React Router.
As with other React Aria components that support links, this works via the RouterProvider component at the root of your app.
See the client side routing guide to learn how to set this up.