TSX
"use client";

import { cn } from "cn";
import {
  NavigationMenu,
  NavigationMenuContent,
  NavigationMenuItem,
  NavigationMenuLink,
  NavigationMenuList,
  NavigationMenuTrigger,
  navigationMenuTriggerStyle,
} from "@/components/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="#" className="flex-col items-start gap-1">
                  <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="#" className="flex-col items-start gap-1">
                  <div className="font-medium">Installation</div>
                  <div className="text-muted-foreground">
                    Configure the SevenUI registry in your project.
                  </div>
                </NavigationMenuLink>
              </li>
              <li>
                <NavigationMenuLink href="#" className="flex-col items-start gap-1">
                  <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="#" className="flex-col items-start gap-1">
                  <div className="font-medium">Button</div>
                  <div className="text-muted-foreground">
                    Displays a button.
                  </div>
                </NavigationMenuLink>
              </li>
              <li>
                <NavigationMenuLink href="#" className="flex-col items-start gap-1">
                  <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="#" className="flex-col items-start gap-1">
                  <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="#" className="flex-col items-start gap-1">
                  <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

Bash
npx shadcn@latest add @sevenui/navigation-menupnpm dlx shadcn@latest add @sevenui/navigation-menuyarn dlx shadcn@latest add @sevenui/navigation-menubunx --bun shadcn@latest add @sevenui/navigation-menu

Usage

TSX
"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>
  );
}

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.

NavigationMenuLink

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`

NavigationMenuList, NavigationMenuItem, NavigationMenuTrigger, NavigationMenuPositioner, NavigationMenuIndicator

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.

Navigation Menu

Installation

Usage

API reference

NavigationMenu

NavigationMenuContent

NavigationMenuLink

NavigationMenuList, NavigationMenuItem, NavigationMenuTrigger, NavigationMenuPositioner, NavigationMenuIndicator