Navigation Menu

Component Installation Guide

npx shadcn@latest add navigation-menu

Implementing the Navigation Menu

  NavigationMenu, // The root container for the entire navigation menu.
  NavigationMenuContent, // The dropdown panel associated with a trigger.
  NavigationMenuIndicator, // An optional indicator (often an arrow) showing the active trigger/content.
  NavigationMenuItem, // Represents a single top-level item in the navigation list.
  NavigationMenuLink, // A styled link component, often used inside Content or as a top-level item.
  NavigationMenuList, // The container for the list of top-level NavigationMenuItems.
  NavigationMenuTrigger, // The clickable element (usually text) that opens the associated Content.
  NavigationMenuViewport, // The container that manages the positioning and animation of the Content panels.
} from "@/components/ui/navigation-menu"; // Adjust import path as necessary.

<NavigationMenu>
  <NavigationMenuList>
    <NavigationMenuItem>
      <NavigationMenuTrigger>Getting started</NavigationMenuTrigger>
      <NavigationMenuContent>
        <ul className="grid gap-3 p-4 md:w-[400px] lg:w-[500px] lg:grid-cols-[.75fr_1fr]">
          <li className="row-span-3">
            <NavigationMenuLink asChild>
              <a href="/"> {/* ... content ... */} </a>
            </NavigationMenuLink>
          </li>
          <li>
            <NavigationMenuLink asChild>
              <a href="/docs">Introduction</a>
            </NavigationMenuLink>
          </li>
          <li>
            <NavigationMenuLink asChild>
              <a href="/docs/installation">Installation</a>
            </NavigationMenuLink>
          </li>
        </ul>
      </NavigationMenuContent>
    </NavigationMenuItem>

    <NavigationMenuItem>
      <Link href="/docs" legacyBehavior passHref>
        <NavigationMenuLink className={navigationMenuTriggerStyle()}>
          Documentation
        </NavigationMenuLink>
      </Link>
    </NavigationMenuItem>
  </NavigationMenuList>
  <NavigationMenuViewport />
</NavigationMenu>

The core structure involves a <NavigationMenu> wrapping a <NavigationMenuList>. Each top-level entry is a <NavigationMenuItem>. Items that trigger dropdowns use <NavigationMenuTrigger> and <NavigationMenuContent>. Simple top-level links can use <NavigationMenuLink> directly (often combined with a routing library's <Link> component). The <NavigationMenuViewport> component is crucial and should be included directly within <NavigationMenu> to handle the positioning and display of the dropdown content panels.

Navigation Menu Examples and Integrations

Integrating with Routing Libraries (e.g., Next.js Link)

When using client-side routing libraries like Next.js's <Link>, you need to ensure proper styling and behavior. For top-level links that don't open a dropdown, wrap the router's <Link> component with <NavigationMenuLink asChild> and apply the styles obtained from navigationMenuTriggerStyle() to the link itself. The asChild prop passes the styling down correctly.

import { navigationMenuTriggerStyle } from "@/components/ui/navigation-menu";

<NavigationMenuItem>
  <Link href="/docs" legacyBehavior passHref>
    <NavigationMenuLink className={navigationMenuTriggerStyle()}>
      Documentation
    </NavigationMenuLink>
  </Link>
</NavigationMenuItem>

See also the Radix UI documentation for handling client side routing.