Menu
Present a compact list of actions from a trigger.
Live example
A reviewed public example, isolated from this page.
import { Menu } 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.
Anatomy
checkbox-item<div>Focusable menuitemcheckbox with controlled or uncontrolled checked state. Disabled items remain in the APG focus ring; selection stays open unless closeOnClick is true.
ARIA role: menuitemcheckbox
checkbox-item-indicator<span>Decorative checked mark. It is absent while unchecked unless keepMounted is true and paints the theme fallback only when custom children are absent.
Uses native semantics
content<div>Content (also exported as Popup) is the single lazy native role=menu manual popover. It owns APG focus movement and reset-on-close typeahead, retains exit transitions, and follows the active Trigger's private CSS anchor without a portal. Its composed dismiss zone includes every registered Trigger; pointer down/up light dismiss, programmatic focus exit, and Escape produce one cancellable reasoned request. Shift+Tab closes and returns to the active Trigger; forward Tab closes and moves to the next sequential tabbable after it, scoped to an owning native modal Dialog when present. Canceled controlled closes retain focus and native open state.
ARIA role: menu
group<div>Semantic menu item group which automatically references its mounted GroupLabel without leaving a dangling aria-labelledby value.
ARIA role: group
group-label<div>Visible label registered with the nearest Group or RadioGroup.
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. Disabled links are inert but focusable, and navigation stays open unless closeOnClick is true.
ARIA role: menuitem
radio-group<div>Controlled or uncontrolled group of mutually exclusive RadioItems, automatically named by its mounted GroupLabel.
ARIA role: group
radio-item<div>Focusable menuitemradio controlled by its RadioGroup. Disabled items remain in the focus ring; selection stays open unless closeOnClick is true.
ARIA role: menuitemradio
radio-item-indicator<span>Decorative selected mark. It is absent while unchecked unless keepMounted is true and paints the theme fallback only when custom children are absent.
Uses native semantics
separator<div>Horizontal semantic separator excluded from the menu focus ring.
ARIA role: separator
sub-content<div>Lazy nested role=menu manual popover with authoritative controlled state, direction-aware navigation, reset-on-close typeahead, physical placement, composed SubTrigger/Content light dismiss, and pointer-intent bridge handling. Accepted opening closes same-level branches with sibling-open; accepted closing propagates through open descendants. Shift+Tab closes only the submenu and returns to SubTrigger; forward Tab closes the root menu and advances after its active Trigger.
ARIA role: menu
sub-trigger<div>Focusable submenu item with authoritative controlled state, per-trigger mouse intent, and component-direction-aware open/close-key handling. It defaults to hover opening, supports per-trigger delay/closeDelay overrides, reports hover opens and leaves with the trigger-hover reason, and can render a native button without duplicating its Enter/Space activation. Keyboard activation or the logical open arrow enters the first enabled child even when hover already opened the submenu; Escape on an open SubTrigger closes only that child layer. Unmounting the only SubTrigger cancels a pending hover open and requests structural closure for an already-open child.
ARIA role: menuitem
trigger<button>Registered menu invoker with consumer-first native prop composition. Each Trigger has a unique public id and private CSS anchor; only the active Trigger exposes open state and labels/positions the shared Popup. ArrowDown opens at the first item, ArrowUp at the last, optional mouse hover uses per-trigger delays, and nativeButton preserves correct custom-host semantics.
Uses native semantics
Root properties
defaultOpendefaultTriggerIddisabledhighlightItemOnHoverloopFocusonOpenChangeonOpenChangeCompleteopensubmenuCloseDelaysubmenuOpenDelaytriggerId