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>

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

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

name

type

default

required

description

disabled

boolean

false

Controls the ActionMenu active/inactive state

open

boolean

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

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

name

type

default

required

description

className

string

Sets a custom class on the element

children

ReactElement

id

string

Sets a custom id

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`

name

type

default

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

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

name

type

default

required

description

className

string

Sets a custom class on the element

children

ReactElement

disabled

boolean

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

Primer Design System

Site navigation

On this page

Action menu

Examples

Default

Single selection

Component props

ActionMenu Required

ActionMenu.Button Required

ActionMenu.Overlay Required

ActionMenu.Item Required