Skip to content
Primer/React
Design
Interface guidelinesOcticonsDesktopMobileCLI
Build
CSSReactReact BrandViewComponents
ContributeAbout

On this page

ActionList (legacy)

  • Deprecated
  • Not reviewed for accessibility
On this page

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 DropdownMenu and ActionMenu.

Deprecation

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

Before

<ActionList
  items={[
    {text: 'New file'},
    {text: 'Copy link'},
    {text: 'Edit file'},
    ActionList.Divider,
    {text: 'Delete file', variant: 'danger'},
  ]}
/>

After

<ActionList>
  <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>
</ActionList>

Or continue using deprecated API:

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

Minimal example

Example with grouped items

Example with custom item renderer

<ActionList
  items={[
    {
      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} />
        </NextJSLikeLink>
      ),
    },
  ]}
/>

Props

NameTypeDefaultDescription
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