Action menu - Primer

Ready to use


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

Examples

Default

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 (left) and dropdown button (right) with an additional list of actions.

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.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