Install the component dependency:
Include a React component in your project:
|function||triggered when a menu collapses|
|orientation (from |
|boolean||focus first menu item on render|
|id of icon|
|boolean||visually active (set automatically)|
Menus can originate from various affordance types: buttons, dropdowns, and stand-alone icons. All menus left align with the affordance by default.
Use icons to add conext and recognition to action menu items.
Dividers can be useful to separate similar actions. Dividers are applied at the li level, below the assigned list item.
Nested menu lists may spawn from parent menu list items.
The origin prop determines the starting position and direction of nested menus.
Here's an example of ActionMenu.origins.bottomRight in action:
Note: Examples on this page use
shouldFocusOnMount=falseonly in order to display the examples without interrupting your browsing experience. In most real-world scenarios, you will want to leave the default focus behavior in tact.