ActionList (legacy)

  • Deprecated
  • Not reviewed for accessibility

An ActionList is a list of items which can be activated or selected. ActionList is the base component for many of our menu-type components, including and ActionMenu.


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


{text: 'New file'},
{text: 'Copy link'},
{text: 'Edit file'},
{text: 'Delete file', variant: 'danger'},


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

Or continue using deprecated API:

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

Minimal example

Example with grouped items

Example with custom item renderer

text: 'Vanilla link',
renderItem: props => <ActionList.Item as="a" href="/about" {...props} />,
text: 'React Router link',
renderItem: props => <ActionList.Item as={ReactRouterLikeLink} to="/about" {...props} />,
text: 'NextJS style',
renderItem: props => (
<NextJSLikeLink href="/about">
<ActionList.Item as="a" {...props} />


items(ItemProps & Omit<React.ComponentPropsWithoutRef<'div'>, keyof ItemProps>) \| ((Partial<ItemProps> & {renderItem: RenderItemFn}) & {key?: Key})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.
showItemDividersbooleanfalseOptional. If true dividers will be displayed above each ActionList.Item which does not follow an ActionList.Header or ActionList.Divider