Skip to content
Logobaseui-cn

Navigation Menu

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

navigationinteractiveoverlay
Loading preview...

Installation

Terminal
npx baseui-cn add navigation-menu

The CLI installs styles/navigation.styles.css alongside the component. For manual installation, copy that stylesheet from the registry and keep the component import. It uses the existing semantic theme variables.

Usage

Code
import {
  NavigationMenu,
  NavigationMenuContent,
  NavigationMenuItem,
  NavigationMenuLink,
  NavigationMenuList,
  NavigationMenuTrigger,
} from "@/components/ui/navigation-menu"
Code
<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.