Action menu

Use the action menu component to display a list of actions or selections that expand through a trigger button.

Experimental
Not reviewed for accessibility

<ActionMenu onSelect={(newValue) => alert(`Pressed ${newValue}`)}>
  <ActionMenu.Button>Open menu</ActionMenu.Button>
  <ActionMenu.Overlay aria-label="GitHub features">
    <ActionMenu.Item value="Copilot" selected>
      Copilot
    </ActionMenu.Item>
    <ActionMenu.Item value="Codespaces">Codespaces</ActionMenu.Item>
    <ActionMenu.Item value="CodeQL">CodeQL</ActionMenu.Item>
  </ActionMenu.Overlay>
</ActionMenu>

<ActionMenu onSelect={(newValue) => alert(`Pressed ${newValue}`)}>
  <ActionMenu.Button>Open menu</ActionMenu.Button>
  <ActionMenu.Overlay aria-label="GitHub features">
    <ActionMenu.Item value="Copilot" selected>
      Copilot
    </ActionMenu.Item>
    <ActionMenu.Item value="Codespaces">Codespaces</ActionMenu.Item>
    <ActionMenu.Item value="CodeQL">CodeQL</ActionMenu.Item>
  </ActionMenu.Overlay>
</ActionMenu>

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.

const App = () => {
  const [selection, setSelection] = React.useState('Copilot')

  return (
    <ActionMenu
      onSelect={(newValue) => setSelection(newValue)}
      selectionVariant="single"
    >
      <ActionMenu.Button aria-label="Select a GitHub feature">
        {selection}
      </ActionMenu.Button>
      <ActionMenu.Overlay>
        <ActionMenu.Item value="Copilot" selected={'Copilot' === selection}>
          Copilot
        </ActionMenu.Item>
        <ActionMenu.Item
          value="Codespaces"
          selected={'Codespaces' === selection}
        >
          Codespaces
        </ActionMenu.Item>
        <ActionMenu.Item value="CodeQL" selected={'CodeQL' === selection}>
          CodeQL
        </ActionMenu.Item>
      </ActionMenu.Overlay>
    </ActionMenu>
  )
}

render(<App />)

const App = () => {
  const [selection, setSelection] = React.useState('Copilot')

  return (
    <ActionMenu
      onSelect={(newValue) => setSelection(newValue)}
      selectionVariant="single"
    >
      <ActionMenu.Button aria-label="Select a GitHub feature"

Primer Design System

Site navigation

On this page

Action menu

Examples

Default

Single selection