NavigationMenu
A navigation menu with dropdown content panels for site navigation.
Basic
<HStack justify="center">
<NavigationMenu>
<NavigationMenuList>
<NavigationMenuItem>
<NavigationMenuTrigger>Getting started</NavigationMenuTrigger>
<NavigationMenuContent>
<div className="grid gap-3 p-4 w-[400px]">
<NavigationMenuLink href="#">
<div className="font-medium">Introduction</div>
<p className="text-muted-foreground text-sm">Learn the basics and get started quickly.</p>
</NavigationMenuLink>
<NavigationMenuLink href="#">
<div className="font-medium">Installation</div>
<p className="text-muted-foreground text-sm">Step-by-step guide to install dependencies.</p>
</NavigationMenuLink>
<NavigationMenuLink href="#">
<div className="font-medium">Typography</div>
<p className="text-muted-foreground text-sm">Styles for headings, paragraphs, and more.</p>
</NavigationMenuLink>
</div>
</NavigationMenuContent>
</NavigationMenuItem>
<NavigationMenuItem>
<NavigationMenuTrigger>Components</NavigationMenuTrigger>
<NavigationMenuContent>
<div className="grid gap-3 p-4 w-[400px]">
<NavigationMenuLink href="#">
<div className="font-medium">Button</div>
<p className="text-muted-foreground text-sm">Trigger actions and events.</p>
</NavigationMenuLink>
<NavigationMenuLink href="#">
<div className="font-medium">Dialog</div>
<p className="text-muted-foreground text-sm">Modal dialogs for important content.</p>
</NavigationMenuLink>
<NavigationMenuLink href="#">
<div className="font-medium">Form</div>
<p className="text-muted-foreground text-sm">Build accessible forms with validation.</p>
</NavigationMenuLink>
</div>
</NavigationMenuContent>
</NavigationMenuItem>
<NavigationMenuItem>
<NavigationMenuLink href="#">Documentation</NavigationMenuLink>
</NavigationMenuItem>
</NavigationMenuList>
</NavigationMenu>
</HStack>With icons
<HStack justify="center">
<NavigationMenu>
<NavigationMenuList>
<NavigationMenuItem>
<NavigationMenuTrigger>Products</NavigationMenuTrigger>
<NavigationMenuContent>
<div className="grid gap-3 p-4 w-[350px]">
<NavigationMenuLink href="#">
<div className="flex items-center gap-3">
<div className="size-10 rounded-lg bg-muted flex items-center justify-center text-lg">📦</div>
<div>
<div className="font-medium">Inventory</div>
<p className="text-muted-foreground text-sm">Track and manage stock levels.</p>
</div>
</div>
</NavigationMenuLink>
<NavigationMenuLink href="#">
<div className="flex items-center gap-3">
<div className="size-10 rounded-lg bg-muted flex items-center justify-center text-lg">🚚</div>
<div>
<div className="font-medium">Shipping</div>
<p className="text-muted-foreground text-sm">Carrier integrations and labels.</p>
</div>
</div>
</NavigationMenuLink>
<NavigationMenuLink href="#">
<div className="flex items-center gap-3">
<div className="size-10 rounded-lg bg-muted flex items-center justify-center text-lg">📊</div>
<div>
<div className="font-medium">Analytics</div>
<p className="text-muted-foreground text-sm">Reports and insights.</p>
</div>
</div>
</NavigationMenuLink>
</div>
</NavigationMenuContent>
</NavigationMenuItem>
<NavigationMenuItem>
<NavigationMenuLink href="#">Pricing</NavigationMenuLink>
</NavigationMenuItem>
<NavigationMenuItem>
<NavigationMenuLink href="#">Contact</NavigationMenuLink>
</NavigationMenuItem>
</NavigationMenuList>
</NavigationMenu>
</HStack>Simple links
<HStack justify="center">
<NavigationMenu>
<NavigationMenuList>
<NavigationMenuItem>
<NavigationMenuLink href="#">Home</NavigationMenuLink>
</NavigationMenuItem>
<NavigationMenuItem>
<NavigationMenuLink href="#">About</NavigationMenuLink>
</NavigationMenuItem>
<NavigationMenuItem>
<NavigationMenuLink href="#">Services</NavigationMenuLink>
</NavigationMenuItem>
<NavigationMenuItem>
<NavigationMenuLink href="#">Contact</NavigationMenuLink>
</NavigationMenuItem>
</NavigationMenuList>
</NavigationMenu>
</HStack>