Menubar

Overview

The Menubar component displays a horizontal bar of menu triggers, each opening a dropdown menu. Built on Base UI Menubar primitives, it supports checkboxes, radio groups, submenus, keyboard navigation, and fully customizable styling.

Usage

import {
  Menubar,
  MenubarMenu,
  MenubarTrigger,
  MenubarContent,
  MenubarItem,
} from "@tilt-legal/cubitt-components/primitives";

<Menubar>
  <MenubarMenu>
    <MenubarTrigger>File</MenubarTrigger>
    <MenubarContent>
      <MenubarItem>New File</MenubarItem>
      <MenubarItem>Open File</MenubarItem>
    </MenubarContent>
  </MenubarMenu>
  <MenubarMenu>
    <MenubarTrigger>Edit</MenubarTrigger>
    <MenubarContent>
      <MenubarItem>Undo</MenubarItem>
      <MenubarItem>Redo</MenubarItem>
    </MenubarContent>
  </MenubarMenu>
</Menubar>

Examples

Basic

A basic menubar with multiple menus.

import {
  Menubar,
  MenubarMenu,
  MenubarTrigger,
  MenubarContent,
  MenubarItem,
  MenubarSeparator,
  MenubarShortcut,
} from "@tilt-legal/cubitt-components/primitives";
import {
  MenubarMenu,
  MenubarTrigger,
  MenubarContent,
  MenubarCheckboxItem,
} from "@tilt-legal/cubitt-components/primitives";
import { Files } from "@tilt-legal/cubitt-components/composites";
import {
  File,
  Folder,
  ArrowClockwise,
  Scissors,
  ClipboardText,
  } from "@tilt-legal/cubitt-icons/ui/outline";

<Menubar>
  <MenubarMenu>
    <MenubarTrigger>File</MenubarTrigger>
    <MenubarContent>
      <MenubarItem>
        <File />
        New File
        <MenubarShortcut>⌘N</MenubarShortcut>
      </MenubarItem>
      <MenubarItem>
        <Folder />
        New Folder
        <MenubarShortcut>⌘⇧N</MenubarShortcut>
      </MenubarItem>
      <MenubarSeparator />
      <MenubarItem>
        Open File
        <MenubarShortcut>⌘O</MenubarShortcut>
      </MenubarItem>
    </MenubarContent>
  </MenubarMenu>
  <MenubarMenu>
    <MenubarTrigger>Edit</MenubarTrigger>
    <MenubarContent>
      <MenubarItem>
        <ArrowClockwise />
        Undo
        <MenubarShortcut>⌘Z</MenubarShortcut>
      </MenubarItem>
      <MenubarItem>
        Redo
        <MenubarShortcut>⌘⇧Z</MenubarShortcut>
      </MenubarItem>
      <MenubarSeparator />
      <MenubarItem>
        <Scissors />
        Cut
        <MenubarShortcut>⌘X</MenubarShortcut>
      </MenubarItem>
      <MenubarItem>
        <Files />
        Copy
        <MenubarShortcut>⌘C</MenubarShortcut>
      </MenubarItem>
    </MenubarContent>
  </MenubarMenu>
</Menubar>

With Checkboxes

Menubar items with checkbox controls.

import { Menubar } from "@tilt-legal/cubitt-components/primitives";
import {
  MenubarMenu,
  MenubarTrigger,
  MenubarContent,
  MenubarRadioGroup,
  MenubarRadioItem,
  MenubarGroup,
  MenubarLabel,
  MenubarSeparator,
} from "@tilt-legal/cubitt-components/primitives";
import {
  useState } from "react";

function Example() {
const [showStatusBar,
  setShowStatusBar] = useState(true);
const [showActivityBar,
  setShowActivityBar] = useState(false);
const [showPanel,
  setShowPanel] = useState(true);

  return (
    <Menubar>
      <MenubarMenu>
        <MenubarTrigger>View</MenubarTrigger>
        <MenubarContent>
          <MenubarCheckboxItem
            checked={showStatusBar}
            onCheckedChange={setShowStatusBar}
          >
            Status Bar
          </MenubarCheckboxItem>
          <MenubarCheckboxItem
            checked={showActivityBar}
            onCheckedChange={setShowActivityBar}
          >
            Activity Bar
          </MenubarCheckboxItem>
          <MenubarCheckboxItem checked={showPanel} onCheckedChange={setShowPanel}>
            Panel
          </MenubarCheckboxItem>
        </MenubarContent>
      </MenubarMenu>
    </Menubar>
  );

}

With Radio Group

Menubar with radio group for mutually exclusive options.

import { Menubar } from "@tilt-legal/cubitt-components/primitives";
import {
  MenubarMenu,
  MenubarTrigger,
  MenubarContent,
  MenubarItem,
  MenubarSeparator,
  MenubarSub,
  MenubarSubTrigger,
  MenubarShortcut,
} from "@tilt-legal/cubitt-components/primitives";
import {
  useState } from "react";

function Example() {
  const [textSize,
  setTextSize] = useState("medium");

  return (
    <Menubar>
      <MenubarMenu>
        <MenubarTrigger>Format</MenubarTrigger>
        <MenubarContent>
          <MenubarGroup>
            <MenubarLabel>Text Size</MenubarLabel>
          </MenubarGroup>
          <MenubarSeparator />
          <MenubarRadioGroup value={textSize} onValueChange={setTextSize}>
            <MenubarRadioItem value="small">Small</MenubarRadioItem>
            <MenubarRadioItem value="medium">Medium</MenubarRadioItem>
            <MenubarRadioItem value="large">Large</MenubarRadioItem>
          </MenubarRadioGroup>
        </MenubarContent>
      </MenubarMenu>
    </Menubar>
  );
}

With Submenu

Menubar with nested submenus.

import { Menubar } from "@tilt-legal/cubitt-components/primitives";
import {
  MenubarMenu,
  MenubarTrigger,
  MenubarContent,
  MenubarItem,
  MenubarSeparator,
  MenubarGroup,
  MenubarLabel,
  MenubarShortcut,
} from "@tilt-legal/cubitt-components/primitives";
import {
  File,
  Folder } from "@tilt-legal/cubitt-icons/ui/outline";

<Menubar>
  <MenubarMenu>
    <MenubarTrigger>File</MenubarTrigger>
    <MenubarContent>
      <MenubarItem>
        <File />
        New File
        <MenubarShortcut>⌘N</MenubarShortcut>
      </MenubarItem>
      <MenubarSub>
        <MenubarSubTrigger>
          <Folder />
          New Folder
        </MenubarSubTrigger>
        <MenubarContent>
          <MenubarItem>Project Folder</MenubarItem>
          <MenubarItem>Component Folder</MenubarItem>
          <MenubarItem>Test Folder</MenubarItem>
        </MenubarContent>
      </MenubarSub>
      <MenubarSeparator />
      <MenubarItem>
        Open
        <MenubarShortcut>⌘O</MenubarShortcut>
      </MenubarItem>
    </MenubarContent>
  </MenubarMenu>
</Menubar>

With Groups

Menubar with grouped items and labels.

import { Menubar } from "@tilt-legal/cubitt-components/primitives";
import {
  MenubarMenu,
  MenubarTrigger,
  MenubarContent,
  MenubarItem,
  MenubarSeparator,
} from "@tilt-legal/cubitt-components/primitives";
import { Files } from "@tilt-legal/cubitt-components/composites";
import {
  ArrowClockwise,
  Scissors,
  ClipboardText,
  } from "@tilt-legal/cubitt-icons/ui/outline";

<Menubar>
  <MenubarMenu>
    <MenubarTrigger>Edit</MenubarTrigger>
    <MenubarContent>
      <MenubarGroup>
        <MenubarLabel>History</MenubarLabel>
      </MenubarGroup>
      <MenubarSeparator />
      <MenubarItem>
        <ArrowClockwise />
        Undo
        <MenubarShortcut>⌘Z</MenubarShortcut>
      </MenubarItem>
      <MenubarItem>
        Redo
        <MenubarShortcut>⌘⇧Z</MenubarShortcut>
      </MenubarItem>
      <MenubarSeparator />
      <MenubarGroup>
        <MenubarLabel>Clipboard</MenubarLabel>
      </MenubarGroup>
      <MenubarSeparator />
      <MenubarItem>
        <Scissors />
        Cut
        <MenubarShortcut>⌘X</MenubarShortcut>
      </MenubarItem>
      <MenubarItem>
        <Files />
        Copy
        <MenubarShortcut>⌘C</MenubarShortcut>
      </MenubarItem>
    </MenubarContent>
  </MenubarMenu>
</Menubar>

With Destructive Action

Menubar with destructive action styling.

import { Menubar } from "@tilt-legal/cubitt-components/primitives";

<Menubar>
  <MenubarMenu>
    <MenubarTrigger>Actions</MenubarTrigger>
    <MenubarContent>
      <MenubarItem>Edit</MenubarItem>
      <MenubarItem>Duplicate</MenubarItem>
      <MenubarItem>Archive</MenubarItem>
      <MenubarSeparator />
      <MenubarItem variant="destructive">Delete</MenubarItem>
    </MenubarContent>
  </MenubarMenu>
</Menubar>

API Reference

Menubar

The root container for the menubar.

Prop	Type	Description
`className`	`string`	Additional CSS classes for the menubar.
`orientation`	`string`	Orientation of the menubar. Defaults to `"horizontal"`.
`loop`	`boolean`	Whether keyboard navigation should loop. Defaults to `true`.

MenubarMenu

A menu within the menubar.

Prop	Type	Description
`open`	`boolean`	Whether the menu is currently open (controlled).
`defaultOpen`	`boolean`	Whether the menu is initially open (uncontrolled). Defaults to `false`.
`onOpenChange`	`(open: boolean, eventDetails) => void`	Callback fired when the open state changes.

MenubarTrigger

The trigger button for a menubar menu.

Prop	Type	Description
`className`	`string`	Additional CSS classes for the trigger.
`disabled`	`boolean`	Whether the trigger is disabled.

MenubarContent

The container for menu items, positioned relative to the trigger.

Prop	Type	Description
`className`	`string`	Additional CSS classes for the content.
`align`	`"start" \| "center" \| "end"`	Alignment relative to the trigger. Defaults to `"start"`.
`side`	`"top" \| "right" \| "bottom" \| "left"`	Which side of the trigger to position. Defaults to `"bottom"`.
`sideOffset`	`number`	Distance in pixels from the trigger. Defaults to `8`.
`alignOffset`	`number`	Offset in pixels along the alignment axis. Defaults to `-4`.

MenubarItem

An individual selectable item in the menubar menu.

Prop	Type	Description
`className`	`string`	Additional CSS classes for the item.
`disabled`	`boolean`	Whether the item is disabled. Defaults to `false`.
`variant`	`"destructive"`	Visual variant for the item. Use `"destructive"` for delete actions.
`inset`	`boolean`	Whether to add left padding for alignment with labeled items.
`closeOnClick`	`boolean`	Whether to close the menu when clicked. Defaults to `true`.
`onClick`	`MouseEventHandler`	Click handler for the item.

MenubarCheckboxItem

A menubar item with a checkbox.

Prop	Type	Description
`className`	`string`	Additional CSS classes for the checkbox item.
`checked`	`boolean`	Whether the checkbox is checked.
`onCheckedChange`	`(checked: boolean) => void`	Callback fired when the checked state changes.
`disabled`	`boolean`	Whether the checkbox item is disabled.

MenubarRadioGroup

A group of radio items where only one can be selected.

Prop	Type	Description
`value`	`string`	The value of the selected radio item.
`onValueChange`	`(value: string) => void`	Callback fired when the selected value changes.

MenubarRadioItem

An individual radio item within a radio group.

Prop	Type	Description
`className`	`string`	Additional CSS classes for the radio item.
`value`	`string`	The value of this radio item. Required.
`disabled`	`boolean`	Whether the radio item is disabled.

MenubarLabel

A label for a section of menubar items.

Important: MenubarLabel must be used within a MenubarGroup component due to Base UI's context requirements.

Prop	Type	Description
`className`	`string`	Additional CSS classes for the label.
`inset`	`boolean`	Whether to add left padding for alignment.

MenubarSeparator

A visual separator between menubar items.

Prop	Type	Description
`className`	`string`	Additional CSS classes for the separator.

MenubarGroup

Groups related menubar items together.

Prop	Type	Description
`className`	`string`	Additional CSS classes for the group.

MenubarSub

The root component for a submenu.

Prop	Type	Description
`open`	`boolean`	Whether the submenu is open (controlled).
`defaultOpen`	`boolean`	Whether the submenu is initially open (uncontrolled).
`onOpenChange`	`(open: boolean) => void`	Callback fired when the open state changes.
`disabled`	`boolean`	Whether the submenu is disabled.

MenubarSubTrigger

The trigger button for a submenu.

Prop	Type	Description
`className`	`string`	Additional CSS classes for the submenu trigger.
`inset`	`boolean`	Whether to add left padding for alignment.
`disabled`	`boolean`	Whether the submenu trigger is disabled.

Menubar

On this page