ContextMenu

Right-click context menu demo area with icons, keyboard shortcut labels, separators, and nested Share submenu.

Navigation & Layoutcontext-menuright-clickmenu

Dependencies

shadcn/ui components needed:

npx shadcn@latest add dropdown-menunpx shadcn@latest add separator

How to use this component

Copy the code below into your project. Make sure you have the required shadcn/ui dependencies installed. Then import and use the component in your pages or layouts.

Code

1"use client";
2
3import { Copy, Cut, Paste, Share2, Link, Mail, MoreHorizontal } from 'lucide-react';
4import {
5  DropdownMenu,
6  DropdownMenuContent,
7  DropdownMenuItem,
8  DropdownMenuGroup,
9  DropdownMenuLabel,
10  DropdownMenuSeparator,
11  DropdownMenuShortcut,
12  DropdownMenuSub,
13  DropdownMenuSubContent,
14  DropdownMenuSubTrigger,
15  DropdownMenuTrigger,
16} from '@/components/ui/dropdown-menu';
17import { Separator } from '@/components/ui/separator';
18
19export default function ContextMenu() {
20  return (
21    <div className="flex items-center justify-center min-h-[300px] bg-white dark:bg-slate-950 p-6">
22      <div className="w-full max-w-md">
23        <div className="border-2 border-dashed border-slate-300 dark:border-slate-700 rounded-xl p-8 text-center bg-slate-50 dark:bg-slate-900/50">
24          <p className="text-slate-500 dark:text-slate-400 mb-4">Right-click anywhere in this area</p>
25          <DropdownMenu>
26            <DropdownMenuTrigger asChild>
27              <button className="px-4 py-2 bg-slate-200 dark:bg-slate-800 rounded-lg text-sm text-slate-700 dark:text-slate-300 hover:bg-slate-300 dark:hover:bg-slate-700 transition-colors">
28                Or click here to open menu
29              </button>
30            </DropdownMenuTrigger>
31            <DropdownMenuContent className="w-56" align="end">
32              <DropdownMenuLabel>Actions</DropdownMenuLabel>
33              <DropdownMenuSeparator />
34              <DropdownMenuGroup>
35                <DropdownMenuItem>
36                  <Copy className="w-4 h-4 mr-2 text-slate-400" />
37                  <span>Copy</span>
38                  <DropdownMenuShortcut>⌘C</DropdownMenuShortcut>
39                </DropdownMenuItem>
40                <DropdownMenuItem>
41                  <Cut className="w-4 h-4 mr-2 text-slate-400" />
42                  <span>Cut</span>
43                  <DropdownMenuShortcut>⌘X</DropdownMenuShortcut>
44                </DropdownMenuItem>
45                <DropdownMenuItem>
46                  <Paste className="w-4 h-4 mr-2 text-slate-400" />
47                  <span>Paste</span>
48                  <DropdownMenuShortcut>⌘V</DropdownMenuShortcut>
49                </DropdownMenuItem>
50              </DropdownMenuGroup>
51              <DropdownMenuSeparator />
52              <DropdownMenuGroup>
53                <DropdownMenuSub>
54                  <DropdownMenuSubTrigger>
55                    <Share2 className="w-4 h-4 mr-2 text-slate-400" />
56                    <span>Share</span>
57                  </DropdownMenuSubTrigger>
58                  <DropdownMenuSubContent>
59                    <DropdownMenuItem>
60                      <Link className="w-4 h-4 mr-2 text-slate-400" />
61                      <span>Copy Link</span>
62                    </DropdownMenuItem>
63                    <DropdownMenuItem>
64                      <Mail className="w-4 h-4 mr-2 text-slate-400" />
65                      <span>Email</span>
66                    </DropdownMenuItem>
67                  </DropdownMenuSubContent>
68                </DropdownMenuSub>
69              </DropdownMenuGroup>
70              <DropdownMenuSeparator />
71              <DropdownMenuItem>
72                <MoreHorizontal className="w-4 h-4 mr-2 text-slate-400" />
73                <span>More options</span>
74              </DropdownMenuItem>
75            </DropdownMenuContent>
76          </DropdownMenu>
77        </div>
78      </div>
79    </div>
80  );
81}