Skip to content
Alea0.1

Navigation

ContextMenu

A menu that opens where people right-click, long-press, or press Shift+F10.

Ant Design: Dropdown trigger={["contextMenu"]}

import { ContextMenu } from '@alea/ui';

Examples

Right-click menu

Right-click, long-press, or focus the card and press Shift+F10.

palette.json

Last action: nothing yet

Props

ContextMenu props

A menu that opens where people right-click; Shift+F10 or the Menu key opens it from the keyboard (Radix ContextMenu, Ant Dropdown trigger contextMenu).

PropTypeDefaultDescription
areaLabelrequiredstring-Name of the area, so people know it has a menu ("File preview").
childrenrequiredReactNode-The area people right-click (or long-press, or Shift+F10 when focused).
itemsrequiredMenuEntry[]-The menu entries: id, label, icon, shortcut, tone, or { separator: true }.
aria-labelstring-Name of the menu. Default "Context menu".
classNamestring-Extra class names for the root element.
onAction((id: Key) => void)-Called with the id of the entry picked.

Accessibility

  • The area is focusable and says it has a menu; Shift+F10 and the Menu key open it.
  • Every action must also be reachable another way.

Keyboard

KeyDoes
Shift+F10 or Menu keyOpens
Arrow keysMove
EnterRuns
EscapeCloses and returns focus

Do and don't

Do

  • Put the same actions somewhere visible too (a toolbar or menu button).
  • Show shortcuts next to the actions.

Don't

  • Don't hide destructive actions only in a context menu.
  • Don't override the browser's context menu on text people may want to copy.
Menu Menubar
Tested with axe, keyboard and screen reader roles