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

import {
  NavigationMenu,
  NavigationMenuContent,
  NavigationMenuItem,
  NavigationMenuLink,
  NavigationMenuList,
  NavigationMenuTrigger,
} from '@parto/ui';

export default function MyComponent() {
  return (
    <NavigationMenu>
      <NavigationMenuList>
        <NavigationMenuItem>
          <NavigationMenuTrigger>شروع</NavigationMenuTrigger>
          <NavigationMenuContent>
            <ul className="grid gap-3 p-6 md:w-[400px]">
              <li>
                <NavigationMenuLink href="/docs">
                  مستندات
                </NavigationMenuLink>
              </li>
              <li>
                <NavigationMenuLink href="/examples">
                  نمونه‌ها
                </NavigationMenuLink>
              </li>
            </ul>
          </NavigationMenuContent>
        </NavigationMenuItem>
        <NavigationMenuItem>
          <NavigationMenuLink href="/about">
            درباره ما
          </NavigationMenuLink>
        </NavigationMenuItem>
      </NavigationMenuList>
    </NavigationMenu>
  );
}

<NavigationMenu>
  <NavigationMenuList>
    <NavigationMenuItem>
      <NavigationMenuTrigger>محصولات</NavigationMenuTrigger>
      <NavigationMenuContent>
        <ul className="grid w-[400px] gap-3 p-4 md:w-[500px] md:grid-cols-2">
          <li className="row-span-3">
            <NavigationMenuLink href="/" className="flex h-full w-full select-none flex-col rounded-md bg-gradient-to-b from-muted/50 to-muted p-6">
              <div className="mb-2 text-lg font-medium">
                معرفی محصول
              </div>
              <p className="text-sm leading-tight text-muted-foreground">
                بهترین محصولات ما را کشف کنید
              </p>
            </NavigationMenuLink>
          </li>
          <li>
            <NavigationMenuLink href="/product-1">
              محصول ۱
            </NavigationMenuLink>
          </li>
          <li>
            <NavigationMenuLink href="/product-2">
              محصول ۲
            </NavigationMenuLink>
          </li>
        </ul>
      </NavigationMenuContent>
    </NavigationMenuItem>
  </NavigationMenuList>
</NavigationMenu>

<NavigationMenu viewport={false}>
  {/* محتوا */}
</NavigationMenu>