منوی ناوبری (Navigation Menu)

1import {
2  NavigationMenu,
3  NavigationMenuContent,
4  NavigationMenuItem,
5  NavigationMenuList,
6  NavigationMenuTrigger,
7} from "@/components/ui/navigation-menu";
8
9export default function BasicExample() {
10  return (
11    <NavigationMenu>
12      <NavigationMenuList>
13        <NavigationMenuItem>
14          <NavigationMenuTrigger>شروع</NavigationMenuTrigger>
15          <NavigationMenuContent>
16            <ul className="w-96 p-4">
17              <li className="mb-2">
18                <div className="text-sm font-medium">مقدمه</div>
19                <div className="text-muted-foreground text-xs">
20                  کامپوننت‌های قابل استفاده مجدد با Tailwind CSS
21                </div>
22              </li>
23              <li className="mb-2">
24                <div className="text-sm font-medium">نصب</div>
25                <div className="text-muted-foreground text-xs">
26                  نحوه نصب وابستگی‌ها و ساختاردهی اپلیکیشن
27                </div>
28              </li>
29            </ul>
30          </NavigationMenuContent>
31        </NavigationMenuItem>
32        <NavigationMenuItem>
33          <NavigationMenuTrigger>کامپوننت‌ها</NavigationMenuTrigger>
34          <NavigationMenuContent>
35            <ul className="grid w-[400px] gap-2 p-4 md:grid-cols-2">
36              <li>
37                <div className="text-sm font-medium">دکمه</div>
38                <div className="text-muted-foreground text-xs">
39                  دکمه با انواع و اندازه‌های مختلف
40                </div>
41              </li>
42              <li>
43                <div className="text-sm font-medium">ورودی</div>
44                <div className="text-muted-foreground text-xs">
45                  فیلد ورودی متن
46                </div>
47              </li>
48            </ul>
49          </NavigationMenuContent>
50        </NavigationMenuItem>
51      </NavigationMenuList>
52    </NavigationMenu>
53  );
54}

1import Link from "next/link";
2import {
3  NavigationMenu,
4  NavigationMenuContent,
5  NavigationMenuItem,
6  NavigationMenuLink,
7  NavigationMenuList,
8  NavigationMenuTrigger,
9  navigationMenuTriggerStyle,
10} from "@/components/ui/navigation-menu";
11
12function ListItem({ href, title, children }) {
13  return (
14    <li>
15      <NavigationMenuLink asChild>
16        <Link href={href} className="block select-none space-y-1 rounded-md p-3...">
17          <div className="text-sm font-medium">{title}</div>
18          <div className="text-muted-foreground text-xs">{children}</div>
19        </Link>
20      </NavigationMenuLink>
21    </li>
22  );
23}
24
25export default function WithLinksExample() {
26  return (
27    <NavigationMenu>
28      <NavigationMenuList>
29        <NavigationMenuItem>
30          <NavigationMenuTrigger>شروع</NavigationMenuTrigger>
31          <NavigationMenuContent>
32            <ul className="w-96">
33              <ListItem href="/docs" title="مقدمه">
34                کامپوننت‌های قابل استفاده مجدد
35              </ListItem>
36              <ListItem href="/docs/installation" title="نصب">
37                نحوه نصب وابستگی‌ها
38              </ListItem>
39            </ul>
40          </NavigationMenuContent>
41        </NavigationMenuItem>
42        <NavigationMenuItem>
43          <NavigationMenuLink asChild className={navigationMenuTriggerStyle()}>
44            <Link href="/docs">مستندات</Link>
45          </NavigationMenuLink>
46        </NavigationMenuItem>
47      </NavigationMenuList>
48    </NavigationMenu>
49  );
50}