Dropdown Menu

1'use client';
2
3import { Bell, Keyboard, LogOut, Settings, Shield, User } from 'lucide-react';
4
5import { Button } from '@/components/ui/button';
6import {
7  DropdownLabel,
8  DropdownMenu,
9  DropdownMenuContent,
10  DropdownMenuItem,
11  DropdownMenuTrigger,
12  DropdownSeparator,
13} from '@/components/ui/dropdown-menu';
14
15export function DropdownMenuDemo() {
16  return (
17    <DropdownMenu>
18      <DropdownMenuTrigger asChild>
19        <Button variant="outline">Account</Button>
20      </DropdownMenuTrigger>
21      <DropdownMenuContent className="w-56" align="start">
22        <DropdownLabel>Account</DropdownLabel>
23        <DropdownMenuItem>
24          <User className="mr-2 size-4" />
25          Profile
26        </DropdownMenuItem>
27        <DropdownMenuItem>
28          <Bell className="mr-2 size-4" />
29          Notifications
30        </DropdownMenuItem>
31        <DropdownMenuItem>
32          <Settings className="mr-2 size-4" />
33          Settings
34        </DropdownMenuItem>
35        <DropdownSeparator />
36        <DropdownLabel>Security</DropdownLabel>
37        <DropdownMenuItem>
38          <Shield className="mr-2 size-4" />
39          Privacy & Security
40        </DropdownMenuItem>
41        <DropdownMenuItem>
42          <Keyboard className="mr-2 size-4" />
43          Keyboard shortcuts
44        </DropdownMenuItem>
45        <DropdownSeparator />
46        <DropdownMenuItem className="text-destructive focus:text-destructive">
47          <LogOut className="mr-2 size-4" />
48          Sign out
49        </DropdownMenuItem>
50      </DropdownMenuContent>
51    </DropdownMenu>
52  );
53}