Skip to content
SevenUI
Esc
↑↓navigate↵open⌘Jpreview
Sign in
On this page

Navigation Menu

A collection of links for navigating websites, sharing one animated popup between top-level menu triggers, built on the Base UI Navigation Menu primitive.

"use client";

import { cn } from "cn";
import {
  NavigationMenu,
  NavigationMenuContent,
  NavigationMenuItem,
  NavigationMenuLink,
  NavigationMenuList,
  NavigationMenuTrigger,
  navigationMenuTriggerStyle,
} from "@/registry/base/ui/navigation-menu";

export default function NavigationMenuDemo() {
  return (
    <NavigationMenu>
      <NavigationMenuList>
        <NavigationMenuItem>
          <NavigationMenuTrigger>Getting started</NavigationMenuTrigger>
          <NavigationMenuContent>
            <ul className="grid w-72 gap-1">
              <li>
                <NavigationMenuLink href="#">
                  <div className="font-medium">Introduction</div>
                  <div className="text-muted-foreground">
                    Base UI powered components, distributed through the
                    shadcn registry.
                  </div>
                </NavigationMenuLink>
              </li>
              <li>
                <NavigationMenuLink href="#">
                  <div className="font-medium">Installation</div>
                  <div className="text-muted-foreground">
                    Configure the SevenUI registry in your project.
                  </div>
                </NavigationMenuLink>
              </li>
              <li>
                <NavigationMenuLink href="#">
                  <div className="font-medium">Theming</div>
                  <div className="text-muted-foreground">
                    SevenUI components follow your shadcn theme.
                  </div>
                </NavigationMenuLink>
              </li>
            </ul>
          </NavigationMenuContent>
        </NavigationMenuItem>
        <NavigationMenuItem>
          <NavigationMenuTrigger>Components</NavigationMenuTrigger>
          <NavigationMenuContent>
            <ul className="grid w-96 grid-cols-2 gap-1">
              <li>
                <NavigationMenuLink href="#">
                  <div className="font-medium">Button</div>
                  <div className="text-muted-foreground">
                    Displays a button.
                  </div>
                </NavigationMenuLink>
              </li>
              <li>
                <NavigationMenuLink href="#">
                  <div className="font-medium">Dialog</div>
                  <div className="text-muted-foreground">
                    A window overlaid on the primary window, rendering
                    content underneath inert.
                  </div>
                </NavigationMenuLink>
              </li>
              <li>
                <NavigationMenuLink href="#">
                  <div className="font-medium">Tabs</div>
                  <div className="text-muted-foreground">
                    A set of layered sections that display one panel at a
                    time.
                  </div>
                </NavigationMenuLink>
              </li>
              <li>
                <NavigationMenuLink href="#">
                  <div className="font-medium">Toast</div>
                  <div className="text-muted-foreground">
                    A module-level API for brief, non-blocking
                    notifications.
                  </div>
                </NavigationMenuLink>
              </li>
            </ul>
          </NavigationMenuContent>
        </NavigationMenuItem>
        <NavigationMenuItem>
          <NavigationMenuLink
            href="#"
            className={cn(navigationMenuTriggerStyle(), "flex-row")}
          >
            Docs
          </NavigationMenuLink>
        </NavigationMenuItem>
      </NavigationMenuList>
    </NavigationMenu>
  );
}

Installation

npx shadcn@latest add https://sevenui.dev/r/navigation-menu.json

Usage

"use client";

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

export default function NavigationMenuDemo() {
  return (
    <NavigationMenu>
      <NavigationMenuList>
        <NavigationMenuItem>
          <NavigationMenuTrigger>Getting started</NavigationMenuTrigger>
          <NavigationMenuContent>
            <NavigationMenuLink href="#">Introduction</NavigationMenuLink>
          </NavigationMenuContent>
        </NavigationMenuItem>
      </NavigationMenuList>
    </NavigationMenu>
  );
}

API reference

Extends the Base UI Navigation Menu Root. Hover-open timing lives here, unlike our other overlays where it lives on the trigger.

Prop Type Default
value / defaultValue string —
onValueChange (value) => void —
delay / closeDelay number 50 (ms) each
orientation "horizontal" | "vertical" "horizontal"

Every panel shares one popup: each content portals into the single Viewport inside the shared Popup, and the trigger writes --popup-width/--popup-height (and positioner equivalents) as it switches, so the popup resizes and slides to the active trigger. Content cross-fades directionally via data-activation-direction (left/right/up/down) combined with data-starting-style/data-ending-style. The primitive’s keepMounted (for SSR/crawler-visible closed panels) is not set by default — compose the primitive directly when that matters. For tall panels, cap height with max-h-[var(--available-height)] and prefer Scroll Area inside.

Renders a real <a>. Compose framework routers with the render prop: <NavigationMenuLink render={<Link href="/docs" />} />.

Prop Type Default
closeOnClick boolean false
active boolean — sets data-active false

Styled parts. The Positioner carries an invisible before: hover bridge spanning the sideOffset gap — without it, moving the pointer from a trigger into the popup would cross a non-hoverable gap and close the menu.

Was this page helpful?