# ContextMenu
- **Category:** Overlay (`overlay`)
- **Slug:** `overlay/context-menu`
- **Status:** stable
- **Platforms:** web
- **Import:** `import { ContextMenu } from "@protocore/pds";`
- **Docs:** https://pds.protocore.io/components/overlay/context-menu
> A right-click (or long-press) menu opened at the pointer — the same item vocabulary as DropdownMenu, bound to a surface.
## 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.
## Props
### ContextMenu.Content
| Prop | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `asChild` | `boolean` | no | — | — |
| `className` | `string` | no | — | — |
| `style` | `CSSProperties` | no | — | — |
### ContextMenu.Item
| Prop | Type | Required | Default | Description |
| --- | --- | --- | --- | --- |
| `asChild` | `boolean` | no | — | — |
| `className` | `string` | no | — | — |
| `endHint` | `ReactNode` | no | — | Optional trailing hint (shortcut, chevron). |
| `startIcon` | `ReactNode` | no | — | Optional leading icon slot. |
| `style` | `CSSProperties` | no | — | — |
| `tone` | `enum` | no | `neutral` | Set `"danger"` to render a destructive item (danger-fg text). |
## Examples
### 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.
```tsx
import { ContextMenu, Text } from "@protocore/pds";
import { Copy, Pin, Trash2 } from "lucide-react";
export default function ContextMenuBasics() {
return (
Right-click this ledger row
} endHint="⌘C">
Copy tx id
}>Pin to watchlist
}>
Discard entry
);
}
```
### Toggles & submenus
The full menu vocabulary is available: `Label`, `CheckboxItem`, `Separator`, and a nested `Sub` / `SubTrigger` / `SubContent` with a `RadioGroup` inside.
```tsx
import { useState } from "react";
import { ContextMenu, Text } from "@protocore/pds";
export default function ContextMenuRich() {
const [wrap, setWrap] = useState(true);
const [theme, setTheme] = useState("mono");
return (