A collapsible menu that reveals actions or navigation options when triggered, distinct from a select as it is not used for form input.
Basic
A menu presents a variety of actions or options from which you can choose.
Installation
If you hit any issues, make sure you check out the installation guide here for more information.
Composed components
When you install this component via the CLI, it automatically loads all composed components, so you don’t need to add them individually.
The Menu comes packed with several components to enhance functionality and provide a seamless experience.
Manual installation
Make sure you also install the composed components and the required packages for the component to function properly.
Anatomy
Sub menu
Menu can be nested to display submenus.
Danger
Designate a menu item as dangerous.
With icon
Enhance menu items by adding icons.
Dynamic
Generate menu items dynamically.
Multiple
Display a selection of actions or options.
Single menu
Present a single list of options.
Section menu
Organize menu items into grouped sections.
Section-level selection
Organize menu items into grouped sections with level selection.
Arrow
Incorporate an arrow into the menu using the showArrow from popover in the Menu.Content component.
Disabled
Disable specific menu items.
Also, you can disable items directly in Menu.Content by using the disabledKeys prop.
Menu label
In the examples above, you might notice that the Menu.Label component is used inconsistently. This is because it is not mandatory, but it is considered a best practice. Using Menu.Label ensures proper alignment between icons and text, especially when dealing with items that vary. For instance, one item might have an icon while another does not. Adding Menu.Label helps create a polished and consistent appearance.
Description
You can add details to menu items by using the Menu.Description component.
Open modal
Trigger a modal from a menu item. Refer to the modal demo for further information.
Flexible blocks and templates