Context Menu

Contextual actions at a pointer location, with a complete keyboard alternative.

Interactive preview

Live specimenTry the component

Installation

Add editable source to an initialized React project. Set up antiflex/ui first if you are new here.

Terminal

npx antiflex-ui@0.1.0-alpha.2 add context-menu

This site previews the latest workspace styles and motion. The published alpha keeps its released styles until the next npm release.

Usage

React

<ContextMenu>
  <ContextMenuTrigger role="region" aria-label="Project context actions">
    Atlas workspace
  </ContextMenuTrigger>
  <ContextMenuContent aria-label="Project actions">
    <ContextMenuItem onSelect={duplicateProject}>Duplicate project</ContextMenuItem>
    <ContextMenuItem onSelect={exportProject}>Export JSON</ContextMenuItem>
  </ContextMenuContent>
</ContextMenu>

API reference

All components forward native attributes, className, and refs to their underlying elements.

Prop	Type	Default
`Trigger`	`native div attributes/ref; tabIndex`	`0; choose a meaningful role/name`
`Root / Sub: open, defaultOpen, onOpenChange`	`boolean, boolean, (open: boolean) => void`	`uncontrolled, closed`
`Content: size`	`sm \| md \| lg`	`md: 240px, 32px minimum item`
`Content: side / align / sideOffset / collisionPadding`	`top \| right \| bottom \| left; start \| center \| end; px`	`bottom/start/4/8; submenu right (left in RTL)`
`Item / Link: onSelect`	`(event: Event) => void`	`preventDefault cancels automatic close; Link also cancels navigation`
`Item: disabled / variant / textValue / closeOnSelect`	`boolean / default \| danger / string / boolean`	`false / default / visible text / true`
`CheckboxItem: checked / defaultChecked / onCheckedChange`	`boolean / boolean / (checked: boolean) => void`	`uncontrolled; stays open by default`
`RadioGroup: value / defaultValue / onValueChange`	`string / string / (value: string) => void`	`consumer labels the group; RadioItem supplies value`
`Sub + SubTrigger + Content`	`composable nested menu`	`click, Enter, Space or directional arrow opens; no hover timer`
`Shortcut`	`native span attributes and ref`	`visual hint only; does not register keyboard shortcuts`

Accessibility

Right-click opens at the pointer; Shift+F10 or ContextMenu key opens near the focusable region. Context content uses zero offset by default and closes on external scrolling. Supply a visible Dropdown Menu with equivalent actions for touch and discoverability. The browser can reserve context gestures (for example Shift+right-click); native menus remain available outside the trigger. Provide an accessible menu name with aria-label/aria-labelledby or a named Trigger. Arrow keys wrap among items; Home/End and buffered typeahead work in each menu. Disabled items remain focusable (aria-disabled) but never invoke callbacks. Enter/Space activate native buttons. Checkbox/radio items expose checked state and stay open unless closeOnSelect is true. RadioGroup/Group require an accessible label when needed. Submenus open by click, Enter/Space or the forward arrow (reversed in RTL); the backward arrow/Escape closes one level. Tab/Shift+Tab close the entire tree and move beyond the root invoker; they do not cycle inside menus. Outside press/release or focus exit requests dismissal. Focus returns after Escape/selection when still owned by the menu; an action opening a dialog retains its new focus. Controlled consumers must honor onOpenChange to close. Content uses native popover top-layer support and ResizeObserver, flips/clamps to the visual viewport, and stays mounted when closed. Menu parts must remain DOM descendants of their owning Content; custom wrappers are supported. Do not put form fields or other tabbable controls inside a menu; use Popover for that task. Root/Sub have no DOM/ref. Trigger/Item/CheckboxItem/RadioItem/SubTrigger forward button refs, Link an anchor, Content/Group/RadioGroup/Label/Separator divs and Shortcut a span. Shortcut text does not install global bindings. No hover-open submenu or touch long-press recognizer is included.