Navigation Menu

import {
  NavigationMenu,
  NavigationMenuList,
  NavigationMenuItem,
  NavigationMenuTrigger,
  NavigationMenuContent,
  NavigationMenuLink,
  NavigationMenuDropdown,
  NavigationMenuSimpleLink,
} from '@/components/ui/navigation-menu'
import { Layers, Zap } from 'lucide-react'

// With dropdown menus
<NavigationMenu>
  <NavigationMenuList>
    <NavigationMenuItem>
      <NavigationMenuTrigger id="products">
        Products
      </NavigationMenuTrigger>
      <NavigationMenuContent id="products">
        <NavigationMenuDropdown width={600}>
          <div className="grid grid-cols-2 gap-3">
            <NavigationMenuLink
              href="/design-system"
              icon={Layers}
              description="Build beautiful interfaces"
              featured
            >
              Design System
            </NavigationMenuLink>
            <NavigationMenuLink
              href="/components"
              icon={Zap}
              description="Lightning-fast development"
            >
              Components
            </NavigationMenuLink>
          </div>
        </NavigationMenuDropdown>
      </NavigationMenuContent>
    </NavigationMenuItem>

    <NavigationMenuItem>
      <NavigationMenuSimpleLink href="/pricing">
        Pricing
      </NavigationMenuSimpleLink>
    </NavigationMenuItem>
  </NavigationMenuList>
</NavigationMenu>