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 |