Menu
A standalone menu list with selection state and keyboard navigation.
Basic usage
Basic usage
Default selection
Default selection (value echo)
Disabled items
Disabled items
Nested submenu
Menu items with children show an expand arrow (›); clicking or hovering expands the submenu, which is rendered indented; press ArrowRight to enter and ArrowLeft to go back.
Nested submenu
Horizontal navigation
With mode="horizontal" the items are laid out in a row as a top navigation bar; first-level submenus pop down while second-level and deeper submenus still pop to the right.
Horizontal navigation (top bar style)
Collapsed state
collapsed (vertical only) narrows the menu to show only icons; hovering or clicking an icon item pops its submenu out to the right, still a full menu.
Collapsed (icons only)
Groups
Menu items with type: "group" render as a section with a group title (small text, secondary color, not clickable); the group's children are laid out flat on the same level and may mix in submenus and dividers.
Groups
With icons
icon uses icon names from @oas-isui/icons (iconRegistry) and renders an inline SVG to the left of the text.
With icons
Divider
type: "divider" renders a thin divider line that is not clickable and not part of keyboard navigation.
Divider
Dark menu
theme="dark" applies dark tokens locally (dark background + light text) to the menu, independent of the global theme; when unset, it follows the global theme.
Dark menu
Selection event
Selection event
API
Attributes
| Attribute | Description | Type | Default |
|---|---|---|---|
collapsed | Collapsed state (vertical only): icons only, submenus pop to the right | — | — |
items | Menu items JSON | string | [] |
mode | Layout mode: vertical menu / horizontal top bar | — | — |
theme | Local theme: dark uses dark tokens (independent of the global theme) | — | — |
value | Current selected value | string | — |
Events
| Event | Description |
|---|---|
oas-select | An item was selected, detail: { value } |
MenuItem fields:
| Field | Description | Type |
|---|---|---|
label | Menu item text | string |
value | Selection value | string |
type | Item type: item (default) / group (group title) / divider | string |
icon | Icon name (a key of @oas-isui/icons iconRegistry) | string |
disabled | Disables the item | boolean |
children | Submenu items array with the same shape as the parent (nested recursively) | MenuItem[] |
children is an optional submenu items array; items with children expand their submenu on click/hover, and the selected state only lands on leaf items. group children are laid out flat on the same level; group titles are not clickable and skipped in keyboard navigation; divider items are not clickable and skipped in keyboard navigation.
Keyboard navigation: arrow keys move (auto-skipping group titles and dividers), Enter selects (items with submenus enter via Enter/ArrowRight), Home / End jump, ArrowLeft returns to the parent; role="menu" + menuitemradio (submenu parents are menuitem), the selected item shows a check mark.