Context Menu
Displays a menu when triggered by a right-click or context menu event.
Right click here
Installation
npm i @radix-ui/react-context-menuUsage
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
import {
ContextMenu,
ContextMenuTrigger,
ContextMenuContent,
ContextMenuItem,
ContextMenuSeparator,
ContextMenuShortcut,
} from "@/components/ui/context-menu"
export function ContextMenuDemo() {
return (
<ContextMenu>
<ContextMenuTrigger className="flex h-40 w-96 items-center justify-center rounded-md border border-dashed text-sm">
Right click here
</ContextMenuTrigger>
<ContextMenuContent className="w-64">
<ContextMenuItem>
<File className="mr-2 h-4 w-4" />
New File
<ContextMenuShortcut>⌘N</ContextMenuShortcut>
</ContextMenuItem>
<ContextMenuItem>
<FolderOpen className="mr-2 h-4 w-4" />
New Folder
<ContextMenuShortcut>⇧⌘N</ContextMenuShortcut>
</ContextMenuItem>
<ContextMenuSeparator />
<ContextMenuItem>
<Save className="mr-2 h-4 w-4" />
Save
<ContextMenuShortcut>⌘S</ContextMenuShortcut>
</ContextMenuItem>
<ContextMenuItem>
<Share className="mr-2 h-4 w-4" />
Share
</ContextMenuItem>
<ContextMenuSeparator />
<ContextMenuItem>
<Trash className="mr-2 h-4 w-4" />
Delete
<ContextMenuShortcut>⌘⌫</ContextMenuShortcut>
</ContextMenuItem>
</ContextMenuContent>
</ContextMenu>
)
}Examples
Advanced
Right click here
Selected View Mode: grid | Bookmarked: No
Props
| Component | Props | Description |
|---|---|---|
| ContextMenu | children | The root context menu component. Wraps trigger and content. |
| ContextMenuTrigger | asChild? | The element that triggers the context menu on right-click. Accepts `asChild` to use a custom element. |
| ContextMenuContent | className?, side?, align? | The dropdown menu container. Supports positioning and styling props. |
| ContextMenuItem | disabled?, inset?, onSelect? | A single actionable menu item. |
| ContextMenuCheckboxItem | checked, onCheckedChange | A toggleable checkbox menu item. |
| ContextMenuRadioGroup | value, onValueChange | Group wrapper for radio menu items. |
| ContextMenuRadioItem | value | An item within a radio group. |
| ContextMenuSub | children | Wrapper to render nested submenus. |
| ContextMenuSubTrigger | className?, disabled? | The trigger that opens a submenu. |
| ContextMenuSubContent | className?, side?, align? | The content container for a submenu. |
| ContextMenuLabel | inset? | Non-interactive label element inside the menu. |
| ContextMenuSeparator | — | A visual divider between items. |
| ContextMenuShortcut | children | Displays a shortcut hint (e.g. ⌘S) inside a menu item. |