## Overview [#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 [#usage] ```tsx import { Menubar, MenubarContent, MenubarItem, MenubarMenu, MenubarTrigger, } from "@tilt-legal/cubitt-components/menubar"; ``` ```tsx File New File Open File Edit Undo Redo ``` ## Examples [#examples] ### Basic [#basic] ```tsx import { Menubar, MenubarContent, MenubarItem, MenubarMenu, MenubarSeparator, MenubarShortcut, MenubarTrigger, } from "@tilt-legal/cubitt-components/menubar"; File New File Cmd N New Folder Cmd Shift N Open File Cmd O Edit Undo Cmd Z Redo Cmd Shift Z ``` ### With Checkboxes [#with-checkboxes] ```tsx "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 ( View Status Bar Activity Bar Panel ); } ``` ### With Radio Group [#with-radio-group] ```tsx "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 ( Format Text Size Small Medium Large ); } ``` ### With Submenu [#with-submenu] ```tsx import { Menubar, MenubarContent, MenubarItem, MenubarMenu, MenubarSeparator, MenubarShortcut, MenubarSub, MenubarSubTrigger, MenubarTrigger, } from "@tilt-legal/cubitt-components/menubar"; File New File Cmd N New Folder Project Folder Component Folder Test Folder Open Cmd O ``` ### With Groups [#with-groups] ```tsx import { Menubar, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarSeparator, MenubarShortcut, MenubarTrigger, } from "@tilt-legal/cubitt-components/menubar"; Edit History Undo Cmd Z Redo Cmd Shift Z Clipboard Cut Cmd X Copy Cmd C Paste Cmd V ``` ### With Destructive Action [#with-destructive-action] ```tsx import { Menubar, MenubarContent, MenubarItem, MenubarMenu, MenubarSeparator, MenubarTrigger, } from "@tilt-legal/cubitt-components/menubar"; 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. | ### 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 item 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 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 [#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 [#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. | 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 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. |