Action menu

Ready to use


import {ActionMenu} from '@primer/react-brand'

Use ActionMenu.IconButton when a familiar icon clearly communicates that contextual actions are available. Always provide a concise, context-specific aria-label, which also supplies content for the visible tooltip.

Prefer ActionMenu.Button when the icon would be ambiguous without a visible label.

Single selection

In single selection mode it is important to apply an aria-label to the ActionMenu.Button child. This provides the user with important and durable context on the selection they need to make.

Split-button layout

In this mode, the ActionMenu can be shown as a split button with an action on the left and a dropdown button with additional actions on the right.

The primary action may use a visible label or a familiar icon. For an icon-only primary action, ensure that its aria-label names the action, while the required ActionMenu.Overlay label names the generated menu trigger.

Sizes

ActionMenu is currently available in small and medium sizes, with the latter being the default.

Component props

ActionMenu Required

name	type	default	required	description
`disabled`	`boolean`	`false`	`false`	Controls the ActionMenu active/inactive state
`open`	`boolean`	`false`	`false`	Determines whether the ActionMenu is open by default
`onSelect`	`(newValue: string) => void`		`false`	Callback that is called when an item is selected
`selectionVariant`	`'single'`, `'none'`	`'none'`	`false`	The selection variant of the ActionMenu
`menuAlignment`	`'start'`, `'end'`	`start`	`false`	Horizontal alignment of the menu relative to the bottom of the button
`size`	`'small'`, `'medium'`	`medium`	`false`	Size configuration of the ActionMenu
`menuSide`	`'bottom'`, `'bottom-end'`, `'bottom-start'`, `'left'`, `'left-end'`, `'left-start'`, `'right'`, `'right-end'`, `'right-start'`, `'top'`, `'top-end'`, `'top-start'`	`undefined`	`false`	Location of the menu overlay
`mode`	`'default'` `'split-button'`	`default`	`false`	Alternative behavior for the button and menu items

ActionMenu.Button Required

name	type	default	required	description
`className`	`string`			Sets a custom class on the element
`children`	`ReactElement`
`id`	`string`			Sets a custom `id`
`variant`	`'primary'`, `'secondary'`, `'subtle'`		`false`	Sets the button styling variation
`onClick`	`(event: MouseEvent) => void`	`undefined`	`false`	Handles activation of the button
`leadingVisual`	`ReactElement`	`undefined`	`false`	Renders a leading visual before the button label

ActionMenu.IconButton

name	type	default	required	description
`icon`	`Icon`		`true`	Icon that represents the menu trigger
`aria-label`	`string`		`true`	Action-oriented accessible label and visible tooltip text
`as`	`ElementType`	`'button'`	`false`	Element rendered for the primary action
`href`	`string`	`undefined`	`false`	Link destination when the primary action renders as an anchor
`variant`	`'primary'`, `'secondary'`, `'subtle'`, `'danger'`, `'invisible'`	`'secondary'`	`false`	Sets the icon button styling variation
`description`	`string`	`undefined`	`false`	Supplies supplementary tooltip text
`tooltipDirection`	`TooltipDirection`	`'s'`	`false`	Preferred direction for the automatic tooltip
`rounded`	`boolean`	`false`	`false`	Uses a fully rounded shape
`onClick`	`(event: MouseEvent) => void`	`undefined`	`false`	Handles activation; toggles the menu only in default mode

ActionMenu.Overlay Required

name	type	required	description
`aria-label`	`string`	`true`	Required for describing the relationship between button and menu
`className`	`string`		Sets a custom class on the element
`children`	`ReactElement`
`id`	`string`		Sets a custom `id`

ActionMenu.Item Required

name	type	default	required	description
`className`	`string`			Sets a custom class on the element
`children`	`ReactElement`
`disabled`	`boolean`	`false`	`false`	Allows control over an individual items active/inactive state
`id`	`string`			Sets a custom `id`
`selected`	`boolean`			Indicates the item is selected in `single` selection mode
`value`	`string`			The underlying value passed to the selection handler

Examples

Default

Icon button trigger-only