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.

API Reference

ContextMenuContent

ContextMenuItem

ContextMenuLinkItem

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

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.