Action menu

Use the action menu component to display a list of actions or selections that expand through a trigger button.
  • Experimental
  • Not reviewed for accessibility
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.

Sizes

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

Component props

ActionMenu Required

nametypedefaultrequireddescription
disabledbooleanfalsefalseControls the ActionMenu active/inactive state
openbooleanfalsefalseDetermines whether the ActionMenu is open by default
onSelect(newValue: string) => voidfalseCallback that is called when an item is selected
selectionVariant'single'
'none'
'none'falseThe selection variant of the ActionMenu
menuAlignment'start'
'end'
startfalseHorizontal alignment of the menu relative to the bottom of the button
size'small'
'medium'
mediumfalseSize configuration of the ActionMenu
menuSide'inside-top'
'inside-bottom'
'inside-left'
'inside-right'
'inside-center'
'outside-top'
'outside-bottom'
'outside-left'
'outside-right'
undefinedfalseLocation of the menu overlay

ActionMenu.Button Required

nametypedefaultrequireddescription
classNamestringSets a custom class on the element
childrenReactElement
idstringSets a custom id

ActionMenu.Overlay Required

nametypedefaultrequireddescription
aria-labelstringtrueRequired for describing the relationship between button and menu
classNamestringSets a custom class on the element
childrenReactElement
idstringSets a custom id

ActionMenu.Item Required

nametypedefaultrequireddescription
classNamestringSets a custom class on the element
childrenReactElement
disabledbooleanfalsefalseAllows control over an individual items active/inactive state
idstringSets a custom id
selectedbooleanIndicates the item is selected in single selection mode
valuestringThe underlying value passed to the selection handler