Docs
Navigation Menu

Navigation Menu

A collection of links for navigating websites.

DocsAPI Reference

Installation

npx shadcn@latest add navigation-menu

Usage

import {
  NavigationMenu,
  NavigationMenuContent,
  NavigationMenuIndicator,
  NavigationMenuItem,
  NavigationMenuLink,
  NavigationMenuList,
  NavigationMenuTrigger,
  NavigationMenuViewport,
} from "@/components/ui/navigation-menu"
<NavigationMenu>
  <NavigationMenuList>
    <NavigationMenuItem>
      <NavigationMenuTrigger>Item One</NavigationMenuTrigger>
      <NavigationMenuContent>
        <NavigationMenuLink>Link</NavigationMenuLink>
      </NavigationMenuContent>
    </NavigationMenuItem>
  </NavigationMenuList>
</NavigationMenu>

Examples

Controlling Menu Visibility

To manually control the visibility of the <NavigationMenu>, use its value prop. This approach is useful for testing and customizing the behavior of the <NavigationMenu>.

Ensure your menu is accessible. Considering various ways users might want to open and close your menu, such as pressing the Escape key, scrolling off screen, etc.

Link Component

When using the Next.js <Link /> component, you can use navigationMenuTriggerStyle() to apply the correct styles to the trigger.

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.

MenubarPagination