01
Overview
Command menubar for application chrome such as File, Edit, and View menus.
Usage
Guidance
Use When
- Building a desktop-style command menubar with dropdown command groups.
- Exposing top-level application menus that need arrow-key traversal and optional submenus.
Avoid When
- Linking between routes or sections — use navigation-bar or side-navigation instead.
- Showing one standalone trigger with a menu — use dropdown, dropdown-menu, and dropdown-item directly.
02
When to use
Use when
- Building a desktop-style command menubar with dropdown command groups.
- Exposing top-level application menus that need arrow-key traversal and optional submenus.
Avoid when
- Linking between routes or sections — use navigation-bar or side-navigation instead.
- Showing one standalone trigger with a menu — use dropdown, dropdown-menu, and dropdown-item directly.
03
Examples
File, Edit, and View
A desktop-style application menubar with shortcuts, a disabled row, and an Open Recent submenu.
04
Props
| Name | Type | Default | Required | Bindable | Description |
|---|---|---|---|---|---|
id | text | ||||
menus | readonly MenuBarMenu[] | req | |||
label | text | 'Application menu' | |||
labelledBy | text | ||||
role | unknown | req | |||
dir | unknown | req | |||
onkeydown | unknown | req |