Components · Overlays & Dialogs

Dropdown Menu

A menu of actions behind one button.

Automated a11y scan passing Element: <div role="menu">

Component Workbench

Switch between the live interactive preview, syntax-highlighted implementation code, copyable AI coding agent prompt, and designer anatomy blueprint.

Dropdown Menu · Canonical Spec

When to use it

Do

  • Group related actions and separate risky ones.
  • Start each item with a verb.

Don't

  • Use it to choose a form value. Use Select instead.
  • Hide the most common action inside it.

Accessibility & Keyboard Interaction

Requirements for using this component accessibly, following the W3C ARIA Authoring Practices Guide.

Interaction / KeyBehavior & Compliance Requirement
Arrow Up / DownRoves focus cyclically through menu items.
Escape KeyCloses menu and restores focus to trigger button.

Tokens

Values update with the current theme.

RoleTokenCurrent value
Menu Radius--as-radius-md
Item Radius--as-radius-sm
Esc
↑↓ navigateEnter openEsc close