ActionMenu

Open in Playground

items: [{ key, label, description?, badge?, tone?, disabled?, hasDialog?, href?, target?, external?, onClick? }]. Closes on outside click and Escape.

Items can have an icon, shown before the label and hidden from screen readers.

Give an item an href to make it a real link: it can be opened in a new tab, its address copied, and screen readers announce a link. Choosing it closes the menu and still calls onClick if there is one. For client-side routing pass linkComponent and linkProp, for example linkComponent={Link} linkProp="to" with React Router. target="_blank" opens an external link in a new tab. A link to another site (target="_blank" or an absolute http(s):// address) shows an arrow; external turns it on or off.

The menu is keyboard friendly: opening it focuses the first item, Arrow Up and Down (wrapping), Home and End move between items, Enter or Space chooses, Tab closes it and Escape closes it and returns focus to the trigger.

Headings: an item with a heading is a label, not an action. The items after it, up to the next heading, are grouped under it for screen readers (role="group"), and arrow keys skip it. Or nest them: an item with items is a group, its label is the heading, and the items go inside it.

Props

ActionMenu

labelstring
Accessible label of the trigger and the menu.
triggerReactNode
Trigger button content.
variantstring
Default: 'secondary'
Button variant of the trigger (e.g. "warning").
itemsActionMenuItem[]
Menu entries; see the ActionMenuItem table below.
linkComponentElementType
Default: 'a'
Component used for items with a site path as href (not absolute URLs), e.g. a router Link.
linkPropstring
Default: 'href'
Prop that receives the href on linkComponent, e.g. "to".
placementstring
Default: 'bottom-start'
Where the menu opens, e.g. "bottom-end" or "top-start". Flips above or to the other edge when there is no room, and re-adjusts on scroll and resize.
classNamestring
Default: ''
Extra classes for the root element.

ActionMenu props
Prop	Type	Default	Description
`label`	string	–	Accessible label of the trigger and the menu.
`trigger`	ReactNode	–	Trigger button content.
`variant`	string	`'secondary'`	Button variant of the trigger (e.g. "warning").
`items`	ActionMenuItem[]	–	Menu entries; see the ActionMenuItem table below.
`linkComponent`	ElementType	`'a'`	Component used for items with a site path as href (not absolute URLs), e.g. a router Link.
`linkProp`	string	`'href'`	Prop that receives the href on linkComponent, e.g. "to".
`placement`	string	`'bottom-start'`	Where the menu opens, e.g. "bottom-end" or "top-start". Flips above or to the other edge when there is no room, and re-adjusts on scroll and resize.
`className`	string	`''`	Extra classes for the root element.

ActionMenuItem

keystring
Unique key of the item.
labelReactNode
Text of the item (not needed for a heading).
headingReactNode
A group label instead of an item; the items after it are grouped under it.
itemsActionMenuItem[]
Makes the item a group: its label is the heading and these are the items under it.
iconReactNode
Decorative icon before the label (hidden from screen readers).
descriptionReactNode
Smaller line under the label.
badgeReactNode
Short value shown at the end of the row, e.g. a count.
tone'default' | 'warning' | 'danger'
Default: 'default'
Color of the item; "danger" is red, for destructive actions such as Delete.
disabledboolean
Default: false
Dim the item and ignore it.
hasDialogboolean
Default: false
Marks an item that opens a dialog (aria-haspopup="dialog").
hrefstring
Makes the item a real link instead of a button; onClick is then optional.
targetstring
For link items: where to open it. "_blank" opens a new tab and adds rel="noopener noreferrer".
externalboolean
Show the external-link arrow. By default a link is external when it has target="_blank" or an absolute http(s) address.
onClick() => void
Called when the item is chosen, after the menu closes. Optional for link items.

ActionMenuItem props
Prop	Type	Default	Description
`key`	string	–	Unique key of the item.
`label`	ReactNode	–	Text of the item (not needed for a heading).
`heading`	ReactNode	–	A group label instead of an item; the items after it are grouped under it.
`items`	ActionMenuItem[]	–	Makes the item a group: its label is the heading and these are the items under it.
`icon`	ReactNode	–	Decorative icon before the label (hidden from screen readers).
`description`	ReactNode	–	Smaller line under the label.
`badge`	ReactNode	–	Short value shown at the end of the row, e.g. a count.
`tone`	'default' \| 'warning' \| 'danger'	`'default'`	Color of the item; "danger" is red, for destructive actions such as Delete.
`disabled`	boolean	`false`	Dim the item and ignore it.
`hasDialog`	boolean	`false`	Marks an item that opens a dialog (aria-haspopup="dialog").
`href`	string	–	Makes the item a real link instead of a button; onClick is then optional.
`target`	string	–	For link items: where to open it. "_blank" opens a new tab and adds rel="noopener noreferrer".
`external`	boolean	–	Show the external-link arrow. By default a link is external when it has target="_blank" or an absolute http(s) address.
`onClick`	() => void	–	Called when the item is chosen, after the menu closes. Optional for link items.

Related hooks and theme:useDismissable