Components

Navigation menu

Rich hover-menu for site-level nav (marketing / docs sections). Radix-powered with animated viewport and indicator.

Updated Jul 10, 2026 by Leonardo Posada

Variants

<NavigationMenu>
  <NavigationMenuList>
    <NavigationMenuItem>
      <NavigationMenuTrigger>Solutions</NavigationMenuTrigger>
      <NavigationMenuContent>...</NavigationMenuContent>
    </NavigationMenuItem>
    <NavigationMenuItem>
      <NavigationMenuLink className={navigationMenuTriggerStyle()}>Docs</NavigationMenuLink>
    </NavigationMenuItem>
  </NavigationMenuList>
</NavigationMenu>

When to use

  • Marketing sites with multi-column dropdowns.
  • Docs sites with rich sub-navigation panels.

When not to use

  • Dashboard shells — use Sidebar.
  • Simple links — use plain nav.

Usage

Do
  • Keep each menu column focused on one topic.
  • Use NavigationMenuLink for each item for correct semantics.
Don't
  • Don't animate too aggressively — subtle fade works best.