NavigationMenu
A website-style multi-level navigation bar: top-level triggers open a unified viewport panel (mega-panel multi-column link cards) on hover/click, with delayed open/close, a controlled open value, and full keyboard navigation. Leaf items with href render as links.
Basic usage (mega panel)
Basic usage
Controlled open (value + oas-change)
Controlled open
Delayed open/close
Delayed open/close
Vertical orientation
Vertical
Multi-column grid
Multi-column grid (columns=3)
Backdrop + keep-mounted + arrow
Backdrop + keep-mounted + arrow
backdrop shows an overlay when open; keep-mounted keeps the panel DOM after closing; arrow shows the pointer arrow.
Disabled items
Disabled items
API
Attributes
| Attribute | Description | Type | Default |
|---|---|---|---|
arrow | Pointer arrow on the popup, shown by default; arrow="false" hides it | string | true |
backdrop | Show an overlay when open (clicking the overlay closes) | boolean | — |
columns | Panel grid columns, default 2 (mega-panel multi-column link cards) | string | 2 |
delay-duration | Hover open/close delay in ms, default 200; clicks and keyboard are immediate | string | 200 |
items | Navigation items JSON (hierarchical; leaf items can carry description text and an icon to render mega-panel link cards) | string | [] |
keep-mounted | Keep the panel DOM mounted when closed (crawler/SEO indexing) | boolean | — |
orientation | Layout direction: horizontal (default) / vertical (panel appears to the right of triggers) | string | horizontal |
skip-delay-duration | Skip-delay window in ms, default 300: hovering another trigger within this window after a close opens it immediately | string | 300 |
value | Controlled open item (top-level trigger value; empty string = closed; when present the open state follows the attribute and interactions only dispatch oas-change for the host to update) | string | — |
Events
| Event | Description |
|---|---|
oas-change | The open item changed, detail: { value } (value is the open top-level item value; empty string = closed) |
oas-select | An item was selected (top-level leaf link or panel link card), detail: { value } |
NavItem fields (inherits MenuItem):
| Field | Description | Type |
|---|---|---|
label | Navigation text | string |
value | Selection value | string |
href | Link URL (optional); leaf items with href render as <a> and are navigable | string |
target | Link open target (optional) | string |
icon | Icon name (optional); panel link-card icon | string |
description | Link-card description (optional); rendered under the title in mega-panel mode | string |
active | Current-page marker (optional); renders aria-current="page" on the link | boolean |
disabled | Disabled | boolean |
children | Sub navigation items (optional); a top-level item with children opens the mega panel, and panel children with children render as an inline secondary sub-nav | NavItem[] |
Interaction: hover (after delay-duration) / click a top-level trigger to open the unified viewport panel; click a panel link card to select and fire oas-select; the open item change fires oas-change. Clicking outside closes; Esc closes the panel; ←/→ (vertical ↑/↓) switch top level, ↓ (vertical →) opens the panel and focuses the first item, ↓/↑ move within the panel, → expands an inline secondary sub-nav, Enter selects; while the panel is open Tab cycles among panel items (focus trap).