Menubar

Overview

The Menubar component displays a horizontal bar of menu triggers. Each trigger opens a Menu-style popup with checkbox items, radio items, submenus, keyboard navigation, and contextual surface behavior.

The bar itself lands at parent + 2. Menubar popup content stays on that bar surface, submenu content stays on the same parent popup surface, and highlighted items move one level above the popup surface.

Usage

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

<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

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

<Menubar>
  <MenubarMenu>
    <MenubarTrigger>File</MenubarTrigger>
    <MenubarContent>
      <MenubarItem>
        New File
        <MenubarShortcut>Cmd N</MenubarShortcut>
      </MenubarItem>
      <MenubarItem>
        New Folder
        <MenubarShortcut>Cmd Shift N</MenubarShortcut>
      </MenubarItem>
      <MenubarSeparator />
      <MenubarItem>
        Open File
        <MenubarShortcut>Cmd O</MenubarShortcut>
      </MenubarItem>
    </MenubarContent>
  </MenubarMenu>
  <MenubarMenu>
    <MenubarTrigger>Edit</MenubarTrigger>
    <MenubarContent>
      <MenubarItem>
        Undo
        <MenubarShortcut>Cmd Z</MenubarShortcut>
      </MenubarItem>
      <MenubarItem>
        Redo
        <MenubarShortcut>Cmd Shift Z</MenubarShortcut>
      </MenubarItem>
    </MenubarContent>
  </MenubarMenu>
</Menubar>

With Checkboxes

"use client";

import { useState } from "react";
import {
  Menubar,
  MenubarCheckboxItem,
  MenubarContent,
  MenubarMenu,
  MenubarTrigger,
} from "@tilt-legal/cubitt-components/menubar";

export default 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

"use client";

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

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

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

With Submenu

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

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

With Groups

import {
  Menubar,
  MenubarContent,
  MenubarGroup,
  MenubarItem,
  MenubarLabel,
  MenubarMenu,
  MenubarSeparator,
  MenubarShortcut,
  MenubarTrigger,
} from "@tilt-legal/cubitt-components/menubar";

<Menubar>
  <MenubarMenu>
    <MenubarTrigger>Edit</MenubarTrigger>
    <MenubarContent>
      <MenubarGroup>
        <MenubarLabel>History</MenubarLabel>
      </MenubarGroup>
      <MenubarSeparator />
      <MenubarItem>
        Undo
        <MenubarShortcut>Cmd Z</MenubarShortcut>
      </MenubarItem>
      <MenubarItem>
        Redo
        <MenubarShortcut>Cmd Shift Z</MenubarShortcut>
      </MenubarItem>
      <MenubarSeparator />
      <MenubarGroup>
        <MenubarLabel>Clipboard</MenubarLabel>
      </MenubarGroup>
      <MenubarSeparator />
      <MenubarItem>
        Cut
        <MenubarShortcut>Cmd X</MenubarShortcut>
      </MenubarItem>
      <MenubarItem>
        Copy
        <MenubarShortcut>Cmd C</MenubarShortcut>
      </MenubarItem>
      <MenubarItem>
        Paste
        <MenubarShortcut>Cmd V</MenubarShortcut>
      </MenubarItem>
    </MenubarContent>
  </MenubarMenu>
</Menubar>

With Destructive Action

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

<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.

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 item for a menubar menu.

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

MenubarContent

The popup container for menubar menu items. Content stays on the current menubar surface; submenu content stays on the parent popup surface.

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 `4`.
`alignOffset`	`number`	Offset in pixels along the alignment axis. Defaults to `0`.

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 labelled 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.

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 item 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