Context Menu

The context menu opens on right-click and lists actions scoped to the element under the cursor. Use it for row actions in a table, canvas or editor commands, or any desktop-style secondary menu; for a button-triggered menu, use Dropdown Menu instead.

Preview

Installation

npx shadcn@latest add @cubby-ui/context-menu

Usage

import {
  ContextMenu,
  ContextMenuContent,
  ContextMenuItem,
  ContextMenuTrigger,
} from "@/components/ui/cubby-ui/context-menu"

<ContextMenu>
  <ContextMenuTrigger />
  <ContextMenuContent>
    <ContextMenuItem />
  </ContextMenuContent>
</ContextMenu>

Composition

ContextMenu
├── ContextMenuTrigger
└── ContextMenuContent
    ├── ContextMenuLabel
    ├── ContextMenuItem
    ├── ContextMenuLinkItem
    ├── ContextMenuCheckboxItem
    ├── ContextMenuRadioGroup
    │   └── ContextMenuRadioItem
    ├── ContextMenuGroup
    │   ├── ContextMenuGroupLabel
    │   └── ContextMenuItem
    ├── ContextMenuSeparator
    ├── ContextMenuShortcut
    └── ContextMenuSub
        ├── ContextMenuSubTrigger
        └── ContextMenuSubContent

Examples

With Submenus

Nest a ContextMenuSub to open a second menu from a trigger item.

With Separators and Shortcuts

Use ContextMenuSeparator to divide groups and ContextMenuShortcut to show key hints.

With Checkboxes and Radio Groups

Use ContextMenuCheckboxItem for toggles and ContextMenuRadioGroup for single-choice options. Both put their indicator in a reserved column on the right, so labels stay put as items toggle.

With Switch

Set indicator="switch" on ContextMenuCheckboxItem to swap the checkmark for a switch. Visual only: the item keeps its menuitemcheckbox role, the row stays the click target, and the menu stays open on toggle.

API Reference

ContextMenuContent

ContextMenuItem

ContextMenuLinkItem

Menu item that renders as an anchor (<a>) for navigation links. Wraps Base UI's ContextMenu.LinkItem.

ContextMenuCheckboxItem

Toggleable menu item. Wraps Base UI's ContextMenu.CheckboxItem. The indicator sits in a reserved column on the right.

ContextMenuRadioItem

Mutually exclusive menu item. Wraps Base UI's ContextMenu.RadioItem. Uses the same right-aligned checkmark as ContextMenuCheckboxItem.

ContextMenuLabel

ContextMenuGroupLabel

ContextMenuSubTrigger

ContextMenuSubContent

Additional Props

ContextMenu components inherit all props from Base UI Context Menu, including open, defaultOpen, onOpenChange, positioning options, and accessibility props.