How to build an accessible OverflowMenu in React

The kebab trigger carries a localized aria-label since it has no visible text, and the revealed list uses Dropdown's menu semantics so arrow keys, Home/End, Enter/Space, and Escape work without custom handling.

When to use a OverflowMenu

• Collapsing secondary row-level or item-level actions behind a kebab trigger in dense layouts like tables and lists
• Offering a small set of actions where a destructive option needs visual distinction

When not to use it

• A primary action that should always be visible — use Button
• Selecting a single value from a set rather than triggering actions — use Select or Dropdown
• New code — this component is deprecated in favor of Menu

Keyboard interactions

Role menu, verified at WCAG 2.2-AA.

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

Common mistakes

Avoid: Rendering every row action as a visible Button in a crowded table

Prefer: <OverflowMenu items={[{ label: "Edit", value: "edit" }, { label: "Delete", value: "delete", destructive: true }]} onSelect={handle} />

A kebab menu keeps dense rows scannable; surfacing every action inline competes for attention and breaks alignment

Example

<OverflowMenu items={[{ label: "Edit", value: "edit" }, { label: "Delete", value: "delete", destructive: true }]} onSelect={handle} />

See the full OverflowMenu reference →