Actions & Overlays
Menu
A menubar with single-level submenus.
stableEnhancer: enhanceMenuBuilt on <ul role="menubar">
hydrateless/menu.cssA menubar or navigation menu with single-level submenus, following the WAI-ARIA menubar pattern. The enhancer wires a roving tabindex, orientation-aware arrow navigation, submenu toggling, and typeahead.
Menubar
Arrow keys move between items; Enter or an arrow opens a submenu.
Live
JavaScript
This component ships an optional enhancer. With auto-init it loads automatically; to wire it yourself, import it directly:
import { enhanceMenu } from '@hydrateless/enhancers/menu';
const handle = enhanceMenu(container, { orientation: 'horizontal' | 'vertical' });
// handle.api -> imperative controls
// handle.destroy() -> tear everything downProps
The framework bindings expose these props (and forward the rest to the root element).
| Prop | Type | Default | Description |
|---|---|---|---|
orientation | 'horizontal' | 'vertical' | 'horizontal' | Direction of the top-level items. |
CSS variables
Override these on any ancestor to theme the component. See the theme studio to preview changes live.
| CSS variable | Used for |
|---|---|
--hl-surface | Submenu background. |
--hl-border | Submenu border. |
--hl-shadow-md | Submenu elevation. |
Accessibility
- A roving tabindex keeps the menubar a single tab stop.
- Submenu triggers expose
aria-haspopup,aria-expanded, andaria-controls.