# Menubar

- Page: <https://kznlabs.github.io/labsUI/components/menubar>

## Menubar (`menubar`, component)

Desktop-style menu bar on the WAI-ARIA menubar pattern: one menu open at a time, hovering the next title while one is open switches to it, ← → walk the bar with or without a menu open, one Tab stop. A single highlight springs between titles; menus reuse every DropdownMenu item.

- Install: `npx @kznlabs/labsui add menubar`
- Docs: <https://kznlabs.github.io/labsUI/components/menubar>
- Brings: button, button-variants, dropdown-menu, list, platform, use-anchor, use-controllable-state, use-dismiss, use-indicator, utils
- npm: clsx@^2.1.1, lucide-react@1.63.0, motion@14.7.1, tailwind-merge@^3.7.0

### API

- `<MenubarContent>`
  - `children: ReactNode`: Items, labels, groups and separators.
  - `align?: "start" | "end"` = `"start"`: Edge of the trigger the menu lines up with.
- `<MenubarItem>`
  - `children: ReactNode`: Label, optionally with a leading icon.
  - `disabled?: boolean`: Shown but not selectable.
  - `onSelect?: () => void`: Called on click or Enter; the menu then closes.
  - `shortcut?: string`: Right-aligned hint, e.g. "⌘S".
  - `variant?: "default" | "destructive"` = `"default"`: "destructive": red, for irreversible actions.
- `<MenubarCheckboxItem>`
  - `checked: boolean`: Shows the check mark.
  - `children: ReactNode`: Label, optionally with a leading icon.
  - `onCheckedChange: (checked: boolean) => void`: Called with the new state.
  - `disabled?: boolean`: Shown but not selectable.
  - `shortcut?: string`: Right-aligned hint, e.g. "⌘S".
- `<MenubarRadioGroup>`
  - `children: ReactNode`: `DropdownMenuRadioItem`s.
  - `onValueChange: (value: string) => void`: Called with the picked item's value.
  - `value: string`: Value of the checked item.
- `<MenubarRadioItem>`
  - `children: ReactNode`: Label, optionally with a leading icon.
  - `value: string`: Checked when it equals the group's `value`.
  - `disabled?: boolean`: Shown but not selectable.
- `<MenubarLabel>` (+ <div> props)
- `<MenubarSeparator>`
- `<Menubar>` (+ <div> props): Desktop-style menu bar: one menu open at a time, hovering another title while one is open
switches to it, Left/Right move between menus (open or not). One highlight springs between titles.
- `<MenubarMenu>`: One title and its menu. `value` is optional; give one to tell menus apart in tests or analytics.
  - `children: ReactNode`: `MenubarTrigger` and `MenubarContent`.
  - `value?: string`: Stable id for the menu; one is generated if omitted.
- `<MenubarTrigger>` (+ <button> props): A menu title. Click toggles; Down, Enter or Space opens on the first item, Up on the last.

### Usage

```tsx
<Menubar aria-label="Editor"><MenubarMenu><MenubarTrigger>File</MenubarTrigger><MenubarContent><MenubarItem shortcut="⌘N" onSelect={create}>New</MenubarItem></MenubarContent></MenubarMenu></Menubar>
```

### Example: editor-menubar.tsx

```tsx
"use client";

import { useState } from "react";
import {
  Menubar,
  MenubarCheckboxItem,
  MenubarContent,
  MenubarItem,
  MenubarMenu,
  MenubarSeparator,
  MenubarTrigger,
} from "@/components/ui/menubar";

export function EditorMenubar({ onNew, onExport }: { onNew: () => void; onExport: () => void }) {
  const [sidebar, setSidebar] = useState(true);
  return (
    <Menubar aria-label="Editor">
      <MenubarMenu>
        <MenubarTrigger>File</MenubarTrigger>
        <MenubarContent>
          <MenubarItem shortcut="⌘N" onSelect={onNew}>New clip</MenubarItem>
          <MenubarSeparator />
          <MenubarItem shortcut="⌘E" onSelect={onExport}>Export</MenubarItem>
        </MenubarContent>
      </MenubarMenu>
      <MenubarMenu>
        <MenubarTrigger>View</MenubarTrigger>
        <MenubarContent>
          <MenubarCheckboxItem checked={sidebar} onCheckedChange={setSidebar}>
            Show sidebar
          </MenubarCheckboxItem>
        </MenubarContent>
      </MenubarMenu>
    </Menubar>
  );
}
```