ActionList (legacy)

Deprecated
Not reviewed for accessibility

Source

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

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

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

Example with grouped items

<ActionList
  groupMetadata={[
    {groupId: '0'},
    {groupId: '1', header: {title: 'Live query', variant: 'subtle'}},
    {groupId: '2', header: {title: 'Layout', variant: 'subtle'}},
    {groupId: '3'},
    {groupId: '4'},
  ]}
  items={[
    {key: '1', leadingVisual: TypographyIcon, text: 'Rename', groupId: '0', trailingVisual: '⌘R'},
    {key: '2', leadingVisual: VersionsIcon, text: 'Duplicate', groupId: '0'},
    {key: '3', leadingVisual: SearchIcon, text: 'repo:github/github', groupId: '1'},
    {
      key: '4',
      leadingVisual: NoteIcon,
      text: 'Table',
      description: 'Information-dense table optimized for operations across teams',
      descriptionVariant: 'block',
      groupId: '2',
    },
    {
      key: '5',
      leadingVisual: ProjectIcon,
      text: 'Board',
      description: 'Kanban-style board focused on visual states',
      descriptionVariant: 'block',
      groupId: '2',
    },
    {
      key: '6',
      leadingVisual: FilterIcon,
      text: 'Save sort and filters to current view',
      disabled: true,
      groupId: '3',
    },
    {key: '7', leadingVisual: FilterIcon, text: 'Save sort and filters to new view', groupId: '3'},
    {key: '8', leadingVisual: GearIcon, text: 'View settings', groupId: '4', trailingVisual: ArrowRightIcon},
  ]}
/>

<ActionList
  groupMetadata={[
    {groupId: '0'},
    {groupId: '1', header: {title: 'Live query', variant: 'subtle'}},
    {groupId: '2', header: {title: 'Layout', variant: 'subtle'}},
    {groupId: '3'},
    {groupId: '4'},
  ]}
  items={[
    {key: '1', leadingVisual: TypographyIcon, text: 'Rename', groupId: '0', trailingVisual: '⌘R'},
    {key: '2', leadingVisual: VersionsIcon, text: 'Duplicate', groupId: '0'},
    {key: '3', leadingVisual: SearchIcon, text: 'repo:github/github', groupId: '1'},
    {
      key: '4',
      leadingVisual: NoteIcon,
      text: 'Table',
      description: 'Information-dense table optimized for operations across teams',
      descriptionVariant: 'block',
      groupId: '2',
    },
    {
      key: '5',
      leadingVisual: ProjectIcon,
      text: 'Board',
      description: 'Kanban-style board focused on visual states',
      descriptionVariant: 'block',
      groupId: '2',
    },
    {
      key: '6',
      leadingVisual: FilterIcon,
      text: 'Save sort and filters to current view',
      disabled: true,
      groupId: '3',
    },
    {key: '7', leadingVisual: FilterIcon, text: 'Save sort and filters to new view', groupId: '3'},
    {key: '8', leadingVisual: GearIcon, text: 'View settings', groupId: '4', trailingVisual: ArrowRightIcon},
  ]}
/>

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

Name	Type	Default	Description
items	`(ItemProps & Omit<React.ComponentPropsWithoutRef<'div'>, keyof ItemProps>) \\| ((Partial<ItemProps> & {renderItem: RenderItemFn}) & {key?: Key})`	`undefined`	Required. A list of item objects conforming to the `ActionList.Item` props interface.
renderItem	`(props: ItemProps) => JSX.Element`	`ActionList.Item`	Optional. If defined, each item in `items` will be passed to this function, allowing for `ActionList`-wide custom item rendering.
groupMetadata	`GroupProps[]`	`undefined`	Optional. If defined, `ActionList` will group `items` into `ActionList.Group`s separated by `ActionList.Divider` according to their `groupId` property.
showItemDividers	`boolean`	`false`	Optional. If `true` dividers will be displayed above each `ActionList.Item` which does not follow an `ActionList.Header` or `ActionList.Divider`

Edit this page on GitHub

4 contributors

Last edited by khiga8 on January 11, 2023