Search for a command to run...
A right-click menu attached to any element. Shares the same glass surface, brand-tinted indicators, and item chrome as `DropdownMenu` — different opener (right-click instead of button), same primitive otherwise. Use for power-user shortcuts on items in lists, tables, or canvases.
ContextMenuTrigger wraps the area the user right-clicks. It renders as a <span> by default — give it a class to define the hit area (block + sizing, or just wrap your existing component). Inside the menu, the API is identical to DropdownMenu: Item, Label, Separator, Shortcut, CheckboxItem, RadioItem, Sub / SubTrigger / SubContent.
The API mirrors DropdownMenu exactly — see DropdownMenu for the full prop tables. The only differences are the opener and a few defaults:
ContextMenuTriggerWraps the right-clickable area. Renders as a <span> by default with select-none so the user can press-and-hold without picking up text selection.
| Prop | Type | Default | Description |
|---|---|---|---|
asChild | boolean | false | Render the child element directly (e.g. the table row or canvas surface itself). |
className | string | — | Define the hit area — block, grid place-items-center, dashed borders for demo, etc. |
disabled | boolean | false | Suppress the context menu on this region. |
ContextMenuContentSame glass-overlay panel as DropdownMenuContent. Forwards every Radix ContextMenu.Content prop. There's no side / sideOffset / align here — Radix positions the menu at the pointer coordinates where the right-click happened.
ContextMenuItem / CheckboxItem / RadioItem / Label / Separator / Shortcut / Sub-familySame components, same props, same chrome as the DropdownMenu equivalents. The destructive variant, brand-tinted check indicator, edge-to-edge separator, and mono-font shortcuts all carry over via the shared menu-styles module.
Use ContextMenu for affordances tied to a target — table rows, canvas elements, file grid items. Right-click reveals object-specific commands without taking up button space.
Mirror common system commands in the menu (Copy / Cut / Paste / Delete) with ⌘ X / ⌘ C / ⌘ V
shortcuts. The mono-font hints let power users learn the keyboard without leaving the menu.
Reach for CheckboxItem / RadioItem when items represent state toggles for the target
(Pinned, Visible, Sort by). The brand-tinted check on the right makes the row's flag state
obvious at a glance.
Mark dangerous rows variant="destructive". The red tint + icon color is the only signal
standing between a careful user and a regret.
Attach a ContextMenu to the page background unless you actually have global commands. A menu that opens on any right-click and only shows one or two items reads as broken.
Duplicate a DropdownMenu's items in a ContextMenu without good reason. Mac/Windows users
expect right-click to reveal the same commands as the row's … button — design them once.
Trap a destructive command behind a single click. Pair the destructive item with a confirm
Dialog so muscle-memory right-click → top-item doesn't nuke the user's work.