Menubar / navigation-menu pattern with nested submenus. Without JavaScript
the stylesheet reveals submenus on hover and :focus-within, so the
navigation stays usable; this enhancer marks the root data-hl-ready and
takes over. 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, click, or hover once a sibling is open.
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). Inside a submenu, arrows, Home,
End, and typeahead move between items and skip disabled ones; the
inline-end arrow opens a nested submenu and the inline-start arrow (or
Escape) closes one level; at the first level the inline arrows move to the
adjacent top-level menu instead (Left alone closes when vertical). Items
added or removed after enhancement are picked up automatically. The open
top-level submenu is observable through onValueChange/hl:change,
activating a leaf item emits a cancelable hl:select, and the open submenu
is controllable through the returned API. Markup can set
data-hl-orientation and data-hl-default-value on the root.
Menubar / navigation-menu pattern with nested submenus. Without JavaScript the stylesheet reveals submenus on hover and
:focus-within, so the navigation stays usable; this enhancer marks the rootdata-hl-readyand takes over. Top-level items use a roving tabindex with orientation-aware arrow navigation; submenu triggers exposearia-haspopup/aria-expandedand open on Enter/Space/arrow, click, or hover once a sibling is open. 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). Inside a submenu, arrows, Home, End, and typeahead move between items and skip disabled ones; the inline-end arrow opens a nested submenu and the inline-start arrow (or Escape) closes one level; at the first level the inline arrows move to the adjacent top-level menu instead (Left alone closes when vertical). Items added or removed after enhancement are picked up automatically. The open top-level submenu is observable throughonValueChange/hl:change, activating a leaf item emits a cancelablehl:select, and the open submenu is controllable through the returned API. Markup can setdata-hl-orientationanddata-hl-default-valueon the root.