منوی کشویی (Dropdown Menu)

1import { Button } from "@/components/ui/button";
2import {
3  DropdownMenu,
4  DropdownMenuContent,
5  DropdownMenuGroup,
6  DropdownMenuItem,
7  DropdownMenuLabel,
8  DropdownMenuSeparator,
9  DropdownMenuTrigger,
10} from "@/components/ui/dropdown-menu";
11
12export default function BasicExample() {
13  return (
14    <DropdownMenu>
15      <DropdownMenuTrigger asChild>
16        <Button variant="outline">باز کردن</Button>
17      </DropdownMenuTrigger>
18      <DropdownMenuContent>
19        <DropdownMenuGroup>
20          <DropdownMenuLabel>حساب کاربری من</DropdownMenuLabel>
21          <DropdownMenuItem>پروفایل</DropdownMenuItem>
22          <DropdownMenuItem>صورتحساب</DropdownMenuItem>
23        </DropdownMenuGroup>
24        <DropdownMenuSeparator />
25        <DropdownMenuGroup>
26          <DropdownMenuItem>تیم</DropdownMenuItem>
27          <DropdownMenuItem>اشتراک</DropdownMenuItem>
28        </DropdownMenuGroup>
29      </DropdownMenuContent>
30    </DropdownMenu>
31  );
32}

1import { Button } from "@/components/ui/button";
2import {
3  DropdownMenu,
4  DropdownMenuContent,
5  DropdownMenuItem,
6  DropdownMenuSub,
7  DropdownMenuSubContent,
8  DropdownMenuSubTrigger,
9  DropdownMenuTrigger,
10} from "@/components/ui/dropdown-menu";
11
12export default function SubmenuExample() {
13  return (
14    <DropdownMenu>
15      <DropdownMenuTrigger asChild>
16        <Button variant="outline">باز کردن</Button>
17      </DropdownMenuTrigger>
18      <DropdownMenuContent>
19        <DropdownMenuItem>پروفایل</DropdownMenuItem>
20        <DropdownMenuItem>صورتحساب</DropdownMenuItem>
21        <DropdownMenuSub>
22          <DropdownMenuSubTrigger>زیرمنو</DropdownMenuSubTrigger>
23          <DropdownMenuSubContent>
24            <DropdownMenuItem>آیتم زیرمنو ۱</DropdownMenuItem>
25            <DropdownMenuItem>آیتم زیرمنو ۲</DropdownMenuItem>
26          </DropdownMenuSubContent>
27        </DropdownMenuSub>
28        <DropdownMenuItem>تنظیمات</DropdownMenuItem>
29      </DropdownMenuContent>
30    </DropdownMenu>
31  );
32}

1import { Button } from "@/components/ui/button";
2import {
3  DropdownMenu,
4  DropdownMenuContent,
5  DropdownMenuItem,
6  DropdownMenuShortcut,
7  DropdownMenuTrigger,
8} from "@/components/ui/dropdown-menu";
9
10export default function ShortcutsExample() {
11  return (
12    <DropdownMenu>
13      <DropdownMenuTrigger asChild>
14        <Button variant="outline">باز کردن</Button>
15      </DropdownMenuTrigger>
16      <DropdownMenuContent>
17        <DropdownMenuItem>
18          پروفایل
19          <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>
20        </DropdownMenuItem>
21        <DropdownMenuItem>
22          صورتحساب
23          <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>
24        </DropdownMenuItem>
25        <DropdownMenuItem>
26          تنظیمات
27          <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>
28        </DropdownMenuItem>
29      </DropdownMenuContent>
30    </DropdownMenu>
31  );
32}

1import { Button } from "@/components/ui/button";
2import {
3  DropdownMenu,
4  DropdownMenuContent,
5  DropdownMenuItem,
6  DropdownMenuTrigger,
7} from "@/components/ui/dropdown-menu";
8import { User, CreditCard, Settings, LogOut } from "lucide-react";
9
10export default function IconsExample() {
11  return (
12    <DropdownMenu>
13      <DropdownMenuTrigger asChild>
14        <Button variant="outline">باز کردن</Button>
15      </DropdownMenuTrigger>
16      <DropdownMenuContent>
17        <DropdownMenuItem>
18          <User className="me-2 h-4 w-4" />
19          <span>پروفایل</span>
20        </DropdownMenuItem>
21        <DropdownMenuItem>
22          <CreditCard className="me-2 h-4 w-4" />
23          <span>صورتحساب</span>
24        </DropdownMenuItem>
25        <DropdownMenuItem>
26          <Settings className="me-2 h-4 w-4" />
27          <span>تنظیمات</span>
28        </DropdownMenuItem>
29        <DropdownMenuItem>
30          <LogOut className="me-2 h-4 w-4" />
31          <span>خروج</span>
32        </DropdownMenuItem>
33      </DropdownMenuContent>
34    </DropdownMenu>
35  );
36}

1"use client";
2
3import * as React from "react";
4import { Button } from "@/components/ui/button";
5import {
6  DropdownMenu,
7  DropdownMenuCheckboxItem,
8  DropdownMenuContent,
9  DropdownMenuLabel,
10  DropdownMenuSeparator,
11  DropdownMenuTrigger,
12} from "@/components/ui/dropdown-menu";
13
14export default function CheckboxesExample() {
15  const [showStatusBar, setShowStatusBar] = React.useState(true);
16  const [showActivityBar, setShowActivityBar] = React.useState(false);
17  const [showPanel, setShowPanel] = React.useState(false);
18
19  return (
20    <DropdownMenu>
21      <DropdownMenuTrigger asChild>
22        <Button variant="outline">باز کردن</Button>
23      </DropdownMenuTrigger>
24      <DropdownMenuContent>
25        <DropdownMenuLabel>نمایش</DropdownMenuLabel>
26        <DropdownMenuSeparator />
27        <DropdownMenuCheckboxItem
28          checked={showStatusBar}
29          onCheckedChange={setShowStatusBar}
30        >
31          نوار وضعیت
32        </DropdownMenuCheckboxItem>
33        <DropdownMenuCheckboxItem
34          checked={showActivityBar}
35          onCheckedChange={setShowActivityBar}
36        >
37          نوار فعالیت
38        </DropdownMenuCheckboxItem>
39        <DropdownMenuCheckboxItem
40          checked={showPanel}
41          onCheckedChange={setShowPanel}
42        >
43          پنل
44        </DropdownMenuCheckboxItem>
45      </DropdownMenuContent>
46    </DropdownMenu>
47  );
48}

1"use client";
2
3import * as React from "react";
4import { Button } from "@/components/ui/button";
5import {
6  DropdownMenu,
7  DropdownMenuCheckboxItem,
8  DropdownMenuContent,
9  DropdownMenuLabel,
10  DropdownMenuSeparator,
11  DropdownMenuTrigger,
12} from "@/components/ui/dropdown-menu";
13import { Bell, Mail, MessageSquare } from "lucide-react";
14
15export default function CheckboxIconsExample() {
16  const [notifications, setNotifications] = React.useState(true);
17  const [emails, setEmails] = React.useState(false);
18  const [messages, setMessages] = React.useState(true);
19
20  return (
21    <DropdownMenu>
22      <DropdownMenuTrigger asChild>
23        <Button variant="outline">اعلان‌ها</Button>
24      </DropdownMenuTrigger>
25      <DropdownMenuContent>
26        <DropdownMenuLabel>تنظیمات اعلان</DropdownMenuLabel>
27        <DropdownMenuSeparator />
28        <DropdownMenuCheckboxItem
29          checked={notifications}
30          onCheckedChange={setNotifications}
31        >
32          <Bell className="me-2 h-4 w-4" />
33          <span>اعلان‌ها</span>
34        </DropdownMenuCheckboxItem>
35        <DropdownMenuCheckboxItem
36          checked={emails}
37          onCheckedChange={setEmails}
38        >
39          <Mail className="me-2 h-4 w-4" />
40          <span>ایمیل‌ها</span>
41        </DropdownMenuCheckboxItem>
42        <DropdownMenuCheckboxItem
43          checked={messages}
44          onCheckedChange={setMessages}
45        >
46          <MessageSquare className="me-2 h-4 w-4" />
47          <span>پیام‌ها</span>
48        </DropdownMenuCheckboxItem>
49      </DropdownMenuContent>
50    </DropdownMenu>
51  );
52}

1"use client";
2
3import * as React from "react";
4import { Button } from "@/components/ui/button";
5import {
6  DropdownMenu,
7  DropdownMenuContent,
8  DropdownMenuLabel,
9  DropdownMenuRadioGroup,
10  DropdownMenuRadioItem,
11  DropdownMenuSeparator,
12  DropdownMenuTrigger,
13} from "@/components/ui/dropdown-menu";
14
15export default function RadioGroupExample() {
16  const [position, setPosition] = React.useState("bottom");
17
18  return (
19    <DropdownMenu>
20      <DropdownMenuTrigger asChild>
21        <Button variant="outline">باز کردن</Button>
22      </DropdownMenuTrigger>
23      <DropdownMenuContent>
24        <DropdownMenuLabel>موقعیت پنل</DropdownMenuLabel>
25        <DropdownMenuSeparator />
26        <DropdownMenuRadioGroup value={position} onValueChange={setPosition}>
27          <DropdownMenuRadioItem value="top">بالا</DropdownMenuRadioItem>
28          <DropdownMenuRadioItem value="bottom">پایین</DropdownMenuRadioItem>
29          <DropdownMenuRadioItem value="right">راست</DropdownMenuRadioItem>
30        </DropdownMenuRadioGroup>
31      </DropdownMenuContent>
32    </DropdownMenu>
33  );
34}

1"use client";
2
3import * as React from "react";
4import { Button } from "@/components/ui/button";
5import {
6  DropdownMenu,
7  DropdownMenuContent,
8  DropdownMenuLabel,
9  DropdownMenuRadioGroup,
10  DropdownMenuRadioItem,
11  DropdownMenuSeparator,
12  DropdownMenuTrigger,
13} from "@/components/ui/dropdown-menu";
14import { CreditCard, Wallet, Smartphone } from "lucide-react";
15
16export default function RadioIconsExample() {
17  const [method, setMethod] = React.useState("card");
18
19  return (
20    <DropdownMenu>
21      <DropdownMenuTrigger asChild>
22        <Button variant="outline">روش پرداخت</Button>
23      </DropdownMenuTrigger>
24      <DropdownMenuContent>
25        <DropdownMenuLabel>انتخاب روش پرداخت</DropdownMenuLabel>
26        <DropdownMenuSeparator />
27        <DropdownMenuRadioGroup value={method} onValueChange={setMethod}>
28          <DropdownMenuRadioItem value="card">
29            <CreditCard className="me-2 h-4 w-4" />
30            <span>کارت اعتباری</span>
31          </DropdownMenuRadioItem>
32          <DropdownMenuRadioItem value="wallet">
33            <Wallet className="me-2 h-4 w-4" />
34            <span>کیف پول</span>
35          </DropdownMenuRadioItem>
36          <DropdownMenuRadioItem value="mobile">
37            <Smartphone className="me-2 h-4 w-4" />
38            <span>پرداخت موبایل</span>
39          </DropdownMenuRadioItem>
40        </DropdownMenuRadioGroup>
41      </DropdownMenuContent>
42    </DropdownMenu>
43  );
44}

1import { Button } from "@/components/ui/button";
2import {
3  DropdownMenu,
4  DropdownMenuContent,
5  DropdownMenuItem,
6  DropdownMenuSeparator,
7  DropdownMenuTrigger,
8} from "@/components/ui/dropdown-menu";
9
10export default function DestructiveExample() {
11  return (
12    <DropdownMenu>
13      <DropdownMenuTrigger asChild>
14        <Button variant="outline">اقدامات</Button>
15      </DropdownMenuTrigger>
16      <DropdownMenuContent>
17        <DropdownMenuItem>ویرایش</DropdownMenuItem>
18        <DropdownMenuItem>کپی</DropdownMenuItem>
19        <DropdownMenuSeparator />
20        <DropdownMenuItem className="text-destructive focus:text-destructive">
21          حذف
22        </DropdownMenuItem>
23      </DropdownMenuContent>
24    </DropdownMenu>
25  );
26}

1import { Avatar, AvatarFallback, AvatarImage, Button } from "@/components/ui";
2import {
3  DropdownMenu,
4  DropdownMenuContent,
5  DropdownMenuGroup,
6  DropdownMenuItem,
7  DropdownMenuLabel,
8  DropdownMenuSeparator,
9  DropdownMenuTrigger,
10} from "@/components/ui/dropdown-menu";
11import { User, Settings, LogOut } from "lucide-react";
12
13export default function AvatarExample() {
14  return (
15    <DropdownMenu>
16      <DropdownMenuTrigger asChild>
17        <Button variant="ghost" className="relative h-10 w-10 rounded-full">
18          <Avatar>
19            <AvatarImage src="/avatars/01.png" alt="@username" />
20            <AvatarFallback>ل ر</AvatarFallback>
21          </Avatar>
22        </Button>
23      </DropdownMenuTrigger>
24      <DropdownMenuContent className="w-56" align="end">
25        <DropdownMenuLabel className="font-normal">
26          <div className="flex flex-col space-y-1">
27            <p className="text-sm font-medium leading-none">لیلا رضایی</p>
28            <p className="text-xs leading-none text-muted-foreground">
29              leila@example.com
30            </p>
31          </div>
32        </DropdownMenuLabel>
33        <DropdownMenuSeparator />
34        <DropdownMenuGroup>
35          <DropdownMenuItem>
36            <User className="me-2 h-4 w-4" />
37            <span>پروفایل</span>
38          </DropdownMenuItem>
39          <DropdownMenuItem>
40            <Settings className="me-2 h-4 w-4" />
41            <span>تنظیمات</span>
42          </DropdownMenuItem>
43        </DropdownMenuGroup>
44        <DropdownMenuSeparator />
45        <DropdownMenuItem>
46          <LogOut className="me-2 h-4 w-4" />
47          <span>خروج</span>
48        </DropdownMenuItem>
49      </DropdownMenuContent>
50    </DropdownMenu>
51  );
52}

1"use client";
2
3import * as React from "react";
4import { Button } from "@/components/ui/button";
5import {
6  DropdownMenu,
7  DropdownMenuCheckboxItem,
8  DropdownMenuContent,
9  DropdownMenuGroup,
10  DropdownMenuItem,
11  DropdownMenuLabel,
12  DropdownMenuSeparator,
13  DropdownMenuShortcut,
14  DropdownMenuSub,
15  DropdownMenuSubContent,
16  DropdownMenuSubTrigger,
17  DropdownMenuTrigger,
18} from "@/components/ui/dropdown-menu";
19import {
20  User,
21  CreditCard,
22  Settings,
23  Users,
24  Mail,
25  MessageSquare,
26  Plus,
27  Github,
28  LifeBuoy,
29  Cloud,
30  LogOut,
31} from "lucide-react";
32
33export default function ComplexExample() {
34  const [showStatusBar, setShowStatusBar] = React.useState(true);
35  const [showPanel, setShowPanel] = React.useState(false);
36
37  return (
38    <DropdownMenu>
39      <DropdownMenuTrigger asChild>
40        <Button variant="outline">منوی پیچیده</Button>
41      </DropdownMenuTrigger>
42      <DropdownMenuContent className="w-56">
43        <DropdownMenuLabel>حساب کاربری من</DropdownMenuLabel>
44        <DropdownMenuSeparator />
45        <DropdownMenuGroup>
46          <DropdownMenuItem>
47            <User className="me-2 h-4 w-4" />
48            <span>پروفایل</span>
49            <DropdownMenuShortcut>⇧⌘P</DropdownMenuShortcut>
50          </DropdownMenuItem>
51          <DropdownMenuItem>
52            <CreditCard className="me-2 h-4 w-4" />
53            <span>صورتحساب</span>
54            <DropdownMenuShortcut>⌘B</DropdownMenuShortcut>
55          </DropdownMenuItem>
56          <DropdownMenuItem>
57            <Settings className="me-2 h-4 w-4" />
58            <span>تنظیمات</span>
59            <DropdownMenuShortcut>⌘S</DropdownMenuShortcut>
60          </DropdownMenuItem>
61        </DropdownMenuGroup>
62        <DropdownMenuSeparator />
63        <DropdownMenuGroup>
64          <DropdownMenuItem>
65            <Users className="me-2 h-4 w-4" />
66            <span>تیم</span>
67          </DropdownMenuItem>
68          <DropdownMenuSub>
69            <DropdownMenuSubTrigger>
70              <Plus className="me-2 h-4 w-4" />
71              <span>دعوت کاربران</span>
72            </DropdownMenuSubTrigger>
73            <DropdownMenuSubContent>
74              <DropdownMenuItem>
75                <Mail className="me-2 h-4 w-4" />
76                <span>ایمیل</span>
77              </DropdownMenuItem>
78              <DropdownMenuItem>
79                <MessageSquare className="me-2 h-4 w-4" />
80                <span>پیام</span>
81              </DropdownMenuItem>
82            </DropdownMenuSubContent>
83          </DropdownMenuSub>
84        </DropdownMenuGroup>
85        <DropdownMenuSeparator />
86        <DropdownMenuCheckboxItem
87          checked={showStatusBar}
88          onCheckedChange={setShowStatusBar}
89        >
90          نوار وضعیت
91        </DropdownMenuCheckboxItem>
92        <DropdownMenuCheckboxItem
93          checked={showPanel}
94          onCheckedChange={setShowPanel}
95        >
96          پنل
97        </DropdownMenuCheckboxItem>
98        <DropdownMenuSeparator />
99        <DropdownMenuItem>
100          <Github className="me-2 h-4 w-4" />
101          <span>GitHub</span>
102        </DropdownMenuItem>
103        <DropdownMenuItem>
104          <LifeBuoy className="me-2 h-4 w-4" />
105          <span>پشتیبانی</span>
106        </DropdownMenuItem>
107        <DropdownMenuItem disabled>
108          <Cloud className="me-2 h-4 w-4" />
109          <span>API</span>
110        </DropdownMenuItem>
111        <DropdownMenuSeparator />
112        <DropdownMenuItem>
113          <LogOut className="me-2 h-4 w-4" />
114          <span>خروج</span>
115          <DropdownMenuShortcut>⇧⌘Q</DropdownMenuShortcut>
116        </DropdownMenuItem>
117      </DropdownMenuContent>
118    </DropdownMenu>
119  );
120}