ContextMenu

A menu opened by right-click, long press or the Menu key on a region.

Import
import { ContextMenu } from '@texuli/primitives/context-menu';
Pattern
Menu (WAI-ARIA APG)
Size budget
22.0 KiB gzip for @texuli/primitives/context-menu
Reference
packages/primitives/docs/prim-context-menu.md

Live demo

Loading the ContextMenu demo…

Anatomy

ContextMenu anatomy: each box holds the parts inside it.
  • ContextMenu.Root
    • ContextMenu.Triggerthe region
    • ContextMenu.Contentholds Menu items

Items, groups, radio items and submenus come from @texuli/primitives/menu.

Behavior checks

tests/behavior/scenarios/context-menu.spec.ts checks the ContextMenu scenario in the browser (7 checks) on Chromium, WebKit and the Pixel 7.

  • a right click opens it at the pointer with focus on the menu
  • a second right click moves it; a left click or an outside press closes it
  • the Menu key opens it on the first item; Escape returns focus
  • the pointer runs items, checkboxes and submenus
  • passes axe with the menu open (${scheme})
  • a long press opens it; a tap runs an item
  • passes axe on the phone with the menu open

Limits

  • Every row passes on every project; a flaky row gets at most two retries.
  • Size: at most 22.0 KiB gzip for @texuli/primitives/context-menu (pnpm size).
  • Open-to-focus: p75 at most 150 ms (asserted with TEXULI_PERF=1).