Shadcn Navigation Menu Components

Shadcn Navigation Menu Component

The Shadcn Navigation Menu is the horizontal menu at the top of a website, with triggers that open rich dropdown panels of links. It is the component behind most marketing site headers and mega menus: a Product menu with feature cards, a Resources menu with docs and blog links, and plain links like Pricing next to them.

Mega menus, product dropdowns and store navigation on this page are all built with shadcn/ui, React and Tailwind CSS. Each one works with both Radix UI and Base UI navigation menu primitives. You get two SaaS style headers and two store headers with image cards, each a complete React navigation menu with dark mode support that you can install with the shadcn CLI.

What is the Shadcn Navigation Menu Component?

A navigation menu is a list of top level items. Some items are simple links, others are triggers that open a content panel on hover, on click or with Enter and Space from the keyboard. The primitive handles the timing between panels, so moving the pointer from one trigger to the next swaps the content instantly instead of closing and reopening, and it can render all panels inside a shared viewport that animates its width and height between them.

Use it for site navigation, where every entry leads to a page. For commands and actions like Rename or Delete, use a Dropdown Menu, and for an application style File, Edit, View bar, use a Menubar. On small screens the same links usually move into a Sheet or a Drawer.

Anatomy of the Shadcn Navigation Menu

4 Shadcn Navigation Menu Variants

Each navigation menu variant listed here is previewed live at the top of this page, together with its source code and install command.

• Product mega menu: A SaaS header with a featured gradient card next to a feature list, a two column Resources panel with icons, a plain Pricing link and a Company menu hidden on mobile.
• Platform menu with badges: A wide two column panel of products with colored icons, NEW badges, an arrow on highlighted items and an accent bar that appears on hover.
• Store menu with featured image: An e-commerce header with a Collections panel led by a product photo on the left, an Accessories icon grid and plain Women and Men links.
• Featured image on the right: The same store layout with the collection links first and the image card placed in the right column.

How to Install the Shadcn Navigation Menu Component

Set up shadcn/ui in your project if you have not already, then add the Shadcn UI Kit registry to your components.json once:

{
  "registries": {
    "@shadcnuikit": "https://shadcnuikit.com/r/{name}.json"
  }
}

Then install a navigation menu variant by its name:

npx shadcn@latest add @shadcnuikit/navigation-menu2

The same command works with pnpm dlx, yarn dlx and bunx --bun. Each variant has a copy button for every package manager, and the code is added to your project as plain React and Tailwind CSS that you can edit freely.

How to Use the Shadcn Navigation Menu Component

Import the parts from your components/ui folder. Give each panel a trigger and content, and style top level links with navigationMenuTriggerStyle() so they match the triggers.

import Link from "next/link"

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

export function SiteNav() {
  return (
    <NavigationMenu>
      <NavigationMenuList>
        <NavigationMenuItem>
          <NavigationMenuTrigger>Resources</NavigationMenuTrigger>
          <NavigationMenuContent>
            <ul className="grid w-[400px] gap-1">
              <li>
                <NavigationMenuLink asChild>
                  <Link href="/docs">Documentation</Link>
                </NavigationMenuLink>
              </li>
              <li>
                <NavigationMenuLink asChild>
                  <Link href="/blog">Blog</Link>
                </NavigationMenuLink>
              </li>
            </ul>
          </NavigationMenuContent>
        </NavigationMenuItem>
        <NavigationMenuItem>
          <NavigationMenuLink asChild className={navigationMenuTriggerStyle()}>
            <Link href="/pricing">Pricing</Link>
          </NavigationMenuLink>
        </NavigationMenuItem>
      </NavigationMenuList>
    </NavigationMenu>
  )
}

Why Use the Shadcn Navigation Menu Component

• Built for mega menus: Panels can hold any layout: grids, featured cards, images, icons and badges.
• Smooth transitions: The shared viewport resizes and panels slide in from the right direction as users move between triggers.
• Keyboard and screen reader support: Arrow key navigation, focus management and ARIA attributes come from the primitive.
• Router friendly links: asChild lets every link render your framework's link component for client side navigation.
• Consistent styling: The trigger style helper keeps plain links and dropdown triggers visually identical.

Common Navigation Menu Use Cases

• SaaS headers: Product, Solutions and Resources menus with feature descriptions.
• E-commerce stores: Category menus with product photos, collections and icon grids.
• Documentation sites: Top level sections like Guides, API and Examples.
• Agency and portfolio sites: Services and case studies grouped under a few triggers.
• Developer platforms: Large product catalogs with badges for new or beta features.

Customizing the Shadcn Navigation Menu

Panel layouts are just Tailwind grids inside NavigationMenuContent, so set their width and columns with classes like md:w-[500px] lg:grid-cols-2. Mark the current page with the active prop on NavigationMenuLink, and pass viewport={false} when you want each panel to open directly under its trigger. Colors come from your popover and muted tokens; generate a palette with the free Theme Generator.

The Product and Platform variants on this page keep the shared viewport only on mobile, where panels need the full width:

const isMobile = useIsMobile()

<NavigationMenu viewport={isMobile}>
  <NavigationMenuList className="flex-wrap">...</NavigationMenuList>
</NavigationMenu>

Navigation Menu Accessibility and Keyboard Support

The navigation menu follows the WAI-ARIA disclosure navigation pattern rather than the menu role, which is the correct choice for site links. The root renders a nav element, triggers expose aria-expanded and aria-controls, and the active link gets aria-current="page". Focus moves into an open panel with the arrow keys and returns to its trigger when the panel closes.

Keep trigger labels short, avoid putting critical actions only inside hover panels, and make sure every panel link has visible text, not just an icon.

Navigation Menu Best Practices

• Limit the top level to about five to seven items so the header stays scannable.
• Give each link in a panel a title and a short description when the names alone are not clear.
• Keep important pages like Pricing as direct links instead of hiding them inside a panel.
• Highlight the current section with the active prop so users know where they are.
• Replace the menu with a Sheet or an Accordion based menu on small screens.
• Use the same panel width and grid for similar menus to avoid layout jumps.

Components Related to Navigation Menu

Shadcn Navigation Menu FAQ

Looking for something else? Browse all shadcn/ui components or ready-made UI blocks built with them.