ActionMenu

Use ActionMenu to display a list of actions or selections that expand through a trigger button.

Experimental
Not reviewed for accessibility

On this page

import {ActionMenu} from '@primer/react-brand'

Examples

Default

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

Single selection

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

  return (
    <ActionMenu
      onSelect={(newValue) => setSelection(newValue)}
      selectionVariant="single"
    >
      <ActionMenu.Button>{selection}</ActionMenu.Button>
      <ActionMenu.Overlay aria-label="GitHub features">
        <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>{selection}</ActionMenu.Button>
      <ActionMenu.Overlay aria-label="GitHub features">
        <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 />)

Component props

ActionMenu Required

name	type	default	required	description
`disabled`	`boolean`	`false`	`false`	Controls the ActionMenu active/inactive state
`open`	`boolean`	`false`	`false`	Determines whether the ActionMenu is open by default
`onSelect`	`(newValue: string) => void`		`false`	Callback that is called when an item is selected
`selectionVariant`	`'single'` `'none'`	`'none'`	`false`	The selection variant of the ActionMenu
`menuAlignment`	`'start'` `'end'`		`'start'`	Horizontal alignment of the menu relative to the bottom of the button

ActionMenu.Button Required

name	type	description
`className`	`string`	Sets a custom class on the element
`children`	`ReactElement`
`id`	`string`	Sets a custom `id`

ActionMenu.Overlay Required

name	type	required	description
`aria-label`	`string`	`true`	Required for describing the relationship between button and menu
`className`	`string`		Sets a custom class on the element
`children`	`ReactElement`
`id`	`string`		Sets a custom `id`

ActionMenu.Item Required

name	type	default	required	description
`className`	`string`			Sets a custom class on the element
`children`	`ReactElement`
`disabled`	`boolean`	`false`	`false`	Allows control over an individual items active/inactive state
`id`	`string`			Sets a custom `id`
`selected`	`boolean`			Indicates the item is selected in `single` selection mode
`value`	`string`			The underlying value passed to the selection handler

Edit this page on GitHub