All components

Navigation Menu

Mega-menu style top navigation.

Full API on ui.shadcn.com

Default

Top-level nav with nested mega-menu content.

<NavigationMenu>
  <NavigationMenuList>
    <NavigationMenuItem>
      <NavigationMenuTrigger>Products</NavigationMenuTrigger>
      <NavigationMenuContent>
        <div className="grid w-80 gap-2 p-4">
          <NavigationMenuLink href="/components">Components</NavigationMenuLink>
          <NavigationMenuLink href="/blocks">Blocks</NavigationMenuLink>
        </div>
      </NavigationMenuContent>
    </NavigationMenuItem>
    <NavigationMenuItem>
      <NavigationMenuLink href="/docs">Docs</NavigationMenuLink>
    </NavigationMenuItem>
  </NavigationMenuList>
</NavigationMenu>