# Menubar

> An application's row of menus, such as File, Edit and View, with the menubar keyboard contract.

## Anatomy

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](/menu.html.md) 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](/mega-menu.html.md) of links instead.

File Edit View

-   NewCtrl+N
-   OpenCtrl+O
-   SaveCtrl+S

-   UndoCtrl+Z
-   RedoCtrl+Y

-   CutCtrl+X
-   CopyCtrl+C
-   PasteCtrl+V

-   Zoom in
-   Zoom out
-   Full screen

```
<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 |