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
        ├── MenubarLabel
        ├── MenubarItem
        ├── MenubarLinkItem
        ├── MenubarCheckboxItem
        ├── MenubarRadioGroup
        │   └── MenubarRadioItem
        ├── MenubarShortcut   (inside an item)
        ├── MenubarSeparator
        └── MenubarSub
            ├── MenubarSubTrigger
            └── MenubarSubContent

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

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

Prop

Type

Default

MenubarContent

Prop

Type

Default

MenubarSubContent

Prop

Type

Default

MenubarItem

Prop

Type

Default

MenubarLinkItem

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

Prop

Type

Default

MenubarLabel

Prop

Type

Default

MenubarSubTrigger

Prop

Type

Default

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

Menubar

On this page