Docs › Components › Navigation Menu

Shadcn Navigation Menu

The shadcn/ui Navigation Menu is a primary site navigation whose top-level items open panels of links, styled with Tailwind CSS v4. Built on accessible primitives, it supports keyboard navigation and animated content panels. Navigation menus power website headers across ShadcnStore marketing blocks.

Key features

• Top-level items that open rich link panels.
• Keyboard navigation and an animated active indicator.
• Links compose with any framework's Link via render.
• Renders content in a managed viewport.

Installation

npx shadcn@latest add navigation-menu

Usage

import {
  NavigationMenu,
  NavigationMenuList,
  NavigationMenuItem,
  NavigationMenuTrigger,
  NavigationMenuContent,
  NavigationMenuLink,
} from "@/components/ui/navigation-menu"

export function Example() {
  return (
    <NavigationMenu>
      <NavigationMenuList>
        <NavigationMenuItem>
          <NavigationMenuTrigger>Getting started</NavigationMenuTrigger>
          <NavigationMenuContent>
            <NavigationMenuLink href="/docs">Introduction</NavigationMenuLink>
          </NavigationMenuContent>
        </NavigationMenuItem>
      </NavigationMenuList>
    </NavigationMenu>
  )
}

Composition

Use render on NavigationMenuLink to compose with your router's link component:

<NavigationMenuLink render={<Link href="/docs" />}>Introduction</NavigationMenuLink>

Accessibility

• Items open on keyboard focus as well as hover; keep that behavior.
• Use real links inside panels so navigation works without JavaScript.
• Give the menu a clear label and keep panel structure consistent.

When to use the Navigation Menu

Use a Navigation Menu for primary site navigation in a header, especially with grouped link panels or featured content. For a location trail, use a Breadcrumb. For app command menus, use a Menubar. On mobile, pair it with a Sheet.

Used in these blocks

• Hero sections: header navigation.
• App shells: primary nav.
• Footer sections: grouped link menus.

Related components

Pair with a Sheet for mobile navigation and a Button for the menu toggle; for location context add a Breadcrumb.

FAQ

What is the shadcn navigation menu used for?

The Navigation Menu is a primary site navigation with top-level items that open panels of links, common in website headers.

What is the difference between Navigation Menu and Menubar?

Navigation Menu is for site links and content panels. Menubar is an application command bar (File, Edit, View).

How do I use my framework's Link?

Render NavigationMenuLink with render and pass your framework Link as the element.

How do I make it responsive on mobile?

Hide the menu on small screens and show a Sheet-based navigation drawer instead.