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

export default function NavigationMenuDemo() {
  return (
    <NavigationMenu>
      <NavigationMenuList>
        <NavigationMenuItem>
          <NavigationMenuTrigger>Getting Started</NavigationMenuTrigger>
          <NavigationMenuContent>
            <div className="grid w-[400px] gap-1">
              <NavigationMenuLink href="#">Introduction</NavigationMenuLink>
              <NavigationMenuLink href="#">Installation</NavigationMenuLink>
              <NavigationMenuLink href="#">Usage</NavigationMenuLink>
            </div>
          </NavigationMenuContent>
        </NavigationMenuItem>
        <NavigationMenuItem>
          <NavigationMenuLink href="#">Documentation</NavigationMenuLink>
        </NavigationMenuItem>
      </NavigationMenuList>
    </NavigationMenu>
  )
}

Anatomy

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

<NavigationMenu>
  <NavigationMenuList>
    <NavigationMenuItem>
      <NavigationMenuTrigger>Getting Started</NavigationMenuTrigger>
      <NavigationMenuContent>
        <NavigationMenuLink href="/docs">Documentation</NavigationMenuLink>
      </NavigationMenuContent>
    </NavigationMenuItem>
    <NavigationMenuItem>
      <NavigationMenuLink href="/about">About</NavigationMenuLink>
    </NavigationMenuItem>
  </NavigationMenuList>
</NavigationMenu>

Examples

<NavigationMenu>
  <NavigationMenuList>
    <NavigationMenuItem>
      <NavigationMenuTrigger>Products</NavigationMenuTrigger>
      <NavigationMenuContent>
        <NavigationMenuLink href="/products/analytics">Analytics</NavigationMenuLink>
        <NavigationMenuLink href="/products/automation">Automation</NavigationMenuLink>
      </NavigationMenuContent>
    </NavigationMenuItem>
    <NavigationMenuItem>
      <NavigationMenuLink href="/pricing">Pricing</NavigationMenuLink>
    </NavigationMenuItem>
  </NavigationMenuList>
</NavigationMenu>

With rich content panels

Use custom layouts inside NavigationMenuContent for feature-rich dropdown panels.

<NavigationMenu>
  <NavigationMenuList>
    <NavigationMenuItem>
      <NavigationMenuTrigger>Resources</NavigationMenuTrigger>
      <NavigationMenuContent>
        <ul className="grid w-[400px] gap-3 p-4 md:w-[500px] md:grid-cols-2">
          <li>
            <NavigationMenuLink href="/docs">
              <div className="font-medium">Documentation</div>
              <p className="text-sm text-muted-foreground">
                Learn how to integrate our tools.
              </p>
            </NavigationMenuLink>
          </li>
          <li>
            <NavigationMenuLink href="/blog">
              <div className="font-medium">Blog</div>
              <p className="text-sm text-muted-foreground">
                Read our latest articles and updates.
              </p>
            </NavigationMenuLink>
          </li>
        </ul>
      </NavigationMenuContent>
    </NavigationMenuItem>
  </NavigationMenuList>
</NavigationMenu>

Right-aligned positioner

By default the popup aligns to the start. Pass align="center" or align="end" to change the popup alignment.

<NavigationMenu align="end">
  <NavigationMenuList>
    <NavigationMenuItem>
      <NavigationMenuTrigger>Account</NavigationMenuTrigger>
      <NavigationMenuContent>
        <NavigationMenuLink href="/settings">Settings</NavigationMenuLink>
        <NavigationMenuLink href="/profile">Profile</NavigationMenuLink>
      </NavigationMenuContent>
    </NavigationMenuItem>
  </NavigationMenuList>
</NavigationMenu>

API Reference

Prop	Type	Default	Description
`align`	`"start" \| "center" \| "end"`	`"start"`	Controls the horizontal alignment of the popup positioner.
`className`	`string`	—
`children`	`ReactNode`	—

NavigationMenuList

A flex container for menu items, rendered as a <ul> with list-none.

Prop	Type	Default
`className`	`string`	—
`children`	`ReactNode`	—

NavigationMenuItem

A single item in the navigation menu list.

Prop	Type	Default
`className`	`string`	—
`children`	`ReactNode`	—

NavigationMenuTrigger

A button that opens a content panel. Renders a chevron icon that rotates when open.

Prop	Type	Default
`className`	`string`	—
`children`	`ReactNode`	—

NavigationMenuContent

The dropdown panel displayed when a trigger is activated. Animates in and out based on the activation direction.

Prop	Type	Default
`className`	`string`	—
`children`	`ReactNode`	—

NavigationMenuLink

A styled link for use inside content panels or directly in the list. Highlights on hover and focus with a subtle background.

Prop	Type	Default
`className`	`string`	—
`children`	`ReactNode`	—

Accepts all props from Base UI's NavigationMenu.Link.

NavigationMenuPositioner

Controls the position of the popup relative to the menu. Automatically included by NavigationMenu -- you typically do not need to render this yourself.

Prop	Type	Default	Description
`side`	`"top" \| "bottom"`	`"bottom"`	Which side of the menu the popup appears on.
`sideOffset`	`number`	`8`	Distance from the menu in pixels.
`align`	`"start" \| "center" \| "end"`	`"start"`	Horizontal alignment of the popup.
`alignOffset`	`number`	`0`	Offset from the aligned edge in pixels.
`className`	`string`	—

NavigationMenuIndicator

An animated indicator that follows the active trigger. Renders a small arrow shape pointing toward the content.

Prop	Type	Default
`className`	`string`	—

navigationMenuTriggerStyle

A cva style utility that returns the trigger's class string. Useful for applying trigger styles to a plain NavigationMenuLink that should look like a trigger but does not open a panel.

<NavigationMenuLink className={navigationMenuTriggerStyle()} href="/about">
  About
</NavigationMenuLink>

Navigation Menu