Menubar

A horizontal bar of top-level menus, like the File / Edit / View bar in a desktop app. Use it for application-style command surfaces where several menus sit side by side and moving between them keeps the next menu open. For a single menu opened from one button, use Dropdown Menu instead.

Preview

Installation

npx shadcn@latest add @cubby-ui/menubar

Usage

import {
  Menubar,
  MenubarContent,
  MenubarItem,
  MenubarMenu,
  MenubarSeparator,
  MenubarShortcut,
  MenubarSub,
  MenubarSubContent,
  MenubarSubTrigger,
  MenubarTrigger,
} from "@/components/ui/cubby-ui/menubar"

<Menubar>
  <MenubarMenu>
    <MenubarTrigger />
    <MenubarContent>
      <MenubarItem>
        <MenubarShortcut />
      </MenubarItem>
      <MenubarItem />
      <MenubarSeparator />
    </MenubarContent>
  </MenubarMenu>
  <MenubarMenu>
    <MenubarTrigger />
    <MenubarContent>
      <MenubarItem>
        <MenubarShortcut />
      </MenubarItem>
      <MenubarSeparator />
      <MenubarItem />
    </MenubarContent>
  </MenubarMenu>
  <MenubarMenu>
    <MenubarTrigger />
    <MenubarContent>
      <MenubarItem />
      <MenubarSeparator />
      <MenubarItem>
        <MenubarShortcut />
      </MenubarItem>
      <MenubarSub>
        <MenubarSubTrigger />
        <MenubarSubContent>
          <MenubarItem>
            <MenubarShortcut />
          </MenubarItem>
          <MenubarSeparator />
          <MenubarItem />
        </MenubarSubContent>
      </MenubarSub>
    </MenubarContent>
  </MenubarMenu>
</Menubar>

Composition

Menubar
└── MenubarMenu          (one per top-level menu)
    ├── MenubarTrigger
    └── MenubarContent
        ├── MenubarGroup
        │   └── MenubarGroupLabel
        ├── MenubarLabel
        ├── MenubarItem
        ├── MenubarLinkItem
        ├── MenubarCheckboxItem
        ├── MenubarRadioGroup
        │   └── MenubarRadioItem
        ├── MenubarShortcut   (inside an item)
        ├── MenubarSeparator
        └── MenubarSub
            ├── MenubarSubTrigger
            └── MenubarSubContent

Examples

With Checkboxes and Switches

Use MenubarCheckboxItem for toggles and MenubarRadioGroup for single-choice options. Set indicator="switch" on a checkbox item to swap its checkmark for a switch.

API Reference

The Menubar component is built on top of Base UI's Menubar. All Base UI props are supported. The documentation below only covers custom props and modified defaults specific to our implementation.

For the complete Base UI API, see the Base UI Menubar documentation.

Custom Props

Menubar

The bar element itself is a subtle inline toolbar that sits visibly elevated above the page.

MenubarContent

MenubarSubContent

MenubarItem

MenubarLinkItem

Menu item that renders as an anchor (<a>) for navigation links. Wraps Base UI's Menu.LinkItem.

MenubarCheckboxItem

Toggleable menu item. Wraps Base UI's Menu.CheckboxItem. The indicator sits in a reserved column on the right.

MenubarRadioItem

Mutually exclusive menu item. Wraps Base UI's Menu.RadioItem. Uses the same right-aligned checkmark as MenubarCheckboxItem.

MenubarLabel

Standalone label. Renders a plain div, so it can sit anywhere inside MenubarContent.

MenubarGroupLabel

Label for a MenubarGroup. Wraps Base UI's Menu.GroupLabel, which names the group for assistive tech. It must have a MenubarGroup ancestor. Use MenubarLabel for a label that is not attached to a group.

MenubarSubTrigger

Modified Defaults

Our implementation changes the following Base UI prop defaults:

• MenubarTrigger: delay defaults to 0 (Base UI defaults to 600)
• MenubarTrigger: closeDelay defaults to 0
• MenubarContent: align defaults to 'start' (Base UI defaults to 'center')
• MenubarContent: alignOffset defaults to -4
• MenubarContent: sideOffset defaults to 8 (Base UI defaults to 0)
• MenubarSubContent: sideOffset defaults to 8