Navigation Menu

Ready

Complex navigation menu with dropdown support and hover interactions

Interactive Preview

Hover over menu items to see dropdown content

Simple Links

Navigation with simple links only

Usage

How to use the NavigationMenu component

<NavigationMenu>
  <NavigationMenuList>
    <NavigationMenuItem>
      <NavigationMenuTrigger id="products">
        Products
      </NavigationMenuTrigger>
      <NavigationMenuContent id="products">
        <NavigationMenuDropdown width={600}>
          <NavigationMenuLink
            href="#"
            icon={Layers}
            description="Build beautiful interfaces"
            featured
          >
            Design System
          </NavigationMenuLink>
        </NavigationMenuDropdown>
      </NavigationMenuContent>
    </NavigationMenuItem>

    <NavigationMenuItem>
      <NavigationMenuSimpleLink href="#">
        Pricing
      </NavigationMenuSimpleLink>
    </NavigationMenuItem>
  </NavigationMenuList>
</NavigationMenu>

API Reference

NavigationMenu

children-ReactNode - Menu content
className-string - Additional CSS classes

NavigationMenuTrigger

id-string - Unique identifier (required)
children-ReactNode - Trigger content

NavigationMenuLink

href-string - Link URL
icon-Component - Icon component
description-string - Link description
featured-boolean - Highlight as featured (default: false)

NavigationMenuDropdown

width-number - Dropdown width in pixels (default: 500)
children-ReactNode - Dropdown content