# Context menu

> Right-click menu that opens at the pointer, with long-press, typeahead and shortcuts.

Component · Pro · https://lodeui.com/components/context-menu

## When to use

- Secondary actions on files, rows, canvas objects and messages.

## When not to use

- The only way to reach an action: also offer a visible button or menu.

## Installation

```bash
npx shadcn@latest add @lode/context-menu
```

Pro: needs a Lode API key and the `@lode` registry in components.json. See https://lodeui.com/docs/cli.

npm dependencies: motion

## Usage

```tsx title="example.tsx"
import { Copy, Trash2 } from "lucide-react";
import { ContextMenu } from "@/components/ui/context-menu";

<ContextMenu
  aria-label="report.pdf"
  items={[
    { id: "copy", label: "Duplicate", icon: <Copy />, shortcut: "⌘D", onSelect: duplicate },
    { type: "separator", id: "s" },
    { id: "delete", label: "Move to trash", icon: <Trash2 />, destructive: true, onSelect: trash },
  ]}
>
  <FileTile />
</ContextMenu>
```

## API reference

### ContextMenu

Wraps an area; opens a menu at the pointer on right-click or long-press, or at the area on Shift+F10.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| items | `ContextMenuEntry[]` | – | Actions { id, label, icon?, shortcut?, destructive?, disabled?, onSelect? }, separators and labels. |
| children | `ReactNode` | – | The area that responds. |
| aria-label | `string` | – | Names the area, e.g. the file name. |

## Keyboard interactions

| Keys | Action |
| --- | --- |
| Shift+F10 or Menu key | Open from the focused area |
| ↑ / ↓ | Move between actions |
| Home / End | First or last action |
| Letters | Jump to an action |
| Enter / Space | Run |
| Esc or Tab | Close |

## Accessibility

- The area is focusable, has aria-haspopup="menu" and a hint about how to open it.
- The menu is role="menu" with menuitem rows; disabled items are skipped.
- Focus returns to the area after closing.

## Motion

- Scales in from the click point; the highlight glides between rows.

## Responsive behavior

- Kept inside the viewport near edges; long-press opens it on touch.

## Performance

- Rendered in a portal only while open; closes on scroll and resize.

## Notes for AI

- Put the most destructive action last.

## Related

- [Dropdown menu](https://lodeui.com/components/dropdown-menu) — Actions, checkboxes and radio options in a springy menu with full keyboard support.
- [Popover](https://lodeui.com/components/popover) — An anchored panel for filters, forms and details.
- [Tree view](https://lodeui.com/components/tree-view) — Folders and files with animated expand, indent guides and full tree keyboard support.