# Menubar (/ui/components/react/menubar)



<Playground component="menubar" />

## Usage [#usage]

```tsx
import {
  Menubar,
  MenubarMenu,
  MenubarTrigger,
  MenubarContent,
  MenubarItem,
  MenubarSeparator,
  MenubarSub,
  MenubarSubTrigger,
  MenubarSubContent,
} from '@appica/ui-react/menubar'
```

```tsx
<Menubar aria-label="Application">
  <MenubarMenu>
    <MenubarTrigger>File</MenubarTrigger>
    <MenubarContent>
      <MenubarItem>New file</MenubarItem>
      <MenubarItem>Open…</MenubarItem>
      <MenubarSub>
        <MenubarSubTrigger>Open recent</MenubarSubTrigger>
        <MenubarSubContent>
          <MenubarItem>project-alpha</MenubarItem>
          <MenubarItem>landing-page</MenubarItem>
        </MenubarSubContent>
      </MenubarSub>
      <MenubarSeparator />
      <MenubarItem>Save</MenubarItem>
    </MenubarContent>
  </MenubarMenu>
  <MenubarMenu>
    <MenubarTrigger>Edit</MenubarTrigger>
    <MenubarContent>
      <MenubarItem>Undo</MenubarItem>
      <MenubarItem>Redo</MenubarItem>
    </MenubarContent>
  </MenubarMenu>
</Menubar>
```

`Menubar` is a compound component built on [Base UI's Menubar](https://base-ui.com/react/components/menubar). The root is the bar that coordinates a row (or column) of menus, sharing `variant`, `size`, and `orientation` with all of them:

* **`MenubarMenu`** — wraps one menu (a menu root under the hood). It inherits the bar's `size`.
* **`MenubarTrigger`** — the top-level label that opens its menu. Once any menu is open, moving the pointer to a sibling trigger switches to it; arrow keys move focus along the bar.
* **`MenubarContent`** — the portalled popup for that menu. In a vertical bar it opens to the side automatically.
* **`MenubarItem`** — one action. Fires `onClick` and closes the menu by default.
* **`MenubarGroup`*&#x2A; / &#x2A;*`MenubarGroupLabel`*&#x2A; / &#x2A;*`MenubarSeparator`** — structure for sectioned menus.
* **`MenubarCheckboxItem`*&#x2A; / &#x2A;*`MenubarRadioGroup`*&#x2A; + &#x2A;*`MenubarRadioItem`** — stateful options with a check indicator.
* **`MenubarLinkItem`** — an item that renders an `<a>` for navigation.
* **`MenubarSub`*&#x2A; / &#x2A;*`MenubarSubTrigger`*&#x2A; / &#x2A;*`MenubarSubContent`** — a nested submenu.

Inside an item, put a leading icon on `data-icon="start"`, and push a trailing [`Kbd`](/ui/components/react/kbd) shortcut to the edge with `ms-auto`.

Reach for a `Menubar` for the persistent **command bar** of an application (File / Edit / View …). For a single menu opened from one button, use a [`DropdownMenu`](/ui/components/react/dropdown-menu); for in-page navigation with rich panels, use a [`Navigation Menu`](/ui/components/react/navigation-menu).

## Examples [#examples]

### Application menu [#application-menu]

A typical desktop-style command bar — File, Edit, and View menus with keyboard shortcuts, separators, a nested "Open recent" submenu, and a disabled item.

```tsx
import {
  Menubar,
  MenubarMenu,
  MenubarTrigger,
  MenubarContent,
  MenubarItem,
  MenubarSeparator,
  MenubarSub,
  MenubarSubTrigger,
  MenubarSubContent,
} from '@appica/ui-react/menubar'
import { Kbd } from '@appica/ui-react/kbd'

export default function MenubarDefault() {
  return (
    <Menubar aria-label="Application">
      <MenubarMenu>
        <MenubarTrigger>File</MenubarTrigger>
        <MenubarContent>
          <MenubarItem>
            New file
            <Kbd size="sm" className="ms-auto">
              ⌘N
            </Kbd>
          </MenubarItem>
          <MenubarItem>
            Open…
            <Kbd size="sm" className="ms-auto">
              ⌘O
            </Kbd>
          </MenubarItem>
          <MenubarSub>
            <MenubarSubTrigger>Open recent</MenubarSubTrigger>
            <MenubarSubContent>
              <MenubarItem>project-alpha</MenubarItem>
              <MenubarItem>landing-page</MenubarItem>
              <MenubarItem>design-system</MenubarItem>
            </MenubarSubContent>
          </MenubarSub>
          <MenubarSeparator />
          <MenubarItem>
            Save
            <Kbd size="sm" className="ms-auto">
              ⌘S
            </Kbd>
          </MenubarItem>
          <MenubarItem>
            Save as…
            <Kbd size="sm" className="ms-auto">
              ⇧⌘S
            </Kbd>
          </MenubarItem>
        </MenubarContent>
      </MenubarMenu>

      <MenubarMenu>
        <MenubarTrigger>Edit</MenubarTrigger>
        <MenubarContent>
          <MenubarItem>
            Undo
            <Kbd size="sm" className="ms-auto">
              ⌘Z
            </Kbd>
          </MenubarItem>
          <MenubarItem>
            Redo
            <Kbd size="sm" className="ms-auto">
              ⇧⌘Z
            </Kbd>
          </MenubarItem>
          <MenubarSeparator />
          <MenubarItem>Cut</MenubarItem>
          <MenubarItem>Copy</MenubarItem>
          <MenubarItem>Paste</MenubarItem>
        </MenubarContent>
      </MenubarMenu>

      <MenubarMenu>
        <MenubarTrigger>View</MenubarTrigger>
        <MenubarContent>
          <MenubarItem>Zoom in</MenubarItem>
          <MenubarItem>Zoom out</MenubarItem>
          <MenubarItem>Reset zoom</MenubarItem>
          <MenubarSeparator />
          <MenubarItem disabled>Enter full screen</MenubarItem>
        </MenubarContent>
      </MenubarMenu>
    </Menubar>
  )
}
```

### Variants [#variants]

`variant` styles the triggers: `pill` (default) gives each a hover/active pill, while `line` draws an animated underline — closer to a classic desktop menu bar.

```tsx
import { Menubar, MenubarMenu, MenubarTrigger, MenubarContent, MenubarItem } from '@appica/ui-react/menubar'

const MENUS = ['File', 'Edit', 'View']

function Menus() {
  return MENUS.map((label) => (
    <MenubarMenu key={label}>
      <MenubarTrigger>{label}</MenubarTrigger>
      <MenubarContent>
        <MenubarItem>Action one</MenubarItem>
        <MenubarItem>Action two</MenubarItem>
        <MenubarItem>Action three</MenubarItem>
      </MenubarContent>
    </MenubarMenu>
  ))
}

export default function MenubarVariants() {
  return (
    <div className="flex flex-col items-center gap-8">
      <Menubar variant="pill" aria-label="Pill menubar">
        <Menus />
      </Menubar>
      <Menubar variant="line" aria-label="Line menubar">
        <Menus />
      </Menubar>
    </div>
  )
}
```

### Vertical [#vertical]

Set `orientation="vertical"` to stack the menus into a sidebar. Triggers can carry a leading icon (`data-icon="start"`), and each menu opens to the inline-end side. Menus normally only flip to the opposite same-axis side; pass `collisionAvoidance={{ fallbackAxisSide: 'end' }}` so a side-opening menu can also fall back to the top/bottom axis when it doesn't fit there.

```tsx
import {
  Menubar,
  MenubarMenu,
  MenubarTrigger,
  MenubarContent,
  MenubarItem,
  MenubarSeparator,
} from '@appica/ui-react/menubar'
import { LayoutDashboard, Folder, Users, Settings } from '@appica/icons-react'

export default function MenubarVertical() {
  return (
    <Menubar orientation="vertical" aria-label="Workspace" className="w-35">
      <MenubarMenu>
        <MenubarTrigger>
          <LayoutDashboard data-icon="start" />
          Overview
        </MenubarTrigger>
        <MenubarContent collisionAvoidance={{ fallbackAxisSide: 'end' }}>
          <MenubarItem>Summary</MenubarItem>
          <MenubarItem>Activity</MenubarItem>
        </MenubarContent>
      </MenubarMenu>
      <MenubarMenu>
        <MenubarTrigger>
          <Folder data-icon="start" />
          Projects
        </MenubarTrigger>
        <MenubarContent collisionAvoidance={{ fallbackAxisSide: 'end' }}>
          <MenubarItem>All projects</MenubarItem>
          <MenubarItem>New project</MenubarItem>
          <MenubarSeparator />
          <MenubarItem>Archived</MenubarItem>
        </MenubarContent>
      </MenubarMenu>
      <MenubarMenu>
        <MenubarTrigger>
          <Users data-icon="start" />
          Team
        </MenubarTrigger>
        <MenubarContent collisionAvoidance={{ fallbackAxisSide: 'end' }}>
          <MenubarItem>Members</MenubarItem>
          <MenubarItem>Invitations</MenubarItem>
        </MenubarContent>
      </MenubarMenu>
      <MenubarMenu>
        <MenubarTrigger>
          <Settings data-icon="start" />
          Settings
        </MenubarTrigger>
        <MenubarContent collisionAvoidance={{ fallbackAxisSide: 'end' }}>
          <MenubarItem>General</MenubarItem>
          <MenubarItem>Billing</MenubarItem>
        </MenubarContent>
      </MenubarMenu>
    </Menubar>
  )
}
```

### Submenus [#submenus]

Nest a `MenubarSub` inside a menu with its own `MenubarSubTrigger` and `MenubarSubContent`. The sub-trigger shows a chevron and opens to the side on hover or with the arrow keys, flipping automatically near a screen edge.

```tsx
import {
  Menubar,
  MenubarMenu,
  MenubarTrigger,
  MenubarContent,
  MenubarItem,
  MenubarSeparator,
  MenubarSub,
  MenubarSubTrigger,
  MenubarSubContent,
} from '@appica/ui-react/menubar'
import { Kbd } from '@appica/ui-react/kbd'

export default function MenubarSubmenu() {
  return (
    <Menubar aria-label="Application">
      <MenubarMenu>
        <MenubarTrigger>File</MenubarTrigger>
        <MenubarContent>
          <MenubarItem>
            New file
            <Kbd size="sm" className="ms-auto">
              ⌘N
            </Kbd>
          </MenubarItem>
          <MenubarSub>
            <MenubarSubTrigger>Open recent</MenubarSubTrigger>
            <MenubarSubContent>
              <MenubarItem>project-alpha</MenubarItem>
              <MenubarItem>landing-page</MenubarItem>
              <MenubarItem>design-system</MenubarItem>
              <MenubarSeparator />
              <MenubarItem>Clear recent</MenubarItem>
            </MenubarSubContent>
          </MenubarSub>
          <MenubarSeparator />
          <MenubarItem>
            Save
            <Kbd size="sm" className="ms-auto">
              ⌘S
            </Kbd>
          </MenubarItem>
        </MenubarContent>
      </MenubarMenu>

      <MenubarMenu>
        <MenubarTrigger>Share</MenubarTrigger>
        <MenubarContent>
          <MenubarItem>Copy link</MenubarItem>
          <MenubarSub>
            <MenubarSubTrigger>Export as</MenubarSubTrigger>
            <MenubarSubContent>
              <MenubarItem>PDF</MenubarItem>
              <MenubarItem>PNG</MenubarItem>
              <MenubarItem>SVG</MenubarItem>
            </MenubarSubContent>
          </MenubarSub>
        </MenubarContent>
      </MenubarMenu>
    </Menubar>
  )
}
```

### Checkbox & radio items [#checkbox--radio-items]

Menus support the same stateful items as `DropdownMenu` — `MenubarCheckboxItem` for toggles and a `MenubarRadioGroup` of `MenubarRadioItem`s for a single choice, both grouped under a `MenubarGroupLabel`.

```tsx
'use client'

import * as React from 'react'
import {
  Menubar,
  MenubarMenu,
  MenubarTrigger,
  MenubarContent,
  MenubarItem,
  MenubarGroup,
  MenubarGroupLabel,
  MenubarCheckboxItem,
  MenubarRadioGroup,
  MenubarRadioItem,
  MenubarSeparator,
} from '@appica/ui-react/menubar'

export default function MenubarSelections() {
  const [toolbar, setToolbar] = React.useState(true)
  const [sidebar, setSidebar] = React.useState(false)
  const [theme, setTheme] = React.useState('system')

  return (
    <Menubar aria-label="Editor">
      <MenubarMenu>
        <MenubarTrigger>View</MenubarTrigger>
        <MenubarContent>
          <MenubarGroup>
            <MenubarGroupLabel>Panels</MenubarGroupLabel>
            <MenubarCheckboxItem checked={toolbar} onCheckedChange={setToolbar}>
              Toolbar
            </MenubarCheckboxItem>
            <MenubarCheckboxItem checked={sidebar} onCheckedChange={setSidebar}>
              Sidebar
            </MenubarCheckboxItem>
          </MenubarGroup>
          <MenubarSeparator />
          <MenubarRadioGroup value={theme} onValueChange={setTheme}>
            <MenubarGroupLabel>Theme</MenubarGroupLabel>
            <MenubarRadioItem value="light">Light</MenubarRadioItem>
            <MenubarRadioItem value="dark">Dark</MenubarRadioItem>
            <MenubarRadioItem value="system">System</MenubarRadioItem>
          </MenubarRadioGroup>
        </MenubarContent>
      </MenubarMenu>
      <MenubarMenu>
        <MenubarTrigger>Help</MenubarTrigger>
        <MenubarContent>
          <MenubarItem>Documentation</MenubarItem>
          <MenubarItem>Keyboard shortcuts</MenubarItem>
        </MenubarContent>
      </MenubarMenu>
    </Menubar>
  )
}
```

### Leading icons [#leading-icons]

Put a leading icon on the `data-icon="start"` slot, before the label — it works on both a `MenubarTrigger` and a `MenubarItem`, which reserves space and aligns every row's text. Pair an item with a trailing [`Kbd`](/ui/components/react/kbd) shortcut pushed to the edge with `ms-auto`.

```tsx
import {
  Menubar,
  MenubarMenu,
  MenubarTrigger,
  MenubarContent,
  MenubarItem,
  MenubarSeparator,
} from '@appica/ui-react/menubar'
import { Kbd } from '@appica/ui-react/kbd'
import {
  FileText,
  Pencil,
  Eye,
  FilePlus,
  FolderOpen,
  Download,
  CornerUpLeft,
  CornerUpRight,
  Scissors,
  Copy,
  Clipboard,
  ZoomIn,
  ZoomOut,
  Maximize,
} from '@appica/icons-react'

export default function MenubarIcons() {
  return (
    <Menubar aria-label="Application">
      <MenubarMenu>
        <MenubarTrigger>
          <FileText data-icon="start" />
          File
        </MenubarTrigger>
        <MenubarContent>
          <MenubarItem>
            <FilePlus data-icon="start" />
            New file
            <Kbd size="sm" className="ms-auto">
              ⌘N
            </Kbd>
          </MenubarItem>
          <MenubarItem>
            <FolderOpen data-icon="start" />
            Open…
            <Kbd size="sm" className="ms-auto">
              ⌘O
            </Kbd>
          </MenubarItem>
          <MenubarSeparator />
          <MenubarItem>
            <Download data-icon="start" />
            Save
            <Kbd size="sm" className="ms-auto">
              ⌘S
            </Kbd>
          </MenubarItem>
        </MenubarContent>
      </MenubarMenu>

      <MenubarMenu>
        <MenubarTrigger>
          <Pencil data-icon="start" />
          Edit
        </MenubarTrigger>
        <MenubarContent>
          <MenubarItem>
            <CornerUpLeft data-icon="start" />
            Undo
          </MenubarItem>
          <MenubarItem>
            <CornerUpRight data-icon="start" />
            Redo
          </MenubarItem>
          <MenubarSeparator />
          <MenubarItem>
            <Scissors data-icon="start" />
            Cut
          </MenubarItem>
          <MenubarItem>
            <Copy data-icon="start" />
            Copy
          </MenubarItem>
          <MenubarItem>
            <Clipboard data-icon="start" />
            Paste
          </MenubarItem>
        </MenubarContent>
      </MenubarMenu>

      <MenubarMenu>
        <MenubarTrigger>
          <Eye data-icon="start" />
          View
        </MenubarTrigger>
        <MenubarContent>
          <MenubarItem>
            <ZoomIn data-icon="start" />
            Zoom in
          </MenubarItem>
          <MenubarItem>
            <ZoomOut data-icon="start" />
            Zoom out
          </MenubarItem>
          <MenubarSeparator />
          <MenubarItem>
            <Maximize data-icon="start" />
            Enter full screen
          </MenubarItem>
        </MenubarContent>
      </MenubarMenu>
    </Menubar>
  )
}
```

## RTL [#rtl]

Every Appica UI component supports right-to-left layouts out of the box. Set the `dir` attribute on a container (commonly your `<html>` element) so CSS logical properties resolve correctly, and wrap your tree in `DirectionProvider` so direction-aware behavior — roving focus along the bar, popup placement, and submenu direction — follows the same direction.

```tsx
import { DirectionProvider } from '@appica/ui-react/providers/direction-provider'

export default function RootLayout({ children }) {
  return (
    <html lang="ar" dir="rtl">
      <body>
        <DirectionProvider dir="rtl">{children}</DirectionProvider>
      </body>
    </html>
  )
}
```

The bar lays out from the right, arrow-key focus reverses, and popups anchor and flip accordingly. For setup details and caveats, see the [RTL guide](/ui/docs/react/rtl).

<Callout type="note" title="Scoped RTL needs the direction on the positioner">
  Each menu's popup portals to `<body>`, so its `start`/`end` alignment mirrors from the **document** direction (read from
  CSS, not from `DirectionProvider`) — automatic when `<html dir="rtl">`. If you instead scope RTL to a subtree of an LTR
  page, set it on the positioner so alignment still mirrors: `<MenubarContent positionerProps={{ dir: 'rtl' }}>`. See
  [Floating popups in a scoped RTL region](/ui/docs/react/rtl#floating-popups-in-a-scoped-rtl-region).
</Callout>

<RtlPreview component="menubar" />

## API reference [#api-reference]

`Menubar` wraps [Base UI's Menubar](https://base-ui.com/react/components/menubar) and composes a menu for each entry. Each part forwards every remaining prop to the matching Base UI primitive, so anything it accepts works here — the tables below list the Appica additions and the most common props. See the Base UI docs for the complete API.

### Menubar [#menubar]

The bar. Coordinates the menus and holds the shared styling/orientation; renders a `menubar` element.

| Prop          | <ColMinWidth width="200">Type</ColMinWidth> | Default        | <ColMinWidth width="220">Description</ColMinWidth>                |
| ------------- | ------------------------------------------- | -------------- | ----------------------------------------------------------------- |
| `variant`     | <Code>'pill' \| 'line'</Code>               | `'pill'`       | Trigger appearance — hover/active pill, or an animated underline. |
| `size`        | <Code>'sm' \| 'md' \| 'lg'</Code>           | `'md'`         | Scales the triggers, popups, and items together.                  |
| `orientation` | <Code>'horizontal' \| 'vertical'</Code>     | `'horizontal'` | Lay the bar out as a row or a column.                             |
| `modal`       | `boolean`                                   | `true`         | Trap focus and block outside interaction while a menu is open.    |
| `loopFocus`   | `boolean`                                   | `true`         | Wrap arrow-key focus from the last trigger back to the first.     |
| `disabled`    | `boolean`                                   | `false`        | Disable every menu in the bar.                                    |
| `className`   | `string`                                    | —              | Extra classes on the bar, merged via `tailwind-merge`.            |

### MenubarMenu [#menubarmenu]

Wraps one menu in the bar. Inherits the bar's `size`; forwards the rest to the underlying menu root.

| Prop           | <ColMinWidth width="180">Type</ColMinWidth> | Default | Description                           |
| -------------- | ------------------------------------------- | ------- | ------------------------------------- |
| `open`         | `boolean`                                   | —       | Controlled open state of this menu.   |
| `defaultOpen`  | `boolean`                                   | `false` | Uncontrolled initial open state.      |
| `onOpenChange` | <Code>(open, eventDetails) => void</Code>   | —       | Fires when this menu opens or closes. |

### MenubarTrigger [#menubartrigger]

The top-level label that opens its menu. Inherits the bar's `variant`, `size`, and `orientation`.

| Prop        | <ColMinWidth width="160">Type</ColMinWidth> | Default | Description                                                |
| ----------- | ------------------------------------------- | ------- | ---------------------------------------------------------- |
| `disabled`  | `boolean`                                   | `false` | Disable just this menu.                                    |
| `className` | `string`                                    | —       | Extra classes on the trigger, merged via `tailwind-merge`. |

### MenubarContent [#menubarcontent]

The portalled popup for a menu. In a vertical bar it defaults to `side="inline-end"` / `align="start"`; in a horizontal bar it opens below the trigger. Accepts the shared floating props.

| Prop               | <ColMinWidth width="160">Type</ColMinWidth>         | Default    | Description                                                     |
| ------------------ | --------------------------------------------------- | ---------- | --------------------------------------------------------------- |
| `side`             | <Code>'top' \| 'right' \| 'bottom' \| 'left'</Code> | `'bottom'` | Preferred side to open on.                                      |
| `align`            | <Code>'start' \| 'center' \| 'end'</Code>           | `'start'`  | Alignment along that side.                                      |
| `sideOffset`       | `number`                                            | `6`        | Gap between the trigger and the popup.                          |
| `alignOffset`      | `number`                                            | —          | Shift along the alignment axis.                                 |
| `collisionPadding` | `number`                                            | `5`        | Minimum gap kept from the viewport edge when flipping/shifting. |
| `container`        | <Code>HTMLElement \| ref \| null</Code>             | —          | Portal target — render the popup into a different node.         |
| `keepMounted`      | `boolean`                                           | `false`    | Keep the popup mounted in the DOM while closed.                 |
| `positionerProps`  | `object`                                            | —          | Escape hatch for the positioner element (`style`, `render`, …). |
| `portalProps`      | `object`                                            | —          | Escape hatch for the portal element (`style`, `render`, …).     |
| `className`        | `string`                                            | —          | Extra classes on the popup.                                     |

### MenubarItem [#menubaritem]

One action in a menu.

| Prop           | <ColMinWidth width="180">Type</ColMinWidth> | Default | Description                                                    |
| -------------- | ------------------------------------------- | ------- | -------------------------------------------------------------- |
| `closeOnClick` | `boolean`                                   | `true`  | Close the menu after the item is selected.                     |
| `disabled`     | `boolean`                                   | `false` | Make the item unselectable; skipped by keyboard and typeahead. |
| `onClick`      | <Code>(event) => void</Code>                | —       | Fires when the item is selected (click or Enter/Space).        |
| `className`    | `string`                                    | —       | Extra classes, merged via `tailwind-merge`.                    |

### MenubarCheckboxItem [#menubarcheckboxitem]

A toggleable item with a check indicator. Keeps the menu open on click.

| Prop              | <ColMinWidth width="180">Type</ColMinWidth> | Default | Description                                            |
| ----------------- | ------------------------------------------- | ------- | ------------------------------------------------------ |
| `checked`         | `boolean`                                   | —       | Controlled checked state. Pair with `onCheckedChange`. |
| `defaultChecked`  | `boolean`                                   | `false` | Uncontrolled initial checked state.                    |
| `onCheckedChange` | <Code>(checked) => void</Code>              | —       | Fires when the checked state changes.                  |
| `closeOnClick`    | `boolean`                                   | `false` | Close the menu when toggled.                           |
| `disabled`        | `boolean`                                   | `false` | Make the item unselectable.                            |

### MenubarRadioGroup [#menubarradiogroup]

Wraps a set of mutually exclusive `MenubarRadioItem`s.

| Prop            | <ColMinWidth width="180">Type</ColMinWidth> | Default | Description                                           |
| --------------- | ------------------------------------------- | ------- | ----------------------------------------------------- |
| `value`         | `string`                                    | —       | Controlled selected value. Pair with `onValueChange`. |
| `defaultValue`  | `string`                                    | —       | Uncontrolled initial value.                           |
| `onValueChange` | <Code>(value) => void</Code>                | —       | Fires when the selection changes.                     |

### MenubarRadioItem [#menubarradioitem]

One option in a `MenubarRadioGroup`. Keeps the menu open on click.

| Prop           | Type      | Default | Description                   |
| -------------- | --------- | ------- | ----------------------------- |
| `value`        | `string`  | —       | The value this item selects.  |
| `closeOnClick` | `boolean` | `false` | Close the menu when chosen.   |
| `disabled`     | `boolean` | `false` | Make the option unselectable. |

### MenubarLinkItem [#menubarlinkitem]

An item that renders an `<a>` for navigation. Forwards every native anchor prop (`href`, `target`, `rel`, …).

| Prop        | Type     | Default | Description                                 |
| ----------- | -------- | ------- | ------------------------------------------- |
| `href`      | `string` | —       | Navigation target.                          |
| `className` | `string` | —       | Extra classes, merged via `tailwind-merge`. |

### MenubarGroup [#menubargroup]

Wraps one labelled section of a menu so a `MenubarGroupLabel` can name it.

| Prop        | Type        | Default | Description                                     |
| ----------- | ----------- | ------- | ----------------------------------------------- |
| `children`  | `ReactNode` | —       | A `MenubarGroupLabel` plus the section's items. |
| `className` | `string`    | —       | Extra classes, merged via `tailwind-merge`.     |

### MenubarGroupLabel [#menubargrouplabel]

The visible heading for a `MenubarGroup`. Size-aware; must be rendered inside a `MenubarGroup` (or `MenubarRadioGroup`).

| Prop        | Type        | Default | Description                                 |
| ----------- | ----------- | ------- | ------------------------------------------- |
| `children`  | `ReactNode` | —       | The label text.                             |
| `className` | `string`    | —       | Extra classes, merged via `tailwind-merge`. |

### MenubarSeparator [#menubarseparator]

A thin divider between items or groups.

| Prop        | Type     | Default | Description                                 |
| ----------- | -------- | ------- | ------------------------------------------- |
| `className` | `string` | —       | Extra classes, merged via `tailwind-merge`. |

### MenubarSub [#menubarsub]

Wraps a nested submenu inside a menu.

| Prop          | <ColMinWidth width="180">Type</ColMinWidth> | Default | Description                           |
| ------------- | ------------------------------------------- | ------- | ------------------------------------- |
| `open`        | `boolean`                                   | —       | Controlled open state of the submenu. |
| `defaultOpen` | `boolean`                                   | `false` | Uncontrolled initial open state.      |

### MenubarSubTrigger [#menubarsubtrigger]

The item that opens a submenu; renders a trailing chevron. Submenus open on hover by default.

| Prop          | Type      | Default | Description                                 |
| ------------- | --------- | ------- | ------------------------------------------- |
| `openOnHover` | `boolean` | `true`  | Open the submenu on hover (and on click).   |
| `delay`       | `number`  | `100`   | Hover-open delay in ms.                     |
| `closeDelay`  | `number`  | `0`     | Hover-close delay in ms.                    |
| `className`   | `string`  | —       | Extra classes, merged via `tailwind-merge`. |

### MenubarSubContent [#menubarsubcontent]

The submenu popup. Defaults to opening on the `inline-end` side; otherwise identical to `MenubarContent`.

| Prop        | Type     | Default | Description                         |
| ----------- | -------- | ------- | ----------------------------------- |
| `className` | `string` | —       | Extra classes on the submenu popup. |

## Accessibility [#accessibility]

* The bar has `role="menubar"`; give it an accessible name with `aria-label`. Triggers are `menuitem`s with `aria-haspopup`, and each popup is a `menu`.
* **←/→*&#x2A; (or &#x2A;*↑/↓** when vertical) move focus between triggers; &#x2A;*Enter / Space / ↓** open a menu; **Escape** closes it back to its trigger; typeahead jumps to matching items.
* With a menu open, hovering a sibling trigger switches to its menu without an extra click.
* `disabled` triggers and items are skipped by keyboard navigation.
* Popup enter/exit transitions are skipped when the user prefers reduced motion.