# Context Menu

> Right-click menus for power operations.

Import from `@aspyn-io/kit`. Scaffold source: `npx shadcn@latest add https://design.aspyn.io/r/context-menu.json`

## Install

```tsx
import {
  ContextMenu,
  ContextMenuTrigger,
  ContextMenuContent,
  ContextMenuItem,
  ContextMenuSeparator,
} from "@aspyn-io/kit";
```

### Record operations (right-click)

Right-click a record for bulk operations.

```tsx
<ContextMenu>
  <ContextMenuTrigger className="…drop zone…">Right-click me</ContextMenuTrigger>
  <ContextMenuContent>
    <ContextMenuLabel>inv_2026_08_25A</ContextMenuLabel>
    <ContextMenuSeparator />
    <ContextMenuItem>Open<ContextMenuShortcut>⌘O</ContextMenuShortcut></ContextMenuItem>
    <ContextMenuItem>Lock record</ContextMenuItem>
    <ContextMenuSub>
      <ContextMenuSubTrigger>Reassign to…</ContextMenuSubTrigger>
      <ContextMenuSubContent>
        <ContextMenuItem>Eric Gray</ContextMenuItem>
        <ContextMenuItem>Harun Omar</ContextMenuItem>
      </ContextMenuSubContent>
    </ContextMenuSub>
    <ContextMenuSeparator />
    <ContextMenuItem className="text-destructive">Delete record</ContextMenuItem>
  </ContextMenuContent>
</ContextMenu>
```

### Submenu

Nest actions behind a ContextMenuSub trigger.

```tsx
<ContextMenu>
  <ContextMenuTrigger className="…drop zone…">Right-click here</ContextMenuTrigger>
  <ContextMenuContent>
    <ContextMenuItem>Open</ContextMenuItem>
    <ContextMenuSub>
      <ContextMenuSubTrigger>Share</ContextMenuSubTrigger>
      <ContextMenuSubContent>
        <ContextMenuItem>Copy link</ContextMenuItem>
        <ContextMenuItem>Email</ContextMenuItem>
      </ContextMenuSubContent>
    </ContextMenuSub>
  </ContextMenuContent>
</ContextMenu>
```

### Checkbox items

Toggle independent options directly from the menu.

```tsx
const [showGrid, setShowGrid] = React.useState(true);
const [snap, setSnap] = React.useState(false);

<ContextMenu>
  <ContextMenuTrigger className="…drop zone…">Right-click here</ContextMenuTrigger>
  <ContextMenuContent>
    <ContextMenuCheckboxItem checked={showGrid} onCheckedChange={setShowGrid}>
      Show grid
    </ContextMenuCheckboxItem>
    <ContextMenuCheckboxItem checked={snap} onCheckedChange={setSnap}>
      Snap to grid
    </ContextMenuCheckboxItem>
  </ContextMenuContent>
</ContextMenu>
```

### Radio items

Choose one value from a set with ContextMenuRadioGroup.

```tsx
const [zoom, setZoom] = React.useState("100");

<ContextMenu>
  <ContextMenuTrigger className="…drop zone…">Right-click here</ContextMenuTrigger>
  <ContextMenuContent>
    <ContextMenuRadioGroup value={zoom} onValueChange={setZoom}>
      <ContextMenuRadioItem value="50">50%</ContextMenuRadioItem>
      <ContextMenuRadioItem value="100">100%</ContextMenuRadioItem>
      <ContextMenuRadioItem value="200">200%</ContextMenuRadioItem>
    </ContextMenuRadioGroup>
  </ContextMenuContent>
</ContextMenu>
```

### With icons

Lead items with an icon; SVGs are sized and tinted for you.

```tsx
<ContextMenu>
  <ContextMenuTrigger className="…drop zone…">Right-click here</ContextMenuTrigger>
  <ContextMenuContent>
    <ContextMenuItem>
      <CopyIcon />
      Copy
    </ContextMenuItem>
    <ContextMenuItem>
      <TrashIcon />
      Delete
    </ContextMenuItem>
  </ContextMenuContent>
</ContextMenu>
```

## Notes

- Same anatomy as DropdownMenu, opened by right-click / long-press instead of a button.
- Always provide a visible alternative (kebab menu): context menus aren't discoverable.