# Menubar

> Desktop-app-style persistent menus.

Import from `@aspyn-io/kit`. Scaffold source: `npx shadcn@latest add https://design.aspyn.io/r/menubar.json`

## Install

```tsx
import {
  Menubar,
  MenubarMenu,
  MenubarTrigger,
  MenubarContent,
  MenubarItem,
  MenubarSeparator,
  MenubarShortcut,
} from "@aspyn-io/kit";
```

### Application menubar

Desktop-app-style persistent menus: ideal for editor/console surfaces.

```tsx
<Menubar>
  <MenubarMenu>
    <MenubarTrigger>File</MenubarTrigger>
    <MenubarContent>
      <MenubarItem>New route<MenubarShortcut>⌘N</MenubarShortcut></MenubarItem>
      <MenubarItem>Export…</MenubarItem>
      <MenubarSeparator />
      <MenubarItem>Print</MenubarItem>
    </MenubarContent>
  </MenubarMenu>
  <MenubarMenu>
    <MenubarTrigger>View</MenubarTrigger>
    <MenubarContent>…</MenubarContent>
  </MenubarMenu>
</Menubar>
```

### Checkbox items

Toggle view options from a menu with MenubarCheckboxItem.

```tsx
const [statusBar, setStatusBar] = React.useState(true);
const [minimap, setMinimap] = React.useState(false);

<Menubar>
  <MenubarMenu>
    <MenubarTrigger>View</MenubarTrigger>
    <MenubarContent>
      <MenubarCheckboxItem
        checked={statusBar}
        onCheckedChange={setStatusBar}
      >
        Status bar
      </MenubarCheckboxItem>
      <MenubarCheckboxItem checked={minimap} onCheckedChange={setMinimap}>
        Minimap
      </MenubarCheckboxItem>
    </MenubarContent>
  </MenubarMenu>
</Menubar>
```

### Radio items

Pick a single value with MenubarRadioGroup.

```tsx
const [theme, setTheme] = React.useState("system");

<Menubar>
  <MenubarMenu>
    <MenubarTrigger>Theme</MenubarTrigger>
    <MenubarContent>
      <MenubarRadioGroup value={theme} onValueChange={setTheme}>
        <MenubarRadioItem value="light">Light</MenubarRadioItem>
        <MenubarRadioItem value="dark">Dark</MenubarRadioItem>
        <MenubarRadioItem value="system">System</MenubarRadioItem>
      </MenubarRadioGroup>
    </MenubarContent>
  </MenubarMenu>
</Menubar>
```

### With icons

Lead items with an icon; SVGs are sized and tinted for you.

```tsx
<Menubar>
  <MenubarMenu>
    <MenubarTrigger>Edit</MenubarTrigger>
    <MenubarContent>
      <MenubarItem>
        <UndoIcon />
        Undo
        <MenubarShortcut>⌘Z</MenubarShortcut>
      </MenubarItem>
      <MenubarItem>
        <RedoIcon />
        Redo
        <MenubarShortcut>⇧⌘Z</MenubarShortcut>
      </MenubarItem>
    </MenubarContent>
  </MenubarMenu>
</Menubar>
```