# Menubar

A desktop-style application menu bar.

Group: Navigation

## Import

```tsx
import { Menubar } from "@indoku/ui"
```

## Examples

### Basic usage

```tsx
function MenubarDemo() {
  const [bookmarksBar, setBookmarksBar] = useState(true)
  const [fullUrls, setFullUrls] = useState(false)

  return (
    <Menubar.Root>
      <Menubar.MenuItem label="File">
        <Menubar.Item value="new-tab">
          New Tab <Menubar.ItemCommand>⌘T</Menubar.ItemCommand>
        </Menubar.Item>
        <Menubar.Item value="new-window">
          New Window <Menubar.ItemCommand>⌘N</Menubar.ItemCommand>
        </Menubar.Item>
        <Menubar.Separator />
        <Menubar.Item value="share">Share</Menubar.Item>
        <Menubar.Separator />
        <Menubar.Item value="print">
          Print... <Menubar.ItemCommand>⌘P</Menubar.ItemCommand>
        </Menubar.Item>
      </Menubar.MenuItem>

      <Menubar.MenuItem label="Edit">
        <Menubar.Item value="undo">
          Undo <Menubar.ItemCommand>⌘Z</Menubar.ItemCommand>
        </Menubar.Item>
        <Menubar.Item value="redo">
          Redo <Menubar.ItemCommand>⇧⌘Z</Menubar.ItemCommand>
        </Menubar.Item>
        <Menubar.Separator />
        <Menubar.Item value="cut">Cut</Menubar.Item>
        <Menubar.Item value="copy">Copy</Menubar.Item>
        <Menubar.Item value="paste">Paste</Menubar.Item>
      </Menubar.MenuItem>

      <Menubar.MenuItem label="View">
        <Menubar.CheckboxItem
          value="bookmarks-bar"
          checked={bookmarksBar}
          onCheckedChange={(checked) => setBookmarksBar(checked)}
        >
          <Menubar.ItemIndicator>✓</Menubar.ItemIndicator>
          Show Bookmarks Bar
        </Menubar.CheckboxItem>
        <Menubar.CheckboxItem
          value="full-urls"
          checked={fullUrls}
          onCheckedChange={(checked) => setFullUrls(checked)}
        >
          <Menubar.ItemIndicator>✓</Menubar.ItemIndicator>
          Show Full URLs
        </Menubar.CheckboxItem>
      </Menubar.MenuItem>

      <Menubar.MenuItem label="Help" disabled>
        <Menubar.Item value="about">About</Menubar.Item>
      </Menubar.MenuItem>
    </Menubar.Root>
  )
}
```

## Props

### Menu

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `label` * | `React.ReactNode` |  | Trigger content (e.g. "File"). |
| `children` * | `React.ReactNode` |  |  |
| `disabled` | `boolean` |  |  |

`*` = required. Style props and HTML attributes are accepted too.