Action Menu

Install the component dependency:

Include a React component in your project:

ActionMenu PropTypes

NameValueDescriptionDefault
onClosefunctiontriggered when a menu collapses
origintopLeft | topRight | bottomRight | bottomLeftorientation (from ActionMenu.origins) of nested menustopLeft
shouldFocusOnMountbooleanfocus first menu item on rendertrue

ActionMenu.Item PropTypes

iconIdIcon.ids enumid of icon
isActivebooleanvisually active (set automatically)false
nestedActionMenunested ActionMenu

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.