How to build an accessible Dropdown in React

The menu is role="menu" with role="menuitem" buttons and roving tabindex; the trigger gets aria-haspopup="menu" and aria-expanded via cloneElement; arrow/Home/End/Enter/Escape are handled and focus returns to the trigger on select or close, and popover="auto" provides light-dismiss synced back to state via the toggle event

When to use a Dropdown

• Revealing a short menu of actions from a trigger button (row actions, "More" overflow, account menu)
• Grouping related commands behind one affordance with optional icons and separators

When not to use it

• Selecting a persistent value for a form — use Select or Combobox
• A global searchable command palette — use CommandMenu; right-click context actions — use ContextMenu

Keyboard interactions

Role menu, verified at WCAG 2.2-AA.

• ArrowDown
• ArrowUp
• Home
• End
• Enter
• Space
• Escape

Common mistakes

Avoid: Using Dropdown to choose a form value and reading the selection as field state

Prefer: Use Select/Combobox which expose role="combobox" and a controlled value

Dropdown items are role="menuitem" actions fired via onSelect — there is no selected-value semantics for assistive tech or forms

Example

<Dropdown trigger={<Button>Actions</Button>} items={[{ label: "Edit", value: "edit" }]} onSelect={handle} />

See the full Dropdown reference →