Navigation Menu

Navigation menus are useful when a top-level header needs to stay compact but a few sections still require richer route previews. This implementation keeps the trigger row restrained and lets the expanded content carry the explanatory detail.

Installation

Purchase access, then open /account/install to issue a registry token.

Usage

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

<NavigationMenu>
  <NavigationMenuList>
    <NavigationMenuItem>
      <NavigationMenuTrigger>Docs</NavigationMenuTrigger>
      <NavigationMenuContent>
        <NavigationMenuLink href="/docs/components/button">
          Components
        </NavigationMenuLink>
      </NavigationMenuContent>
    </NavigationMenuItem>
  </NavigationMenuList>
</NavigationMenu>

Why This Primitive Exists

This primitive gives a header enough room for hierarchy without forcing a permanent sidebar or a stack of exposed links.

• Use it for site sections, product areas, or edition-level wayfinding.
• Prefer it when users need a short description or grouped choices before they commit to a route.
• Keep it out of dense app workspaces where a menubar, sidebar, or tabs pattern would communicate location more clearly.

Examples

Single Section Preview

The simplest version shows one trigger with a small grid of links and supporting descriptions.

Multiple Header Sections

This pattern works well for docs or marketing headers where several top-level buckets need one level of secondary structure.

<NavigationMenuItem>
  <NavigationMenuTrigger>Edition</NavigationMenuTrigger>
  <NavigationMenuContent>
    <ul className="grid w-[24rem] gap-0">
      <li className="border-b border-border p-4">Overview</li>
      <li className="border-b border-border p-4">Install</li>
      <li className="p-4">Examples</li>
    </ul>
  </NavigationMenuContent>
</NavigationMenuItem>

In Context

A broad header can stay calm if the trigger labels remain short and the expanded panels carry the structure.

Guidance

Keep The Trigger Row Tight

• Use short labels such as Docs, Blocks, or Edition.
• Do not overload the trigger with long descriptive copy.
• Let the content panel explain the section and its sub-routes.

Design The Panel Like A Small Landing Surface

• Group related links together.
• Add one clear descriptive line when it helps route choice.
• Keep the content width deliberate so the panel feels like part of the header, not a floating page.

Choose The Right Navigation Pattern

• Use a navigation menu for broad top-level route systems.
• Use Menubar for application commands.
• Use Tabs when the user is already inside one bounded section and needs to switch views.

API Reference

Root Exports

Repo-Specific Notes

• Triggers use bordered uppercase typography with a stronger open state.
• NavigationMenu automatically renders NavigationMenuViewport after its children.
• NavigationMenuContent is full-width on small screens and becomes positioned content on larger layouts.