## Overview [#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 [#usage] ```tsx import { Menubar, MenubarMenu, MenubarTrigger, MenubarContent, MenubarItem, } from "@tilt-legal/cubitt-components/primitives"; ``` ```tsx File New File Open File Edit Undo Redo ``` ## Examples [#examples] ### Basic [#basic] A basic menubar with multiple menus. ```tsx 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"; File New File ⌘N New Folder ⌘⇧N Open File ⌘O Edit Undo ⌘Z Redo ⌘⇧Z Cut ⌘X Copy ⌘C ``` ### With Checkboxes [#with-checkboxes] Menubar items with checkbox controls. ```tsx 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 ( View Status Bar Activity Bar Panel ); } ``` ### With Radio Group [#with-radio-group] Menubar with radio group for mutually exclusive options. ```tsx 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 ( Format Text Size Small Medium Large ); } ``` ### With Submenu [#with-submenu] Menubar with nested submenus. ```tsx 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"; File New File ⌘N New Folder Project Folder Component Folder Test Folder Open ⌘O ``` ### With Groups [#with-groups] Menubar with grouped items and labels. ```tsx 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"; Edit History Undo ⌘Z Redo ⌘⇧Z Clipboard Cut ⌘X Copy ⌘C ``` ### With Destructive Action [#with-destructive-action] Menubar with destructive action styling. ```tsx import { Menubar } from "@tilt-legal/cubitt-components/primitives"; Actions Edit Duplicate Archive Delete ``` ## API Reference [#api-reference] ### Menubar [#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 [#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 [#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 [#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 [#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 [#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 [#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 [#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 [#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 [#menubarseparator] A visual separator between menubar items. | Prop | Type | Description | | ----------- | -------- | ----------------------------------------- | | `className` | `string` | Additional CSS classes for the separator. | ### MenubarGroup [#menubargroup] Groups related menubar items together. | Prop | Type | Description | | ----------- | -------- | ------------------------------------- | | `className` | `string` | Additional CSS classes for the group. | ### MenubarSub [#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 [#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. |