Menubar / navigation-menu pattern with single-level submenus. Top-level items
use a roving tabindex with orientation-aware arrow navigation; submenu
triggers expose aria-haspopup/aria-expanded and open on Enter/Space/arrow
or click. Submenus are promoted to native popover="manual" surfaces so they
render in the top layer, placed against their trigger with CSS anchor
positioning (with a JS fallback on engines without it). Submenu items support
arrow/Home/End/typeahead, Escape to close, and Left/Right to move between
adjacent top-level menus. The open submenu is observable through
onOpenChange/hl:open-change, activating a leaf item emits a cancelable
hl:select, and the open submenu is controllable through the returned API.
Submenu values come from data-hl-value on each trigger, defaulting to the
index.
Menubar / navigation-menu pattern with single-level submenus. Top-level items use a roving tabindex with orientation-aware arrow navigation; submenu triggers expose
aria-haspopup/aria-expandedand open on Enter/Space/arrow or click. Submenus are promoted to nativepopover="manual"surfaces so they render in the top layer, placed against their trigger with CSS anchor positioning (with a JS fallback on engines without it). Submenu items support arrow/Home/End/typeahead, Escape to close, and Left/Right to move between adjacent top-level menus. The open submenu is observable throughonOpenChange/hl:open-change, activating a leaf item emits a cancelablehl:select, and the open submenu is controllable through the returned API. Submenu values come fromdata-hl-valueon each trigger, defaulting to the index.