How to build an accessible ContextMenu in React

The menu container is role="menu" and items are role="menuitem" with roving keyboard navigation (ArrowDown/ArrowUp/Home/End skip disabled items, Enter/Space activate) and aria-disabled, and it uses popover="auto" so it light-dismisses on Escape or outside click; the toggle event syncs that dismissal back into state so focus and open state stay consistent

When to use a ContextMenu

• Offering actions contextual to an element via right-click (rename, delete, copy on a row or canvas item)
• Power-user surfaces where the desktop right-click affordance is expected

When not to use it

• Primary actions that must be discoverable by all users — right-click is hidden; use a visible Button or Dropdown
• Selecting a value or filtering a list — use Combobox/Select

Keyboard interactions

Role menu, verified at WCAG 2.2-AA.

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

Common mistakes

Avoid: Putting the only path to an action behind a right-click ContextMenu

Prefer: Also expose it via a visible Dropdown or Button; treat the context menu as a shortcut

Right-click is undiscoverable and unavailable on touch, so critical actions become unreachable for many users

Example

<ContextMenu>
  <div>Right-click me</div>
  <ContextMenuItem onSelect={rename}>Rename</ContextMenuItem>
  <ContextMenuItem onSelect={remove}>Delete</ContextMenuItem>
</ContextMenu>

See the full ContextMenu reference →