DropdownMenu

A button that opens a list of actions. The list closes when an action is chosen, on Escape or outside clicks.

Usage

Import the component and render it.

import { DropdownMenu } from 'src/components/DropdownMenu/DropdownMenu';
import { LifebuoyIcon } from '@phosphor-icons/react';

<DropdownMenu
  size="sm"
  label="Menu"
  icon={<LifebuoyIcon />}
  title="Actions"
  items={[{"label":"Option one","icon":<LifebuoyIcon />,"shortcut":"Ctrl+K"},{"label":"Option two","icon":<LifebuoyIcon />,"shortcut":"Ctrl+K"},{"label":"Option three","icon":<LifebuoyIcon />,"shortcut":"Ctrl+K"},{"label":"Option four","icon":<LifebuoyIcon />,"shortcut":"Ctrl+K"}]}
/>

Accessibility

Role: menu button: a <button aria-haspopup="menu" aria-expanded> that controls a role="menu" panel of menuitems.

Key	Action
`Enter / Space / ↓`	On the trigger: opens the menu and focuses the first item
`↑`	On the trigger: opens the menu and focuses the last item
`↓ / ↑`	In the menu: moves to the next / previous item (wraps; disabled items are skipped)
`Home / End`	In the menu: first / last item
`Enter / Space`	Chooses the focused item and closes the menu
`Escape`	Closes the menu and returns focus to the trigger
`Tab`	Closes the menu and moves on

The menu is labelled by the trigger.
A click outside closes the menu.

Size

Set the size prop: Small is "sm", Medium is "md".

Small

Medium

<DropdownMenu
  size="sm"
  label="Menu"
  items={[{"label":"Option one","icon":<LifebuoyIcon />,"shortcut":"Ctrl+K"},{"label":"Option two","icon":<LifebuoyIcon />,"shortcut":"Ctrl+K"},{"label":"Option three","icon":<LifebuoyIcon />,"shortcut":"Ctrl+K"},{"label":"Option four","icon":<LifebuoyIcon />,"shortcut":"Ctrl+K"}]}
/>
<DropdownMenu
  size="md"
  label="Menu"
  items={[{"label":"Option one","icon":<LifebuoyIcon />,"shortcut":"Ctrl+K"},{"label":"Option two","icon":<LifebuoyIcon />,"shortcut":"Ctrl+K"},{"label":"Option three","icon":<LifebuoyIcon />,"shortcut":"Ctrl+K"},{"label":"Option four","icon":<LifebuoyIcon />,"shortcut":"Ctrl+K"}]}
/>

<DropdownMenu
  label="Menu"
  items={[{"label":"Option one","icon":<LifebuoyIcon />,"shortcut":"Ctrl+K"},{"label":"Option two","icon":<LifebuoyIcon />,"shortcut":"Ctrl+K"},{"label":"Option three","icon":<LifebuoyIcon />,"shortcut":"Ctrl+K"},{"label":"Option four","icon":<LifebuoyIcon />,"shortcut":"Ctrl+K"}]}
/>
<DropdownMenu
  open
  label="Menu"
  items={[{"label":"Option one","icon":<LifebuoyIcon />,"shortcut":"Ctrl+K"},{"label":"Option two","icon":<LifebuoyIcon />,"shortcut":"Ctrl+K"},{"label":"Option three","icon":<LifebuoyIcon />,"shortcut":"Ctrl+K"},{"label":"Option four","icon":<LifebuoyIcon />,"shortcut":"Ctrl+K"}]}
/>

States

Disabled comes from the disabled prop. Hover and Focus follow the pointer and the keyboard: try them in the playground.

Default

Disabled

<DropdownMenu
  label="Menu"
  items={[{"label":"Option one","icon":<LifebuoyIcon />,"shortcut":"Ctrl+K"},{"label":"Option two","icon":<LifebuoyIcon />,"shortcut":"Ctrl+K"},{"label":"Option three","icon":<LifebuoyIcon />,"shortcut":"Ctrl+K"},{"label":"Option four","icon":<LifebuoyIcon />,"shortcut":"Ctrl+K"}]}
  disabled
/>

Composition

Use the following composition to build a DropdownMenu:

DropdownMenu
└── DropdownMenuItem

DropdownMenuItem

One action in a Dropdown Menu: an optional icon, a label and an optional keyboard shortcut. Only used inside DropdownMenu.

DropdownMenuItem

<DropdownMenuItem label="Option label" />

Used in

DropdownMenu is part of Sidebar.

Actions

Pass callbacks to respond to the component.

import { DropdownMenu } from 'src/components/DropdownMenu/DropdownMenu';
import { LifebuoyIcon } from '@phosphor-icons/react';

<DropdownMenu
  size="sm"
  label="Menu"
  icon={<LifebuoyIcon />}
  title="Actions"
  items={[{"label":"Option one","icon":<LifebuoyIcon />,"shortcut":"Ctrl+K"},{"label":"Option two","icon":<LifebuoyIcon />,"shortcut":"Ctrl+K"},{"label":"Option three","icon":<LifebuoyIcon />,"shortcut":"Ctrl+K"},{"label":"Option four","icon":<LifebuoyIcon />,"shortcut":"Ctrl+K"}]}
  onOpenChange={(open) => console.log(open)}
/>

Callback	When
`onOpenChange`	Called when the menu opens or closes.