ActionMenu (legacy)

  • Deprecated
  • Not reviewed for accessibility

An ActionMenu is an ActionList-based component for creating a menu of actions that expands through a trigger button.

Deprecation

Use new version of ActionMenu with composable API, design updates and accessibility fixes.

Before

<ActionMenu
anchorContent="Menu"
onAction={fn}
items={[
{text: 'New file'},
{text: 'Copy link'},
{text: 'Edit file'},
ActionMenu.Divider,
{text: 'Delete file', variant: 'danger'},
]}
overlayProps={{width: 'small'}}
/>

After

<ActionMenu>
<ActionMenu.Button>Menu</ActionMenu.Button>
<ActionMenu.Overlay width="small">
<ActionList>
<ActionList.Item onSelect={fn}>New file</ActionList.Item>
<ActionList.Item>Copy link</ActionList.Item>
<ActionList.Item>Edit file</ActionList.Item>
<ActionList.Divider />
<ActionList.Item variant="danger">Delete file</ActionList.Item>
</ActionList>
</ActionMenu.Overlay>
</ActionMenu>

Or continue using deprecated API:

import {ActionMenu} from '@primer/react/deprecated'

Default example

Example with grouped items

Component props

NameTypeDefaultDescription
itemsItemProps[]undefinedRequired. A list of item objects conforming to the ActionList.Item props interface.
renderItem(props: ItemProps) => JSX.ElementActionList.ItemOptional. If defined, each item in items will be passed to this function, allowing for ActionList-wide custom item rendering.
groupMetadataGroupProps[]undefinedOptional. If defined, ActionList will group items into ActionList.Groups separated by ActionList.Divider according to their groupId property.
renderAnchor(props: ButtonProps) => JSX.ElementButtonOptional. If defined, provided component will be used to render the menu anchor. Will receive the selected Item text as children prop when an item is activated.
anchorContentReact.ReactNodeundefinedOptional. If defined, it will be passed to the trigger as the elements child.
onAction(props: ItemProps) => voidundefinedOptional. If defined, this function will be called when a menu item is activated either by a click or a keyboard press.
openbooleanundefinedOptional. If defined, ActionMenu will use this to control the open/closed state of the Overlay instead of controlling the state internally. Should be used in conjunction with the setOpen prop.
setOpen(state: boolean) => voidundefinedOptional. If defined, ActionMenu will use this to control the open/closed state of the Overlay instead of controlling the state internally. Should be used in conjunction with the open prop.