Search
Copy Code
Previous: Dropdown Menu
Next: Input OTP
Close Terminal
Light Mode
Right click here
Opens context actions menucontext-menu-demo.tsx
context-menu.tsx
Collapse
Reset
Copy Code
Download
Run
1
"use client"
2
3
import * as React from "react"
4
import {
5
ContextMenu,
6
ContextMenuCheckboxItem,
7
ContextMenuContent,
8
ContextMenuItem,
9
ContextMenuLabel,
10
ContextMenuRadioGroup,
11
ContextMenuRadioItem,
12
ContextMenuSeparator,
13
ContextMenuShortcut,
14
ContextMenuSub,
15
ContextMenuSubContent,
16
ContextMenuSubTrigger,
17
ContextMenuTrigger,
18
} from "@/components/ui/context-menu"
19
20
export default function ContextMenuDemo() {
21
const [showBookmarks, setShowBookmarks] = React.useState(true)
22
const [showFullUrls, setShowFullUrls] = React.useState(false)
23
const [person, setPerson] = React.useState("pedro")
24
25
return (
26
<div className="w-full min-h-[400px] flex items-center justify-center p-8">
27
<ContextMenu>
28
<ContextMenuTrigger className="flex h-[160px] w-[340px] flex-col items-center justify-center gap-2 rounded-2xl border-2 border-dashed border-zinc-200 dark:border-white/10 bg-white/40 dark:bg-white/[0.02] hover:bg-white/80 dark:hover:bg-white/[0.04] hover:border-zinc-300 dark:hover:border-white/20 transition-all duration-300 cursor-context-menu text-zinc-600 dark:text-[#86868B] group shadow-sm select-none font-matter">
29
<div className="flex items-center gap-2 text-[13.5px] font-medium text-zinc-800 dark:text-[#F5F5F7] group-hover:scale-105 transition-transform duration-200">
30
<span>Right click here</span>
31
</div>
32
<span className="text-[11.5px] font-mono text-zinc-400 dark:text-[#86868B]">Opens context actions menu</span>
33
</ContextMenuTrigger>
34
<ContextMenuContent className="w-64">
35
<ContextMenuItem inset>
36
Back
37
<ContextMenuShortcut>⌘ [</ContextMenuShortcut>
38
</ContextMenuItem>
39
<ContextMenuItem inset disabled>
40
Forward
41
<ContextMenuShortcut>⌘ ]</ContextMenuShortcut>
42
</ContextMenuItem>
43
<ContextMenuItem inset>
44
Reload
45
<ContextMenuShortcut>⌘ R</ContextMenuShortcut>
46
</ContextMenuItem>
47
<ContextMenuSub>
48
<ContextMenuSubTrigger inset>More Tools</ContextMenuSubTrigger>
49
<ContextMenuSubContent className="w-48">
50
<ContextMenuItem>
51
Save Page As...
52
<ContextMenuShortcut>⌘ S</ContextMenuShortcut>
53
</ContextMenuItem>
54
<ContextMenuItem>Create Shortcut...</ContextMenuItem>
55
<ContextMenuItem>Name Window...</ContextMenuItem>
56
<ContextMenuSeparator />
57
<ContextMenuItem>Developer Tools</ContextMenuItem>
58
</ContextMenuSubContent>
59
</ContextMenuSub>
60
<ContextMenuSeparator />
61
<ContextMenuCheckboxItem
62
checked={showBookmarks}
63
onCheckedChange={setShowBookmarks}
64
onSelect={(e) => e.preventDefault()}
65
>
66
Show Bookmarks
67
</ContextMenuCheckboxItem>
68
<ContextMenuCheckboxItem
69
checked={showFullUrls}
70
onCheckedChange={setShowFullUrls}
71
onSelect={(e) => e.preventDefault()}
72
>
73
Show Full URLs
74
</ContextMenuCheckboxItem>
75
<ContextMenuSeparator />
76
<ContextMenuLabel inset>People</ContextMenuLabel>
77
<ContextMenuRadioGroup value={person} onValueChange={setPerson}>
78
<ContextMenuRadioItem value="pedro" onSelect={(e) => e.preventDefault()}>
79
Pedro Duarte
80
</ContextMenuRadioItem>
81
<ContextMenuRadioItem value="colm" onSelect={(e) => e.preventDefault()}>
82
Colm Tuite
83
</ContextMenuRadioItem>
84
</ContextMenuRadioGroup>
85
</ContextMenuContent>
86
</ContextMenu>
87
</div>
88
)
89
}