Menubar

A visually persistent menu common in desktop applications.

<Menubar>
  <MenubarMenu>
    <MenubarTrigger>File</MenubarTrigger>
    <MenubarContent>
      <MenubarItem>
        New Tab <MenubarShortcut>⌘T</MenubarShortcut>
      </MenubarItem>
      <MenubarItem>
        New Window <MenubarShortcut>⌘N</MenubarShortcut>
      </MenubarItem>
      <MenubarItem disabled>New Incognito Window</MenubarItem>
      <MenubarSeparator />
      <MenubarSub>
        <MenubarSubTrigger>Share</MenubarSubTrigger>
        <MenubarSubContent>
          <MenubarItem>Email link</MenubarItem>
          <MenubarItem>Messages</MenubarItem>
          <MenubarItem>Notes</MenubarItem>
        </MenubarSubContent>
      </MenubarSub>
      <MenubarSeparator />
      <MenubarItem>
        Print... <MenubarShortcut>⌘P</MenubarShortcut>
      </MenubarItem>
    </MenubarContent>
  </MenubarMenu>
  <MenubarMenu>
    <MenubarTrigger>Edit</MenubarTrigger>
    <MenubarContent>...</MenubarContent>
  </MenubarMenu>
  <MenubarMenu>
    <MenubarTrigger>View</MenubarTrigger>
    <MenubarContent>...</MenubarContent>
  </MenubarMenu>
  <MenubarMenu>
    <MenubarTrigger>Profiles</MenubarTrigger>
    <MenubarContent>...</MenubarContent>
  </MenubarMenu>
</Menubar>

Installation

pnpm dlx cubix@latest add menubar --base aria

Usage

Import

import {
  Menubar,
  MenubarContent,
  MenubarItem,
  MenubarMenu,
  MenubarSeparator,
  MenubarShortcut,
  MenubarTrigger,
} from "@/components/cubix/menubar"

Example

<Menubar>
  <MenubarMenu>
    <MenubarTrigger>File</MenubarTrigger>
    <MenubarContent>
      <MenubarItem>
        New Tab <MenubarShortcut>⌘T</MenubarShortcut>
      </MenubarItem>
      <MenubarItem>New Window</MenubarItem>
      <MenubarSeparator />
      <MenubarItem>Share</MenubarItem>
    </MenubarContent>
  </MenubarMenu>
</Menubar>

Composition

Use the following composition to build a Menubar:

Menubar
├── MenubarMenu
│   ├── MenubarTrigger
│   └── MenubarContent
│       ├── MenubarItem
│       ├── MenubarSeparator
│       ├── MenubarCheckboxItem
│       ├── MenubarRadioGroup
│       │   └── MenubarRadioItem
│       └── MenubarSub
│           ├── MenubarSubTrigger
│           └── MenubarSubContent
└── MenubarMenu
    ├── MenubarTrigger
    └── MenubarContent

Basic

<Menubar>
  <MenubarMenu>
    <MenubarTrigger>File</MenubarTrigger>
    <MenubarContent>
      <MenubarItem>
        New Tab <MenubarShortcut>⌘T</MenubarShortcut>
      </MenubarItem>
      <MenubarItem>
        New Window <MenubarShortcut>⌘N</MenubarShortcut>
      </MenubarItem>
      <MenubarItem disabled>New Incognito Window</MenubarItem>
      <MenubarSeparator />
      <MenubarItem>
        Print... <MenubarShortcut>⌘P</MenubarShortcut>
      </MenubarItem>
    </MenubarContent>
  </MenubarMenu>
  <MenubarMenu>
    <MenubarTrigger>Edit</MenubarTrigger>
    <MenubarContent>
      <MenubarItem>
        Undo <MenubarShortcut>⌘Z</MenubarShortcut>
      </MenubarItem>
      <MenubarItem>
        Redo <MenubarShortcut>⇧⌘Z</MenubarShortcut>
      </MenubarItem>
      <MenubarSeparator />
      <MenubarItem>Cut</MenubarItem>
      <MenubarItem>Copy</MenubarItem>
      <MenubarItem>Paste</MenubarItem>
    </MenubarContent>
  </MenubarMenu>
</Menubar>

Submenu

Nest menus with MenubarSub, MenubarSubTrigger, and MenubarSubContent.

<MenubarMenu>
  <MenubarTrigger>File</MenubarTrigger>
  <MenubarContent>
    <MenubarSub>
      <MenubarSubTrigger>Share</MenubarSubTrigger>
      <MenubarSubContent>
        <MenubarItem>Email link</MenubarItem>
        <MenubarItem>Messages</MenubarItem>
        <MenubarItem>Notes</MenubarItem>
      </MenubarSubContent>
    </MenubarSub>
  </MenubarContent>
</MenubarMenu>

Checkboxes

<MenubarMenu>
  <MenubarTrigger>View</MenubarTrigger>
  <MenubarContent className="w-64">
    <MenubarCheckboxItem>Always Show Bookmarks Bar</MenubarCheckboxItem>
    <MenubarCheckboxItem checked>
      Always Show Full URLs
    </MenubarCheckboxItem>
    <MenubarSeparator />
    <MenubarItem inset>
      Reload <MenubarShortcut>⌘R</MenubarShortcut>
    </MenubarItem>
  </MenubarContent>
</MenubarMenu>

Radio

const [user, setUser] = React.useState("benoit")

<MenubarMenu>
  <MenubarTrigger>Profiles</MenubarTrigger>
  <MenubarContent>
    <MenubarRadioGroup value={user} onValueChange={setUser}>
      <MenubarRadioItem value="andy">Andy</MenubarRadioItem>
      <MenubarRadioItem value="benoit">Benoit</MenubarRadioItem>
      <MenubarRadioItem value="luis">Luis</MenubarRadioItem>
    </MenubarRadioGroup>
  </MenubarContent>
</MenubarMenu>

Sides

Use the side prop on MenubarContent to control placement.

<Menubar>
  <MenubarMenu>
    <MenubarTrigger>top</MenubarTrigger>
    <MenubarContent side="top">
      <MenubarItem>New Tab</MenubarItem>
    </MenubarContent>
  </MenubarMenu>
</Menubar>

API Reference

Menubar

Prop	Type	Default	Description
className	string	-	Additional Tailwind classes merged with the component styles (last one wins).
children	React.ReactNode	-	One or more MenubarMenu elements.

MenubarTrigger

Prop	Type	Default	Description
className	string	-	Additional Tailwind classes merged with the component styles (last one wins).
children	React.ReactNode	-	The trigger label shown in the menubar.

MenubarContent

Prop	Type	Default	Description
side	"top" \| "right" \| "bottom" \| "left"	"bottom"	Preferred side of the trigger to render the menu on.
align	"start" \| "center" \| "end"	"start"	Alignment along the opposite axis of side.
sideOffset	number	8	Distance in pixels between the trigger and the menu.
alignOffset	number	-4	Offset in pixels along the alignment axis.
className	string	-	Additional Tailwind classes merged with the component styles (last one wins).

MenubarItem

Prop	Type	Default	Description
inset	boolean	-	Adds left padding to align with items that have indicators.
variant	"default" \| "destructive"	"default"	Visual style of the menu item.
disabled	boolean	-	Disables the menu item.
className	string	-	Additional Tailwind classes merged with the component styles (last one wins).

MenubarCheckboxItem

Prop	Type	Default	Description
checked	boolean	-	Controlled checked state of the checkbox item.
inset	boolean	-	Adds left padding for alignment.
disabled	boolean	-	Disables the checkbox item.
className	string	-	Additional Tailwind classes merged with the component styles (last one wins).

MenubarRadioGroup

Prop	Type	Default	Description
value	string	-	Controlled value of the selected radio item.
defaultValue	string	-	Initial value when uncontrolled.
onValueChange	(value: string) => void	-	Called when the selected value changes.