Install the component dependency:
Include a React component in your project:
topLeft | topRight | bottomRight | bottomLeft
ActionMenu.origins) of nested menus
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 context and recognition to action menu items.
Dividers can be useful to separate similar actions. Dividers are applied at the list 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=false only 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.
To keep items in the menu but make them disabled, mark with a