Action Menu

Install the component dependency:

Include a React component in your project:

ActionMenu PropTypes

Name
Value
Description
Default
onClose
function
triggered when a menu collapses
origin
topLeft | topRight | bottomRight | bottomLeft
orientation (from ActionMenu.origins) of nested menus
topLeft
shouldFocusOnMount
boolean
focus first menu item on render
true

ActionMenu.Item PropTypes

href
string
anchor tag uri
icon
Icon
Icon component
isActive
boolean
visually active (set automatically)
false
nested
ActionMenu
nested ActionMenu
onClick
Event => ()
triggered on item click

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.