Menubar

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>

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

MenubarContent

Prop

Type

Default

MenubarItem

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

On this page