Logobaseui-cn

Navigation Menu

A collection of navigation links with sub-menus that appear on hover.

navigationinteractiveoverlay
Loading preview...

Installation

npx baseui-cn add navigation-menu

Usage

import {
  NavigationMenu,
  NavigationMenuContent,
  NavigationMenuItem,
  NavigationMenuLink,
  NavigationMenuList,
  NavigationMenuTrigger,
} from "@/components/ui/navigation-menu"
<NavigationMenu>
  <NavigationMenuList>
    <NavigationMenuItem>
      <NavigationMenuTrigger>Getting Started</NavigationMenuTrigger>
      <NavigationMenuContent>{/* Content */}</NavigationMenuContent>
    </NavigationMenuItem>
    <NavigationMenuItem>
      <NavigationMenuLink href="/docs">Documentation</NavigationMenuLink>
    </NavigationMenuItem>
  </NavigationMenuList>
</NavigationMenu>

API

NavigationMenu

PropTypeDefaultDescription
align"start" | "center" | "end""start"Horizontal alignment of the popup positioner relative to the active trigger

API Reference

See the Base UI NavigationMenu documentation for the full API reference, including all props, data attributes, and CSS classes.