# Menubar

A horizontal bar of menus, like a desktop application's menu bar.

Menubar is an open-source component from suiss/ui for React. The @esuiss/ui CLI copies its source into your project, so you own the code.

Source: https://ui.suiss.app/docs/components/menubar

**React**

**Example**

```tsx
import {
  ClipboardTextIcon,
  CopyIcon,
  ScissorsIcon,
  TrashIcon,
} from "@phosphor-icons/react"
import {
  Menubar,
  MenubarCheckboxItem,
  MenubarContent,
  MenubarGroup,
  MenubarItem,
  MenubarLabel,
  MenubarMenu,
  MenubarRadioGroup,
  MenubarRadioItem,
  MenubarSeparator,
  MenubarShortcut,
  MenubarSub,
  MenubarSubContent,
  MenubarSubTrigger,
  MenubarTrigger,
} from "@/components/ui/menubar"

function MenubarExample({ fileOpen = false }: { fileOpen?: boolean }) {
  return (
    <>
      <MenubarMenu defaultOpen={fileOpen}>
        <MenubarTrigger>File</MenubarTrigger>
        <MenubarContent>
          <MenubarGroup>
            <MenubarItem>
              New tab
              <MenubarShortcut mod>T</MenubarShortcut>
            </MenubarItem>
            <MenubarItem>
              New window
              <MenubarShortcut mod>N</MenubarShortcut>
            </MenubarItem>
            <MenubarItem disabled>New private window</MenubarItem>
          </MenubarGroup>
          <MenubarSeparator />
          <MenubarSub>
            <MenubarSubTrigger>Share</MenubarSubTrigger>
            <MenubarSubContent>
              <MenubarItem>Email link</MenubarItem>
              <MenubarItem>Messages</MenubarItem>
              <MenubarItem>Notes</MenubarItem>
            </MenubarSubContent>
          </MenubarSub>
          <MenubarSeparator />
          <MenubarItem>
            Print
            <MenubarShortcut mod>P</MenubarShortcut>
          </MenubarItem>
        </MenubarContent>
      </MenubarMenu>
      <MenubarMenu>
        <MenubarTrigger>Edit</MenubarTrigger>
        <MenubarContent>
          <MenubarGroup>
            <MenubarItem>
              <ScissorsIcon />
              Cut
              <MenubarShortcut mod>X</MenubarShortcut>
            </MenubarItem>
            <MenubarItem>
              <CopyIcon />
              Copy
              <MenubarShortcut mod>C</MenubarShortcut>
            </MenubarItem>
            <MenubarItem>
              <ClipboardTextIcon />
              Paste
              <MenubarShortcut mod>V</MenubarShortcut>
            </MenubarItem>
          </MenubarGroup>
          <MenubarSeparator />
          <MenubarItem variant="destructive">
            <TrashIcon />
            Delete
          </MenubarItem>
        </MenubarContent>
      </MenubarMenu>
      <MenubarMenu>
        <MenubarTrigger>View</MenubarTrigger>
        <MenubarContent>
          <MenubarGroup>
            <MenubarCheckboxItem defaultChecked>
              Show bookmarks bar
            </MenubarCheckboxItem>
            <MenubarCheckboxItem>Show full URLs</MenubarCheckboxItem>
          </MenubarGroup>
          <MenubarSeparator />
          <MenubarItem inset>Reload</MenubarItem>
          <MenubarItem inset>Toggle full screen</MenubarItem>
        </MenubarContent>
      </MenubarMenu>
      <MenubarMenu>
        <MenubarTrigger>Profiles</MenubarTrigger>
        <MenubarContent>
          <MenubarGroup>
            <MenubarLabel>Switch profile</MenubarLabel>
            <MenubarRadioGroup defaultValue="alex">
              <MenubarRadioItem value="alex">Alex</MenubarRadioItem>
              <MenubarRadioItem value="sam">Sam</MenubarRadioItem>
              <MenubarRadioItem value="taylor">Taylor</MenubarRadioItem>
            </MenubarRadioGroup>
          </MenubarGroup>
          <MenubarSeparator />
          <MenubarItem inset>Manage profiles</MenubarItem>
        </MenubarContent>
      </MenubarMenu>
    </>
  )
}

export default function MenubarDemo() {
  return (
    <div className="min-h-96">
      <Menubar>
        <MenubarExample />
      </Menubar>
    </div>
  )
}
```

`Menubar` wraps the menubar primitive of the chosen base and groups several menus into one keyboard-navigable bar. Each `MenubarMenu` holds a `MenubarTrigger` and a `MenubarContent` popup. Inside the content, compose `MenubarItem`, `MenubarCheckboxItem`, `MenubarRadioGroup` with `MenubarRadioItem`, `MenubarLabel`, `MenubarGroup`, `MenubarSeparator`, `MenubarShortcut`, and nested submenus built from `MenubarSub`, `MenubarSubTrigger` and `MenubarSubContent`.

Most parts reuse the Dropdown Menu components with menubar styling. Use `Menubar` for persistent, app-level command menus; use Dropdown Menu for a single menu opened from one button.

## Installation

### CLI

```bash title="Terminal"
npx shadcn@latest add @esuiss/menubar
```

Works in any project with a `components.json`. See [Installation](https://ui.suiss.app/docs/installation#add-components) for the one-line registry setup. Or use the suiss/ui CLI:

```bash title="Terminal"
npx @esuiss/ui@latest add menubar
```

### Manual

1. Install the dependencies and add the [`cn` helper](https://ui.suiss.app/docs/installation#the-cn-helper):

```bash title="Terminal"
npm install @base-ui/react @phosphor-icons/react
```

2. Add the pieces it builds on: [Dropdown Menu](https://ui.suiss.app/docs/components/dropdown-menu).

3. Copy the source into `components/ui/menubar.tsx`:

```tsx title="components/ui/menubar.tsx"
"use client"

import { Menu as MenuPrimitive } from "@base-ui/react/menu"
import { Menubar as MenubarPrimitive } from "@base-ui/react/menubar"
import { CheckIcon } from "@phosphor-icons/react"
import type * as React from "react"
import {
  DropdownMenu,
  DropdownMenuContent,
  DropdownMenuGroup,
  DropdownMenuItem,
  DropdownMenuLabel,
  DropdownMenuPortal,
  DropdownMenuRadioGroup,
  DropdownMenuSeparator,
  DropdownMenuShortcut,
  DropdownMenuSub,
  DropdownMenuSubContent,
  DropdownMenuSubTrigger,
  DropdownMenuTrigger,
} from "@/components/ui/dropdown-menu"
import { cn } from "@/lib/utils"

function Menubar({ className, ...props }: MenubarPrimitive.Props) {
  return (
    <MenubarPrimitive
      data-slot="menubar"
      className={cn("flex h-9 items-center rounded-md border p-1", className)}
      {...props}
    />
  )
}

function MenubarMenu({ ...props }: React.ComponentProps<typeof DropdownMenu>) {
  return <DropdownMenu data-slot="menubar-menu" {...props} />
}

function MenubarGroup({
  ...props
}: React.ComponentProps<typeof DropdownMenuGroup>) {
  return <DropdownMenuGroup data-slot="menubar-group" {...props} />
}

function MenubarPortal({
  ...props
}: React.ComponentProps<typeof DropdownMenuPortal>) {
  return <DropdownMenuPortal data-slot="menubar-portal" {...props} />
}

function MenubarTrigger({
  className,
  ...props
}: React.ComponentProps<typeof DropdownMenuTrigger>) {
  return (
    <DropdownMenuTrigger
      data-slot="menubar-trigger"
      className={cn(
        "flex items-center rounded-sm px-2 py-0.75 text-sm outline-hidden select-none hover:bg-accent focus-visible:ring-3 focus-visible:ring-ring/50 aria-expanded:bg-accent hover:text-accent-foreground",
        className
      )}
      {...props}
    />
  )
}

function MenubarContent({
  className,
  align = "start",
  alignOffset = -4,
  sideOffset = 8,
  ...props
}: React.ComponentProps<typeof DropdownMenuContent>) {
  return (
    <DropdownMenuContent
      data-slot="menubar-content"
      align={align}
      alignOffset={alignOffset}
      sideOffset={sideOffset}
      className={cn(
        "cn-menu-target cn-menu-translucent min-w-48 rounded-xl bg-popover p-1.5 text-popover-foreground shadow-lg ring-1 ring-foreground/5 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-start-2 data-[side=inline-start]:slide-in-from-end-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 dark:ring-foreground/10 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-[instant=group]:animate-none",
        className
      )}
      {...props}
    />
  )
}

function MenubarItem({
  className,
  inset,
  variant = "default",
  ...props
}: React.ComponentProps<typeof DropdownMenuItem>) {
  return (
    <DropdownMenuItem
      data-slot="menubar-item"
      data-inset={inset ? "" : undefined}
      data-variant={variant}
      className={cn(
        "group/menubar-item gap-2.5 rounded-md px-3 py-2 text-base focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:ps-9.5 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive [&_svg:not([class*='size-'])]:size-4 data-[variant=destructive]:*:[svg]:text-destructive! data-disabled:opacity-50",
        className
      )}
      {...props}
    />
  )
}

function MenubarCheckboxItem({
  className,
  children,
  checked,
  inset,
  ...props
}: MenuPrimitive.CheckboxItem.Props & {
  inset?: boolean
}) {
  return (
    <MenuPrimitive.CheckboxItem
      data-slot="menubar-checkbox-item"
      data-inset={inset ? "" : undefined}
      className={cn(
        "relative flex cursor-default items-center gap-2.5 rounded-md py-2 pe-3 ps-9.5 text-base outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:ps-9.5 data-disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 data-disabled:opacity-50",
        className
      )}
      checked={checked}
      {...props}
    >
      <span className="pointer-events-none absolute inset-s-3 flex size-4 items-center justify-center [&_svg:not([class*='size-'])]:size-4">
        <MenuPrimitive.CheckboxItemIndicator>
          <CheckIcon />
        </MenuPrimitive.CheckboxItemIndicator>
      </span>
      {children}
    </MenuPrimitive.CheckboxItem>
  )
}

function MenubarRadioGroup({
  ...props
}: React.ComponentProps<typeof DropdownMenuRadioGroup>) {
  return <DropdownMenuRadioGroup data-slot="menubar-radio-group" {...props} />
}

function MenubarRadioItem({
  className,
  children,
  inset,
  ...props
}: MenuPrimitive.RadioItem.Props & {
  inset?: boolean
}) {
  return (
    <MenuPrimitive.RadioItem
      data-slot="menubar-radio-item"
      data-inset={inset ? "" : undefined}
      className={cn(
        "relative flex cursor-default items-center gap-2.5 rounded-md py-2 pe-3 ps-9.5 text-base outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:ps-9.5 data-disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-disabled:opacity-50",
        className
      )}
      {...props}
    >
      <span className="pointer-events-none absolute inset-s-3 flex size-4 items-center justify-center [&_svg:not([class*='size-'])]:size-4">
        <MenuPrimitive.RadioItemIndicator>
          <CheckIcon />
        </MenuPrimitive.RadioItemIndicator>
      </span>
      {children}
    </MenuPrimitive.RadioItem>
  )
}

function MenubarLabel({
  className,
  inset,
  ...props
}: React.ComponentProps<typeof DropdownMenuLabel> & {
  inset?: boolean
}) {
  return (
    <DropdownMenuLabel
      data-slot="menubar-label"
      data-inset={inset ? "" : undefined}
      className={cn(
        "px-3.5 py-2.5 text-xs text-muted-foreground data-inset:ps-9.5",
        className
      )}
      {...props}
    />
  )
}

function MenubarSeparator({
  className,
  ...props
}: React.ComponentProps<typeof DropdownMenuSeparator>) {
  return (
    <DropdownMenuSeparator
      data-slot="menubar-separator"
      className={cn("-mx-1 my-1 h-px bg-border/50", className)}
      {...props}
    />
  )
}

function MenubarShortcut({
  className,
  ...props
}: React.ComponentProps<typeof DropdownMenuShortcut>) {
  return (
    <DropdownMenuShortcut
      data-slot="menubar-shortcut"
      className={cn(
        "max-md:hidden ms-auto text-xs text-muted-foreground group-focus/menubar-item:text-foreground",
        className
      )}
      {...props}
    />
  )
}

function MenubarSub({
  ...props
}: React.ComponentProps<typeof DropdownMenuSub>) {
  return <DropdownMenuSub data-slot="menubar-sub" {...props} />
}

function MenubarSubTrigger({
  className,
  inset,
  ...props
}: React.ComponentProps<typeof DropdownMenuSubTrigger> & {
  inset?: boolean
}) {
  return (
    <DropdownMenuSubTrigger
      data-slot="menubar-sub-trigger"
      data-inset={inset ? "" : undefined}
      className={cn(
        "gap-2 rounded-md px-3 py-2 text-base focus:bg-accent focus:text-accent-foreground data-inset:ps-9.5 data-popup-open:bg-accent data-popup-open:text-accent-foreground [&_svg:not([class*='size-'])]:size-4",
        className
      )}
      {...props}
    />
  )
}

function MenubarSubContent({
  className,
  ...props
}: React.ComponentProps<typeof DropdownMenuSubContent>) {
  return (
    <DropdownMenuSubContent
      data-slot="menubar-sub-content"
      className={cn(
        "cn-menu-target cn-menu-translucent min-w-32 rounded-xl bg-popover p-1.5 text-popover-foreground shadow-lg ring-1 ring-foreground/5 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 dark:ring-foreground/10 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95",
        className
      )}
      {...props}
    />
  )
}

export {
  Menubar,
  MenubarCheckboxItem,
  MenubarContent,
  MenubarGroup,
  MenubarItem,
  MenubarLabel,
  MenubarMenu,
  MenubarPortal,
  MenubarRadioGroup,
  MenubarRadioItem,
  MenubarSeparator,
  MenubarShortcut,
  MenubarSub,
  MenubarSubContent,
  MenubarSubTrigger,
  MenubarTrigger,
}
```

4. Update the import paths to match your project.

## Usage

```tsx
import { Menubar, MenubarMenu, MenubarGroup, MenubarPortal, MenubarTrigger, MenubarContent, MenubarItem, MenubarCheckboxItem, MenubarRadioGroup, MenubarRadioItem, MenubarLabel, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubTrigger, MenubarSubContent } from "@/components/ui/menubar"
```

```tsx
<div className="min-h-96">
  <Menubar>
    <MenubarExample />
  </Menubar>
</div>
```

Each `MenubarMenu` accepts the menu root props, such as `open`, `defaultOpen` and `onOpenChange`. `MenubarItem` also accepts `variant="destructive"` and `inset`. Checkbox items use `checked`/`defaultChecked`, and radio groups use `value`/`defaultValue`. Pass `disabled` on `Menubar` to disable the whole bar, or on an individual item.

`MenubarContent` defaults to `align="start"`, `alignOffset={-4}` and `sideOffset={8}`. `MenubarShortcut` accepts `mod` to prepend the platform modifier key.

## Examples

### By default

The File menu opened on first render with `defaultOpen`, including a Share submenu.

**Example**

```tsx
import {
  ClipboardTextIcon,
  CopyIcon,
  ScissorsIcon,
  TrashIcon,
} from "@phosphor-icons/react"
import {
  Menubar,
  MenubarCheckboxItem,
  MenubarContent,
  MenubarGroup,
  MenubarItem,
  MenubarLabel,
  MenubarMenu,
  MenubarRadioGroup,
  MenubarRadioItem,
  MenubarSeparator,
  MenubarShortcut,
  MenubarSub,
  MenubarSubContent,
  MenubarSubTrigger,
  MenubarTrigger,
} from "@/components/ui/menubar"

function MenubarExample({ fileOpen = false }: { fileOpen?: boolean }) {
  return (
    <>
      <MenubarMenu defaultOpen={fileOpen}>
        <MenubarTrigger>File</MenubarTrigger>
        <MenubarContent>
          <MenubarGroup>
            <MenubarItem>
              New tab
              <MenubarShortcut mod>T</MenubarShortcut>
            </MenubarItem>
            <MenubarItem>
              New window
              <MenubarShortcut mod>N</MenubarShortcut>
            </MenubarItem>
            <MenubarItem disabled>New private window</MenubarItem>
          </MenubarGroup>
          <MenubarSeparator />
          <MenubarSub>
            <MenubarSubTrigger>Share</MenubarSubTrigger>
            <MenubarSubContent>
              <MenubarItem>Email link</MenubarItem>
              <MenubarItem>Messages</MenubarItem>
              <MenubarItem>Notes</MenubarItem>
            </MenubarSubContent>
          </MenubarSub>
          <MenubarSeparator />
          <MenubarItem>
            Print
            <MenubarShortcut mod>P</MenubarShortcut>
          </MenubarItem>
        </MenubarContent>
      </MenubarMenu>
      <MenubarMenu>
        <MenubarTrigger>Edit</MenubarTrigger>
        <MenubarContent>
          <MenubarGroup>
            <MenubarItem>
              <ScissorsIcon />
              Cut
              <MenubarShortcut mod>X</MenubarShortcut>
            </MenubarItem>
            <MenubarItem>
              <CopyIcon />
              Copy
              <MenubarShortcut mod>C</MenubarShortcut>
            </MenubarItem>
            <MenubarItem>
              <ClipboardTextIcon />
              Paste
              <MenubarShortcut mod>V</MenubarShortcut>
            </MenubarItem>
          </MenubarGroup>
          <MenubarSeparator />
          <MenubarItem variant="destructive">
            <TrashIcon />
            Delete
          </MenubarItem>
        </MenubarContent>
      </MenubarMenu>
      <MenubarMenu>
        <MenubarTrigger>View</MenubarTrigger>
        <MenubarContent>
          <MenubarGroup>
            <MenubarCheckboxItem defaultChecked>
              Show bookmarks bar
            </MenubarCheckboxItem>
            <MenubarCheckboxItem>Show full URLs</MenubarCheckboxItem>
          </MenubarGroup>
          <MenubarSeparator />
          <MenubarItem inset>Reload</MenubarItem>
          <MenubarItem inset>Toggle full screen</MenubarItem>
        </MenubarContent>
      </MenubarMenu>
      <MenubarMenu>
        <MenubarTrigger>Profiles</MenubarTrigger>
        <MenubarContent>
          <MenubarGroup>
            <MenubarLabel>Switch profile</MenubarLabel>
            <MenubarRadioGroup defaultValue="alex">
              <MenubarRadioItem value="alex">Alex</MenubarRadioItem>
              <MenubarRadioItem value="sam">Sam</MenubarRadioItem>
              <MenubarRadioItem value="taylor">Taylor</MenubarRadioItem>
            </MenubarRadioGroup>
          </MenubarGroup>
          <MenubarSeparator />
          <MenubarItem inset>Manage profiles</MenubarItem>
        </MenubarContent>
      </MenubarMenu>
    </>
  )
}

export default function MenubarOpenByDefault() {
  return (
    <div className="min-h-96">
      <Menubar>
        <MenubarExample fileOpen />
      </Menubar>
    </div>
  )
}
```

### Disabled

A menubar with `disabled` set, so none of its menus open.

**Example**

```tsx
import {
  ClipboardTextIcon,
  CopyIcon,
  ScissorsIcon,
  TrashIcon,
} from "@phosphor-icons/react"
import {
  Menubar,
  MenubarCheckboxItem,
  MenubarContent,
  MenubarGroup,
  MenubarItem,
  MenubarLabel,
  MenubarMenu,
  MenubarRadioGroup,
  MenubarRadioItem,
  MenubarSeparator,
  MenubarShortcut,
  MenubarSub,
  MenubarSubContent,
  MenubarSubTrigger,
  MenubarTrigger,
} from "@/components/ui/menubar"

function MenubarExample({ fileOpen = false }: { fileOpen?: boolean }) {
  return (
    <>
      <MenubarMenu defaultOpen={fileOpen}>
        <MenubarTrigger>File</MenubarTrigger>
        <MenubarContent>
          <MenubarGroup>
            <MenubarItem>
              New tab
              <MenubarShortcut mod>T</MenubarShortcut>
            </MenubarItem>
            <MenubarItem>
              New window
              <MenubarShortcut mod>N</MenubarShortcut>
            </MenubarItem>
            <MenubarItem disabled>New private window</MenubarItem>
          </MenubarGroup>
          <MenubarSeparator />
          <MenubarSub>
            <MenubarSubTrigger>Share</MenubarSubTrigger>
            <MenubarSubContent>
              <MenubarItem>Email link</MenubarItem>
              <MenubarItem>Messages</MenubarItem>
              <MenubarItem>Notes</MenubarItem>
            </MenubarSubContent>
          </MenubarSub>
          <MenubarSeparator />
          <MenubarItem>
            Print
            <MenubarShortcut mod>P</MenubarShortcut>
          </MenubarItem>
        </MenubarContent>
      </MenubarMenu>
      <MenubarMenu>
        <MenubarTrigger>Edit</MenubarTrigger>
        <MenubarContent>
          <MenubarGroup>
            <MenubarItem>
              <ScissorsIcon />
              Cut
              <MenubarShortcut mod>X</MenubarShortcut>
            </MenubarItem>
            <MenubarItem>
              <CopyIcon />
              Copy
              <MenubarShortcut mod>C</MenubarShortcut>
            </MenubarItem>
            <MenubarItem>
              <ClipboardTextIcon />
              Paste
              <MenubarShortcut mod>V</MenubarShortcut>
            </MenubarItem>
          </MenubarGroup>
          <MenubarSeparator />
          <MenubarItem variant="destructive">
            <TrashIcon />
            Delete
          </MenubarItem>
        </MenubarContent>
      </MenubarMenu>
      <MenubarMenu>
        <MenubarTrigger>View</MenubarTrigger>
        <MenubarContent>
          <MenubarGroup>
            <MenubarCheckboxItem defaultChecked>
              Show bookmarks bar
            </MenubarCheckboxItem>
            <MenubarCheckboxItem>Show full URLs</MenubarCheckboxItem>
          </MenubarGroup>
          <MenubarSeparator />
          <MenubarItem inset>Reload</MenubarItem>
          <MenubarItem inset>Toggle full screen</MenubarItem>
        </MenubarContent>
      </MenubarMenu>
      <MenubarMenu>
        <MenubarTrigger>Profiles</MenubarTrigger>
        <MenubarContent>
          <MenubarGroup>
            <MenubarLabel>Switch profile</MenubarLabel>
            <MenubarRadioGroup defaultValue="alex">
              <MenubarRadioItem value="alex">Alex</MenubarRadioItem>
              <MenubarRadioItem value="sam">Sam</MenubarRadioItem>
              <MenubarRadioItem value="taylor">Taylor</MenubarRadioItem>
            </MenubarRadioGroup>
          </MenubarGroup>
          <MenubarSeparator />
          <MenubarItem inset>Manage profiles</MenubarItem>
        </MenubarContent>
      </MenubarMenu>
    </>
  )
}

export default function MenubarDisabled() {
  return (
    <div className="min-h-96">
      <Menubar disabled>
        <MenubarExample />
      </Menubar>
    </div>
  )
}
```

## API Reference

### Menubar

The bar that contains the menus and manages keyboard navigation between them.

Also accepts the props of the primitive part it wraps.

### MenubarMenu

Groups one trigger with its popup and holds that menu's open state.

Also accepts the props of `React.ComponentProps<typeof DropdownMenu>`.

### MenubarGroup

Groups related items inside a menu.

Also accepts the props of `React.ComponentProps<typeof DropdownMenuGroup>`.

### MenubarPortal

Renders menu content into a portal outside the bar.

Also accepts the props of `React.ComponentProps<typeof DropdownMenuPortal>`.

### MenubarTrigger

The button in the bar that opens its menu.

Also accepts the props of `React.ComponentProps<typeof DropdownMenuTrigger>`.

### MenubarContent

The positioned popup that holds a menu's items.

Also accepts the props of `React.ComponentProps<typeof DropdownMenuContent>`.

### MenubarItem

A single command in a menu.

Also accepts the props of `React.ComponentProps<typeof DropdownMenuItem>`.

### MenubarCheckboxItem

An item that toggles on and off, with a leading check indicator.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `inset` | `boolean` | - | Sets `data-inset` on the item for inset alignment. |

Also accepts the props of the primitive part it wraps.

### MenubarRadioGroup

Groups radio items so only one can be selected.

Also accepts the props of `React.ComponentProps<typeof DropdownMenuRadioGroup>`.

### MenubarRadioItem

One option in a radio group, with a leading check indicator when selected.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `inset` | `boolean` | - | Sets `data-inset` on the item for inset alignment. |

Also accepts the props of the primitive part it wraps.

### MenubarLabel

A non-interactive heading for a section of items.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `inset` | `boolean` | - | Indents the label to align with items that show a leading icon or indicator. |

Also accepts the props of `React.ComponentProps<typeof DropdownMenuLabel>`.

### MenubarSeparator

A thin divider between groups of items.

Also accepts the props of `React.ComponentProps<typeof DropdownMenuSeparator>`.

### MenubarShortcut

A trailing keyboard shortcut hint inside an item.

Also accepts the props of `React.ComponentProps<typeof DropdownMenuShortcut>`.

### MenubarSub

The root of a nested submenu.

Also accepts the props of `React.ComponentProps<typeof DropdownMenuSub>`.

### MenubarSubTrigger

The item that opens a submenu.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `inset` | `boolean` | - | Indents the trigger to align with items that show a leading icon or indicator. |

Also accepts the props of `React.ComponentProps<typeof DropdownMenuSubTrigger>`.

### MenubarSubContent

The popup that holds a submenu's items.

Also accepts the props of `React.ComponentProps<typeof DropdownMenuSubContent>`.

## Accessibility

- The bar has the `menubar` role and each trigger has the `menuitem` role, with `aria-expanded` reflecting its menu's state.
- Popups use the `menu` role; items use `menuitem`, `menuitemcheckbox` or `menuitemradio`, with `aria-checked` on checkbox and radio items.
- While a menu is open, ArrowLeft and ArrowRight move to the adjacent menu. ArrowRight on a submenu trigger opens the submenu.
- Escape closes the open menu and returns focus to its trigger.
- Disabled items expose `aria-disabled="true"`.

## Notes

- Styling hooks: each part sets a `data-slot` such as `menubar`, `menubar-trigger`, `menubar-content`, `menubar-item` and `menubar-sub-trigger`. Items expose `data-variant` and `data-inset`.
- Checkbox and radio items always reserve leading space for their indicator.
- `MenubarShortcut` is hidden below the `md` breakpoint.
- Uses the `popover`, `accent`, `destructive` and `border` colors.