/// Overlay
ContextMenu
A right-click (or long-press) menu opened at the pointer — the same item vocabulary as DropdownMenu, bound to a surface.
import { ContextMenu } from "@protocore/pds";Basics
ContextMenu.Trigger is the surface; right-clicking (or long-pressing on touch) opens the menu at the pointer. Items support startIcon, endHint, and tone="danger" — same API as DropdownMenu.
Right-click this ledger row
When to use it
A ContextMenu attaches actions to a surface or object — a table row, a canvas node, a file tile — surfaced by the platform's contextual gesture (right-click, long-press). It's a power-user affordance: the same actions should always be reachable another way, because context menus are undiscoverable on their own.
It shares its entire part vocabulary with [DropdownMenu](/overlay/dropdown-menu) — the only difference is the trigger. Choose ContextMenu when the natural gesture is right-clicking the thing itself; choose DropdownMenu when there's a visible button (a "⋯" overflow) to click. Never make a context menu the *only* path to an action, and don't override the browser's native menu on plain text or links where users expect it.
Usage
Do
- Attach it to a concrete object — a row, a node, a tile.
- Mirror every context action in a visible control too (an overflow menu).
- Reuse the DropdownMenu item vocabulary for a consistent feel.
- Keep the list short; context menus are for the object's top actions.
Don't
- Make a context menu the only way to reach an action.
- Override the native menu on ordinary selectable text or links.
- Pack unrelated global commands in — those belong in a menu or command palette.
- Nest deep submenu trees that are hard to reach at the pointer.
Accessibility
| Keys | Action |
|---|---|
| Shift + F10 / Menu key | Opens the context menu from the keyboard on the focused trigger. |
| ↑ / ↓ | Moves focus between items (roving tabindex). |
| → / ← | Opens / closes a submenu. |
| Home / End | Jumps to the first / last item. |
| A–Z | Typeahead to the next matching item. |
| Esc | Closes the menu and returns focus to the trigger. |
- Opens on contextmenu (right-click), long-press on touch, and Shift+F10 / the Menu key.
- Same menu roles as DropdownMenu; focus is trapped while open and restored on close.
- Because it's gesture-triggered and undiscoverable, always provide an equivalent visible control.
- Checkbox and radio items announce their state to assistive tech.
ContextMenu.Content props
| Prop | Type | Default | Description |
|---|---|---|---|
asChild | boolean | — | |
className | string | — | |
style | CSSProperties | — |
ContextMenu.Item props
| Prop | Type | Default | Description |
|---|---|---|---|
asChild | boolean | — | |
className | string | — | |
endHint | ReactNode | — | Optional trailing hint (shortcut, chevron). |
startIcon | ReactNode | — | Optional leading icon slot. |
style | CSSProperties | — | |
tone | enum | neutral | Set `"danger"` to render a destructive item (danger-fg text). |