Menu

Overview

The Menu component displays actions or options in a popup triggered by a button. It is built on Base UI Menu primitives and supports checkboxes, radio groups, submenus, keyboard navigation, and URL-state actions.

Menu content floats at parent + 2 by default. Submenu content stays on the same surface as the parent menu content, and item highlights move one level above the menu surface. Use variant="light" to reset a menu popup to surface-1.

Usage

import { Button } from "@tilt-legal/cubitt-components/button";
import {
  Menu,
  MenuContent,
  MenuItem,
  MenuTrigger,
} from "@tilt-legal/cubitt-components/menu";

<Menu>
  <MenuTrigger render={<Button variant="secondary" />}>Open Menu</MenuTrigger>
  <MenuContent>
    <MenuItem>Profile</MenuItem>
    <MenuItem>Settings</MenuItem>
  </MenuContent>
</Menu>

MenuTrigger uses Base UI's render prop pattern, so it can compose with a Cubitt Button or another compatible trigger component:

<MenuTrigger render={<Button variant="secondary" />}>Open Menu</MenuTrigger>

When using render={<Component />}, the children of MenuTrigger become the children of the rendered component.

Examples

With Labels

import { Button } from "@tilt-legal/cubitt-components/button";
import {
  Menu,
  MenuContent,
  MenuGroup,
  MenuGroupLabel,
  MenuItem,
  MenuSeparator,
  MenuShortcut,
  MenuTrigger,
} from "@tilt-legal/cubitt-components/menu";

<Menu>
  <MenuTrigger render={<Button variant="secondary" />}>Open Menu</MenuTrigger>
  <MenuContent className="w-56">
    <MenuGroup>
      <MenuGroupLabel>My Account</MenuGroupLabel>
    </MenuGroup>
    <MenuSeparator />
    <MenuItem>
      Profile
      <MenuShortcut>Shift Cmd P</MenuShortcut>
    </MenuItem>
    <MenuItem>
      Billing
      <MenuShortcut>Cmd B</MenuShortcut>
    </MenuItem>
  </MenuContent>
</Menu>

Light Content Variant

Use variant="light" when a menu should reset to surface-1 instead of floating two levels above its parent surface. Nested submenu content inherits the reset and stays on the same menu surface.

<Menu>
  <MenuTrigger render={<Button variant="secondary" />}>
    Matter Actions
  </MenuTrigger>
  <MenuContent className="w-56" variant="light">
    <MenuItem>Open matter</MenuItem>
    <MenuItem>Assign team</MenuItem>
    <MenuSubmenuRoot>
      <MenuSubmenuTrigger>Share</MenuSubmenuTrigger>
      <MenuContent>
        <MenuItem>Email link</MenuItem>
        <MenuItem>Message team</MenuItem>
      </MenuContent>
    </MenuSubmenuRoot>
  </MenuContent>
</Menu>

With Checkboxes

"use client";

import { useState } from "react";
import { Button } from "@tilt-legal/cubitt-components/button";
import {
  Menu,
  MenuCheckboxItem,
  MenuContent,
  MenuGroup,
  MenuGroupLabel,
  MenuSeparator,
  MenuTrigger,
} from "@tilt-legal/cubitt-components/menu";

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

  return (
    <Menu>
      <MenuTrigger render={<Button variant="secondary" />}>
        View Options
      </MenuTrigger>
      <MenuContent className="w-56">
        <MenuGroup>
          <MenuGroupLabel>Appearance</MenuGroupLabel>
        </MenuGroup>
        <MenuSeparator />
        <MenuCheckboxItem
          checked={showStatusBar}
          onCheckedChange={setShowStatusBar}
        >
          Status Bar
        </MenuCheckboxItem>
        <MenuCheckboxItem
          checked={showActivityBar}
          onCheckedChange={setShowActivityBar}
        >
          Activity Bar
        </MenuCheckboxItem>
      </MenuContent>
    </Menu>
  );
}

With Radio Group

"use client";

import { useState } from "react";
import { Button } from "@tilt-legal/cubitt-components/button";
import {
  Menu,
  MenuContent,
  MenuGroupLabel,
  MenuRadioGroup,
  MenuRadioItem,
  MenuTrigger,
} from "@tilt-legal/cubitt-components/menu";

export default function Example() {
  const [position, setPosition] = useState("bottom");

  return (
    <Menu>
      <MenuTrigger render={<Button variant="secondary" />}>
        Panel Position
      </MenuTrigger>
      <MenuContent className="w-56">
        <MenuRadioGroup value={position} onValueChange={setPosition}>
          <MenuGroupLabel>Panel Position</MenuGroupLabel>
          <MenuRadioItem value="top">Top</MenuRadioItem>
          <MenuRadioItem value="bottom">Bottom</MenuRadioItem>
          <MenuRadioItem value="right">Right</MenuRadioItem>
        </MenuRadioGroup>
      </MenuContent>
    </Menu>
  );
}

With Submenu

import { Button } from "@tilt-legal/cubitt-components/button";
import {
  Menu,
  MenuContent,
  MenuItem,
  MenuSeparator,
  MenuSubmenuRoot,
  MenuSubmenuTrigger,
  MenuTrigger,
} from "@tilt-legal/cubitt-components/menu";

<Menu>
  <MenuTrigger render={<Button variant="secondary" />}>Open Menu</MenuTrigger>
  <MenuContent className="w-56">
    <MenuItem>Profile</MenuItem>
    <MenuItem>Billing</MenuItem>
    <MenuSeparator />
    <MenuSubmenuRoot>
      <MenuSubmenuTrigger>Invite users</MenuSubmenuTrigger>
      <MenuContent>
        <MenuItem>Email</MenuItem>
        <MenuItem>Message</MenuItem>
      </MenuContent>
    </MenuSubmenuRoot>
  </MenuContent>
</Menu>

With Groups

import { Button } from "@tilt-legal/cubitt-components/button";
import {
  Menu,
  MenuContent,
  MenuGroup,
  MenuGroupLabel,
  MenuItem,
  MenuSeparator,
  MenuShortcut,
  MenuSubmenuRoot,
  MenuSubmenuTrigger,
  MenuTrigger,
} from "@tilt-legal/cubitt-components/menu";

<Menu>
  <MenuTrigger render={<Button variant="secondary" />}>Open Menu</MenuTrigger>
  <MenuContent className="w-56">
    <MenuGroup>
      <MenuGroupLabel>My Account</MenuGroupLabel>
    </MenuGroup>
    <MenuSeparator />
    <MenuGroup>
      <MenuItem>
        Profile
        <MenuShortcut>Shift Cmd P</MenuShortcut>
      </MenuItem>
      <MenuItem>
        Billing
        <MenuShortcut>Cmd B</MenuShortcut>
      </MenuItem>
    </MenuGroup>
    <MenuSeparator />
    <MenuGroup>
      <MenuItem>Team</MenuItem>
      <MenuSubmenuRoot>
        <MenuSubmenuTrigger>Invite users</MenuSubmenuTrigger>
        <MenuContent>
          <MenuItem>Email</MenuItem>
          <MenuItem>Message</MenuItem>
        </MenuContent>
      </MenuSubmenuRoot>
    </MenuGroup>
  </MenuContent>
</Menu>

With Destructive Action

import { Button } from "@tilt-legal/cubitt-components/button";
import {
  Menu,
  MenuContent,
  MenuItem,
  MenuSeparator,
  MenuTrigger,
} from "@tilt-legal/cubitt-components/menu";

<Menu>
  <MenuTrigger render={<Button variant="secondary" />}>Actions</MenuTrigger>
  <MenuContent className="w-56">
    <MenuItem>Edit</MenuItem>
    <MenuItem>Duplicate</MenuItem>
    <MenuItem>Archive</MenuItem>
    <MenuSeparator />
    <MenuItem variant="destructive">Delete</MenuItem>
  </MenuContent>
</Menu>

URL State

Trigger URL state changes by providing paramName and paramSetValue to individual MenuItem elements. This is useful for opening dialogs, sheets, or other components when a menu item is selected.

"use client";

import { Button } from "@tilt-legal/cubitt-components/button";
import {
  Menu,
  MenuContent,
  MenuItem,
  MenuTrigger,
} from "@tilt-legal/cubitt-components/menu";

export default function Example() {
  return (
    <Menu>
      <MenuTrigger render={<Button variant="secondary" />}>Actions</MenuTrigger>
      <MenuContent className="w-48">
        <MenuItem paramName="menu-action" paramSetValue="profile">
          Profile
        </MenuItem>
        <MenuItem paramName="menu-action" paramSetValue="billing">
          Billing
        </MenuItem>
        <MenuItem paramName="menu-action" paramSetValue="logout">
          Log out
        </MenuItem>
      </MenuContent>
    </Menu>
  );
}

API Reference

The root component that manages menu state.

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.
`modal`	`boolean`	Whether the menu is modal. Defaults to `true`.
`disabled`	`boolean`	Whether the menu is disabled. Defaults to `false`.
`openOnHover`	`boolean`	Whether to open the menu on hover. Defaults to `false`.
`delay`	`number`	Delay in milliseconds before opening on hover. Defaults to `100`.
`closeDelay`	`number`	Delay in milliseconds before closing on hover. Defaults to `0`.
`loop`	`boolean`	Whether to loop keyboard focus. Defaults to `true`.
`orientation`	`"horizontal" \| "vertical"`	The visual orientation of the menu. Defaults to `"vertical"`.

MenuTrigger

The trigger that toggles the dropdown menu.

Prop	Type	Description
`className`	`string`	Additional CSS classes for the trigger.
`render`	`ReactElement \| (props) => ReactElement`	Allows composing the trigger with another component. Receives props to spread.
`disabled`	`boolean`	Whether the trigger is disabled. Defaults to `false`.

MenuContent

The popup container for menu items. Default root content floats at parent + 2; submenu content stays on the parent menu surface.

Prop	Type	Default	Description
`variant`	`"default" \| "light"`	`"default"`	Use `"light"` to reset the popup and inherited submenu content to surface-1.
`className`	`string`	—	Additional CSS classes for the content.
`align`	`"start" \| "center" \| "end"`	`"center"`	Alignment relative to the trigger.
`side`	`"top" \| "right" \| "bottom" \| "left"`	`"bottom"`	Which side of the trigger to position.
`sideOffset`	`number`	`4`	Distance in pixels from the trigger.
`alignOffset`	`number`	`0`	Offset in pixels along the alignment axis.

MenuItem

An individual selectable item in the 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.

URL State Props

When provided with paramName, the menu item sets URL parameters when clicked.

Prop	Type	Description
`paramName?`	`string`	Optional URL parameter name to set when the item is selected.
`paramSetValue?`	`string`	Value written to the URL when the item is selected.
`paramThrottle?`	`number`	Throttle URL updates in milliseconds.
`paramDebounce?`	`number`	Debounce URL updates in milliseconds.

MenuCheckboxItem

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

MenuRadioGroup

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.

MenuRadioItem

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.

MenuGroupLabel

A label for a section of menu items.

Use MenuGroupLabel inside MenuGroup for ordinary sections or inside MenuRadioGroup when labelling a radio option set.

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

MenuSeparator

A visual separator between menu items.

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

MenuGroup

Groups related menu items together.

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

MenuSubmenuRoot

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.

MenuSubmenuTrigger

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.

MenuShortcut

A utility component for displaying keyboard shortcuts.

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

Polymorphic Rendering

On this page