Navigation Menu

A collection of links for navigating websites.

API Reference

Preview

Installation

Usage

import {
  NavigationMenu,
  NavigationMenuContent,
  NavigationMenuIndicator,
  NavigationMenuItem,
  NavigationMenuLink,
  NavigationMenuList,
  NavigationMenuTrigger,
} from "@/components/ui/navigation-menu"
<NavigationMenu>
  <NavigationMenuList>
    <NavigationMenuItem>
      <NavigationMenuTrigger>
        Item One
        <NavigationMenuIndicator />
      </NavigationMenuTrigger>
      <NavigationMenuContent>
        <NavigationMenuLink href="#">Link</NavigationMenuLink>
      </NavigationMenuContent>
    </NavigationMenuItem>
  </NavigationMenuList>
</NavigationMenu>

API Reference

Root component. Wraps NavigationMenu.Root from Base UI. Automatically includes the positioner and portal.

Container for navigation items. Styled wrapper for NavigationMenu.List from Base UI.

Individual navigation item container. Styled wrapper for NavigationMenu.Item from Base UI.

Trigger button that opens the content panel. Styled wrapper for NavigationMenu.Trigger from Base UI.

Content panel displayed when a trigger is activated. Styled wrapper for NavigationMenu.Content from Base UI with slide animations.

Link element inside navigation content or as a direct navigation item. Styled wrapper for NavigationMenu.Link from Base UI.

Chevron icon that rotates when the associated trigger is open. Wraps NavigationMenu.Icon from Base UI.

Internal positioner component. Included automatically by NavigationMenu.

Examples

Vertical