# Menubar

> A desktop application menu bar (File, Edit, View) with keyboard navigation across and within its menus.

Category: Overlays. Docs page: https://rime.mjsons.net/components/menubar

## Installation

```bash
npx shadcn@latest add KezLahd/rime/menubar
```

Menubar is the WAI-ARIA menubar pattern on the recessed control fill. It is one tab stop: Left and Right move across the titles, Down, Enter or Space open a menu at its first item and Up at its last. While a menu is open, Left and Right move to the neighbouring menu and hovering another title switches to it.

Each menu is the shared menu list: icons, shortcut hints, separators, headings and danger items in the popover glass.

inline renders the open panel in the page flow: no portal, scrim, focus trap, scroll lock or outside-click listener. It exists for docs, previews and static mock-ups; never ship it as the live overlay.

## Usage

```tsx
import { Menubar } from "@/components/ui";

<Menubar
  aria-label="Editor"
  menus={[
    { id: "file", label: "File", items: [{ id: "new", label: "New project", shortcut: "Ctrl N", onSelect: create }] },
    { id: "edit", label: "Edit", items: [{ id: "undo", label: "Undo", shortcut: "Ctrl Z", onSelect: undo }] },
  ]}
/>
```

## Props: Menubar

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `menus` (required) | `ReadonlyArray<MenubarMenu>` |  |  |
| `aria-label` (required) | `string` |  | The bar's accessible name, e.g. "Editor". |
| `inline` | `boolean` |  | Render one menu open in the page flow under its trigger (docs, previews). Nothing is interactive and no listeners are attached. |
| `inlineOpenId` | `string` |  | Inline only: which menu is drawn open (default the first) and which item is highlighted. |
| `inlineHighlightId` | `string` |  |  |
| `className` | `string` |  |  |

## Examples

### Open

The File menu drawn open under its title.

```tsx
<Menubar inline aria-label="Editor" menus={MENUS} inlineOpenId="file" inlineHighlightId="open" />
```

### Interactive

Click a title, then use the arrow keys.

```tsx
<Menubar aria-label="Editor" menus={MENUS} />
```

## Theme tokens

Per-component tokens. Undeclared by default: the default below is the fallback the CSS uses. Set any of them at :root or on a wrapper to restyle every instance.

| Token | Default |
| --- | --- |
| `--menu-list-min-width` | `220px` |
| `--menubar-bg` | `rgba(var(--rgb-white), 0.5)` |
| `--menubar-item-radius` | `var(--r-sm)` |
| `--menubar-radius` | `var(--r-md)` |
| `--popover-item-active-bg` | `linear-gradient(to right, rgba(var(--rgb-brand), 0.14), rgba(var(--rgb-brand-deep), 0.07))` |
| `--popover-item-press-bg` | `linear-gradient(to right, rgba(var(--rgb-brand), 0.2), rgba(var(--rgb-brand-deep), 0.1))` |
| `--popover-item-radius` | `var(--r-xs)` |
| `--popover-pad` | `calc(6px * var(--density))` |
| `--popover-radius` | `var(--r-lg)` |

System tokens it reads: `--blur-recess`, `--border-w`, `--control-h-sm`, `--danger-ink`, `--density`, `--dur`, `--dur-fast`, `--dur-slow`, `--ease`, `--ease-out`, `--focus-ring`, `--font-body`, `--ink-body`, `--ink-brand`, `--ink-disabled`, `--ink-heading`, `--ink-muted`, `--ink-secondary`, `--line-soft`, `--popover-blur`, `--popover-border`, `--popover-shadow`, `--popover-surface`, `--r-lg`, `--r-md`, `--r-sm`, `--r-xs`, `--rgb-brand`, `--rgb-brand-deep`, `--rgb-danger`, `--rgb-white`, `--shadow-recess`, `--text-caption`, `--text-micro`, `--text-small`, `--tracking-label`, `--wash-active`, `--wash-hover`, `--z-popover`.

## Accessibility

- role="menubar" holding role="menuitem" titles with aria-haspopup and aria-expanded; each menu is role="menu" labelled by its title.
- Roving tab index: the bar is a single tab stop. Esc closes a menu and returns focus to its title; Tab closes it and moves on.

## Do

- Use it for desktop tools and editors with many commands.
- Mirror the real keyboard shortcuts in the hints.

## Don't

- Don't use it for site navigation; that is NavigationMenu or the sidebar.
- Don't nest submenus; keep each menu flat.

Related: https://rime.mjsons.net/components/context-menu, https://rime.mjsons.net/components/menu, https://rime.mjsons.net/components/command