ComponentClient component

Navigation Menu

Accessible application or marketing navigation with animated rich panels.

Installation

Preview

Usage

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

<NavigationMenu>
  <NavigationMenuList>
    <NavigationMenuItem>
      <NavigationMenuTrigger>Products</NavigationMenuTrigger>
      <NavigationMenuContent>
        <NavigationMenuLink href="/components">Components</NavigationMenuLink>
      </NavigationMenuContent>
    </NavigationMenuItem>
  </NavigationMenuList>
</NavigationMenu>

API reference

PropTypeDefaultDescription
viewportbooleantrueRenders content inside the animated shared viewport.
orientation"horizontal" | "vertical""horizontal"Navigation reading direction.
classNamestring—Overrides or extends the generated Tailwind classes.
disabledbooleanfalsePrevents user interaction when supported.