Menubar
A desktop-app-style top menu bar (File / Edit / View). Click or hover expands submenus (cascading popups), with arrow key support, Alt access keys and a focus trap.
Basic usage
Basic usage
Disabled items and groups
Submenus support disabled, type: "divider" separators and type: "group" group titles.
Disabled items and groups
Controlled selection
The value attribute is controlled (it is in observedAttributes): an external setAttribute('value', ...) takes effect immediately and syncs the selected item (check/highlight) to the corresponding leaf item; internal clicks also write back to value (uncontrolled channel), and the host can listen to oas-select to take over.
Controlled selection (value attribute)
API
Attributes
| Attribute | Description | Type | Default |
|---|---|---|---|
items | Top-level menu items JSON (with submenu children) | string | [] |
value | Controlled selected value (external change syncs the check immediately; internal selection writes back) | string | — |
Events
| Event | Description |
|---|---|
oas-select | An item was selected, detail: { value } |
MenubarItem fields (inherits MenuItem):
| Field | Description | Type |
|---|---|---|
label | Menu text | string |
value | Selection value | string |
accessKey | Alt access key (single character); defaults to the first ASCII letter of label | string |
disabled | Disabled | boolean |
children | Submenu items (nested recursively, cascading to the right) | MenubarItem[] |
Keyboard: at top level ←/→ switch, ↓/Enter opens the submenu, Esc closes; inside a submenu ↑/↓ move, → enters a cascading submenu, ← returns to the parent; Home/End jump. Pressing Alt alone focuses the menu bar, Alt + access key opens the matching top-level menu. While a submenu is open, Tab cycles among its items (focus trap); roving tabindex keeps only the current top-level item tab-reachable.