A .menubar is an application's row of menus, such as
File, Edit and View.
Fill the bar with .menu-trigger buttons and name it with
aria-label. Each button opens an ordinary
menu written after the bar. The
Menubar component adds the menubar and menuitem roles
and the keyboard support below. AutoInit() starts it,
or you can call Expressive.Menubar.init(el) yourself.
For site navigation, use a
mega menu of links instead.
<div class="menubar" aria-label="Editor">
<button type="button" class="menu-trigger" data-target="file-menu">File</button>
<button type="button" class="menu-trigger" data-target="edit-menu">Edit</button>
</div>
<menu id="file-menu">
<li><button type="button">New</button></li>
<li><button type="button">Open</button></li>
</menu>
<menu id="edit-menu">
<li><button type="button">Undo</button></li>
<li><button type="button">Redo</button></li>
</menu>Keyboard
- The bar is one Tab stop, and it remembers the last item focused.
- Left and Right move along the bar and wrap. Home and End go to the ends. Both pairs mirror in right-to-left pages.
- Down, Enter or Space opens a menu on its first item.
- In an open menu, Left and Right open the neighbouring menu, unless the row opens or closes a submenu.
- Escape closes the menu and returns to its item.
Tokens
| Token | Default |
|---|---|
--md-comp-menubar-container-color |
--md-sys-color-surface-container |
--md-comp-menubar-shape |
12px |
--md-comp-menubar-item-height |
40px |