Context menuPro
Right-click menu that opens at the pointer, with long-press, typeahead and shortcuts.
Right-click (or long-press) here
Right-click, long-press, or press Shift+F10 for actions.Last action: Nothing yet
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
Usage
Import it from @/components/ui/context-menu after installing.
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+F10orMenu key | Open from the focused area |
| ↑or↓ | Move between actions |
| HomeorEnd | First or last action |
| Letters | Jump to an action |
| EnterorSpace | Run |
| EscorTab | 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.
This page as Markdown, for assistants and coding agents:
/components/context-menu/markdownThe full library index for assistants is at /llms.txt.
Lode222 doc pagesllms.txt