# Menubar

> A desktop-style row of menus (File, Edit, View).

Component · Navigation · Pro kit · [Live page](https://ui.twentyfirst.media/pro/components/Menubar/)

A desktop-style row of menus (File, Edit, View). Each menu is a regular `Menu`, so items can have
icons, shortcuts, checkbox and radio states and submenus.

- Keyboard: ←/→ move between menus (and switch the open one), ↓/Enter/Space open, ↑/↓ move inside,
  → and ← open and close submenus, Escape closes and returns to the bar.
- Moving the pointer across the bar switches menus once one is open.

## Example

```tsx
import { Menubar } from "@twentyfirstmedia/pro";

export default function Preview() {
  return (
    <div style={{ minHeight: 260 }}>
      <Menubar
        label="Editor"
        menus={[
          {
            label: "File",
            items: [
              { label: "New page", icon: "file", shortcut: "⌘N" },
              { label: "Open…", icon: "folder", shortcut: "⌘O" },
              {
                label: "Export",
                icon: "download",
                items: [{ label: "PDF" }, { label: "Markdown" }, { label: "HTML" }],
              },
              "-",
              { label: "Close", shortcut: "⌘W" },
            ],
          },
          {
            label: "Edit",
            items: [
              { label: "Undo", icon: "undo", shortcut: "⌘Z" },
              { label: "Redo", icon: "redo", shortcut: "⇧⌘Z" },
              "-",
              { label: "Find…", icon: "search", shortcut: "⌘F" },
            ],
          },
          {
            label: "View",
            items: [
              { label: "Show sidebar", type: "checkbox", checked: true },
              { label: "Show comments", type: "checkbox" },
              "-",
              { label: "Zoom in", shortcut: "⌘+" },
              { label: "Zoom out", shortcut: "⌘−" },
            ],
          },
          {
            label: "Help",
            items: [{ label: "Keyboard shortcuts", shortcut: "?" }, { label: "What's new" }],
          },
        ]}
      />
    </div>
  );
}
```

## Props

### Menubar

| Prop | Type | Notes |
| --- | --- | --- |
| `menus` | `MenubarMenu[]` | Required |
| `label?` | `string` | Accessible name of the bar. |
| `className?` | `string` | Extra class on the root element. |
| `style?` | `CSSProperties` | Inline style on the root element. |

### Menu

| Prop | Type | Notes |
| --- | --- | --- |
| `items` | `(MenuItem \| "-")[]` | Required |
| `label?` | `string` | Accessible name of the menu. |
| `autoFocus?` | `boolean` | Focus the first item on mount (menus opened from a button or the keyboard). |
| `onClose?` | `() => void` | Called after an item runs, and on Escape, so the owner can close the menu. |
| `className?` | `string` | Extra class on the root element. |
| `style?` | `CSSProperties` | Inline style on the root element. |