- Docs
- components
- Menu
Menu
A Menu displays a list of actions or options that a user can choose.
There is no native element to implement a menu in HTML that is widely supported. MenuTrigger and Menu help achieve accessible menu components that can be styled as needed.
Installation
npx @sly-cli/sly add jolly-ui menuComposed Components
A Menu uses the following components, which may also be used standalone or reused in other components.
Button
A button allows a user to perform an action, with mouse, touch, and keyboard interactions.
Popover
A popover is an overlay element positioned relative to a trigger.
Reusable Wrapper - Example
If you will use a Menu in multiple places in your app, you can wrap all of the pieces into a reusable component. This way, the DOM structure, styling code, and other logic are defined in a single place and reused everywhere to ensure consistency.
The installed file includes a reusable wrapper JollyMenu. This wrapper serves as an excellent starting point for use throughout your codebase.
The JollyMenu component extends the props of React Aria Menu and MenuTrigger, and includes button styling props:
| Prop | Type | Default | Description |
|---|---|---|---|
label | string | undefined | undefined | Label for the menu trigger button |
variant | VariantProps<typeof buttonVariants> | - | Variant of the trigger button |
size | VariantProps<typeof buttonVariants> | - | Size of the trigger button |
You can copy this wrapper and create variations as needed for different use cases in your application. This approach promotes consistency while still allowing for flexibility in implementation.
Examples
Basic
Dynamic Content
Selection
Single Selection
Multiple Selection
Links
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.
Sections
Static
Dynamic
Separators
Text Slots
Long Press
Disabled Items
In dynamic collections, it may be more convenient to use the disabledKeys prop at the Menu level instead of isDisabled on individual items. Each key in this list corresponds with the id prop passed to the MenuItem component, or automatically derived from the values passed to the items prop (see the Collections for more details). An item is considered disabled if its id exists in disabledKeys or if it has isDisabled.