import {ActionMenu} from '@primer/react-brand'
Examples
Default
Loading
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.
Loading
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.
In split-button mode, each action must be rendered as a link element using the as=“a” prop, including the main button and all menu items.
Loading
Sizes
ActionMenu
is currently available in small
and medium
sizes, with the latter being the default.
Loading
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 |
ActionMenu.Overlay Required
name | type | default | 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 |