Context Menu

Offer actions from a pointer or keyboard context menu.

Live example

A reviewed public example, isolated from this page.

import { ContextMenu } from "heidi-ui";
import "heidi-ui/styles.css";

Copy this one primitive from its hosted source recipe or install the whole package from the Heidi UI overview.

content<div>
Lazy native popover with role=menu, a stable accessible name, APG focus movement, typeahead, exit retention, and a physical virtual anchor.
ARIA role: menu
group<div>
Semantic menu item group which automatically references its mounted GroupLabel.
ARIA role: group
group-label<div>
Visible label registered with the nearest Group without dangling aria-labelledby references.
Uses native semantics
item<div>
Polymorphic role=menuitem with non-native keyboard activation. Disabled items remain focusable but inert; selection closes unless closeOnClick is false.
ARIA role: menuitem
link-item<a>
Semantic anchor menu item with APG Space activation; navigation stays open by default and disabled links are inert but focusable.
ARIA role: menuitem
separator<div>
Horizontal semantic separator excluded from the menu focus ring.
ARIA role: separator
sub-content<div>
Lazy nested menu anchored to SubTrigger with controlled-state reconciliation, direction-aware close keys, typeahead, and pointer bridge delays.
ARIA role: menu
sub-trigger<div>
Focusable submenu item with authoritative controlled state, delayed pointer intent, and direction-aware open-key handling.
ARIA role: menuitem
trigger<div>
Semantics-neutral context target. Right click, ContextMenu/Shift+F10 on a consumer-focusable host, or a stationary 500ms touch opens at the physical invocation point.
Uses native semantics