Dropdown Menu

1import Image from 'next/image'
2import Link from 'next/link'
3import {
4    Activity,
5    LogOut,
6    Moon,
7    Plug,
8    Plus,
9    Settings,
10    UserPlus,
11    Users,
12} from 'lucide-react'
13
14import { Badge } from '@/components/ui/badge'
15import { Button } from '@/components/ui/button'
16import {
17    DropdownMenu,
18    DropdownMenuContent,
19    DropdownMenuGroup,
20    DropdownMenuItem,
21    DropdownMenuLabel,
22    DropdownMenuPortal,
23    DropdownMenuSeparator,
24    DropdownMenuShortcut,
25    DropdownMenuSub,
26    DropdownMenuSubContent,
27    DropdownMenuSubTrigger,
28    DropdownMenuTrigger,
29} from '@/components/ui/dropdown-menu'
30import { Switch } from '@/components/ui/switch'
31
32export function DropdownMenuDemo() {
33    return (
34        <DropdownMenu>
35            <DropdownMenuTrigger asChild>
36                <Button variant="outline">Open Dropdown</Button>
37            </DropdownMenuTrigger>
38
39            <DropdownMenuContent className="w-52 sm:w-64" align="start">
40                <div className="flex items-center justify-between p-3">
41                    <div className="flex items-center space-x-3">
42                        <Image
43                            src="/images/profile1.png"
44                            alt="User avatar"
45                            className="h-9 w-9 rounded-full"
46                            width={40}
47                            height={40}
48                        />
49                        <div className="space-y-0.5">
50                            <p className="text-primary text-sm font-medium">
51                                Sbtheme
52                            </p>
53                            <p className="text-muted-foreground text-xs">
54                                Sbtheme.com
55                            </p>
56                        </div>
57                    </div>
58                    <Badge
59                        radius={'full'}
60                        variant={'success'}
61                        className="px-1.5 text-[10px]/2.5"
62                    >
63                        PRO
64                    </Badge>
65                </div>
66
67                <DropdownMenuSeparator />
68
69                <DropdownMenuGroup>
70                    <DropdownMenuItem className="flex cursor-pointer items-center justify-between">
71                        <span className="flex items-center space-x-2">
72                            <Moon className="size-4" />
73                            <span>Dark Mode</span>
74                        </span>
75                        <Switch />
76                    </DropdownMenuItem>
77                </DropdownMenuGroup>
78
79                <DropdownMenuGroup>
80                    <DropdownMenuItem>
81                        <Activity className="mr-2 size-4" />
82                        Activity
83                    </DropdownMenuItem>
84
85                    <DropdownMenuItem>
86                        <Plug className="mr-2 size-4" />
87                        Integrations
88                    </DropdownMenuItem>
89
90                    <DropdownMenuItem>
91                        <Settings className="mr-2 size-4" />
92                        Settings
93                        <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>
94                    </DropdownMenuItem>
95                </DropdownMenuGroup>
96
97                <DropdownMenuSeparator />
98
99                <DropdownMenuGroup>
100                    <DropdownMenuSub>
101                        <DropdownMenuSubTrigger>
102                            <Users className="mr-2 size-4" />
103                            Manage Accounts
104                        </DropdownMenuSubTrigger>
105                        <DropdownMenuPortal>
106                            <DropdownMenuSubContent>
107                                <DropdownMenuItem>
108                                    <UserPlus className="mr-2 size-4" />
109                                    Invite User
110                                </DropdownMenuItem>
111                                <DropdownMenuItem>
112                                    <Plus className="mr-2 size-4" />
113                                    Add Account
114                                </DropdownMenuItem>
115                            </DropdownMenuSubContent>
116                        </DropdownMenuPortal>
117                    </DropdownMenuSub>
118
119                    <DropdownMenuItem>
120                        <LogOut className="mr-2 size-4" />
121                        Logout
122                    </DropdownMenuItem>
123                </DropdownMenuGroup>
124
125                <DropdownMenuSeparator />
126
127                <DropdownMenuLabel className="px-3 py-1.5 text-xs">
128                    v1.5.69 ·{' '}
129                    <Link href="/terms-of-service" className="underline">
130                        Terms & Conditions
131                    </Link>
132                </DropdownMenuLabel>
133            </DropdownMenuContent>
134        </DropdownMenu>
135    )
136}
137

1'use client'
2
3import * as React from 'react'
4
5import { Button } from '@/components/ui/button'
6import {
7    DropdownMenu,
8    DropdownMenuCheckboxItem,
9    DropdownMenuContent,
10    DropdownMenuLabel,
11    DropdownMenuSeparator,
12    DropdownMenuTrigger,
13} from '@/components/ui/dropdown-menu'
14import { DropdownMenuCheckboxItemProps } from '@radix-ui/react-dropdown-menu'
15
16type Checked = DropdownMenuCheckboxItemProps['checked']
17
18export function DropdownMenuCheckboxes() {
19    const [emailAlerts, setEmailAlerts] = React.useState<Checked>(true)
20    const [pushNotifications, setPushNotifications] =
21        React.useState<Checked>(false)
22    const [smsMessages, setSmsMessages] = React.useState<Checked>(false)
23
24    return (
25        <DropdownMenu>
26            <DropdownMenuTrigger asChild>
27                <Button variant="outline">Open</Button>
28            </DropdownMenuTrigger>
29
30            <DropdownMenuContent className="w-56">
31                <DropdownMenuLabel>Notifications</DropdownMenuLabel>
32                <DropdownMenuSeparator />
33                <DropdownMenuCheckboxItem
34                    checked={emailAlerts}
35                    onCheckedChange={setEmailAlerts}
36                >
37                    Email Alerts
38                </DropdownMenuCheckboxItem>
39                <DropdownMenuCheckboxItem
40                    checked={pushNotifications}
41                    onCheckedChange={setPushNotifications}
42                >
43                    Push Notifications
44                </DropdownMenuCheckboxItem>
45                <DropdownMenuCheckboxItem
46                    checked={smsMessages}
47                    onCheckedChange={setSmsMessages}
48                    disabled
49                >
50                    SMS Messages
51                </DropdownMenuCheckboxItem>
52            </DropdownMenuContent>
53        </DropdownMenu>
54    )
55}
56

1'use client'
2
3import * as React from 'react'
4
5import { Button } from '@/components/ui/button'
6import {
7    DropdownMenu,
8    DropdownMenuContent,
9    DropdownMenuLabel,
10    DropdownMenuRadioGroup,
11    DropdownMenuRadioItem,
12    DropdownMenuSeparator,
13    DropdownMenuTrigger,
14} from '@/components/ui/dropdown-menu'
15
16export function DropdownMenuRadioGroupDemo() {
17    const [layout, setLayout] = React.useState('grid')
18
19    return (
20        <DropdownMenu>
21            <DropdownMenuTrigger asChild>
22                <Button variant="outline">Layout</Button>
23            </DropdownMenuTrigger>
24            <DropdownMenuContent className="w-56">
25                <DropdownMenuLabel>Layout Type</DropdownMenuLabel>
26                <DropdownMenuSeparator />
27                <DropdownMenuRadioGroup
28                    value={layout}
29                    onValueChange={setLayout}
30                >
31                    <DropdownMenuRadioItem value="grid">
32                        Grid
33                    </DropdownMenuRadioItem>
34                    <DropdownMenuRadioItem value="list">
35                        List
36                    </DropdownMenuRadioItem>
37                    <DropdownMenuRadioItem value="compact">
38                        Compact
39                    </DropdownMenuRadioItem>
40                </DropdownMenuRadioGroup>
41            </DropdownMenuContent>
42        </DropdownMenu>
43    )
44}
45