Skip to main content
The NavigationMenu component provides an accessible navigation menu with dropdown support, ideal for site navigation.

​
Installation

import { NavigationMenu } from "@craftdotui/baseui/components/navigation-menu";

​
Usage

This component is built on @base-ui/react’s NavigationMenu primitive. Refer to the source code for the complete implementation.
<NavigationMenu>
  <NavigationMenuItem>
    <NavigationMenuTrigger>Products</NavigationMenuTrigger>
    <NavigationMenuContent>
      <NavigationMenuLink href="/products/1">Product 1</NavigationMenuLink>
      <NavigationMenuLink href="/products/2">Product 2</NavigationMenuLink>
    </NavigationMenuContent>
  </NavigationMenuItem>
  
  <NavigationMenuItem>
    <NavigationMenuLink href="/about">About</NavigationMenuLink>
  </NavigationMenuItem>
</NavigationMenu>

​
Features

  • Horizontal navigation layout
  • Dropdown menus on hover/click
  • Keyboard navigation
  • Active link highlighting
  • Responsive design support
  • Nested navigation support

​
Examples

​
Site Navigation

<NavigationMenu>
  <NavigationMenuItem>
    <NavigationMenuTrigger>Products</NavigationMenuTrigger>
    <NavigationMenuContent>
      <div className="grid gap-3 p-4">
        <NavigationMenuLink href="/products/software">
          Software
        </NavigationMenuLink>
        <NavigationMenuLink href="/products/hardware">
          Hardware
        </NavigationMenuLink>
      </div>
    </NavigationMenuContent>
  </NavigationMenuItem>
  
  <NavigationMenuItem>
    <NavigationMenuLink href="/pricing">
      Pricing
    </NavigationMenuLink>
  </NavigationMenuItem>
  
  <NavigationMenuItem>
    <NavigationMenuLink href="/contact">
      Contact
    </NavigationMenuLink>
  </NavigationMenuItem>
</NavigationMenu>

​
Accessibility

  • Built on @base-ui/react for accessibility
  • ARIA navigation patterns
  • Keyboard navigation support
  • Focus management
  • Screen reader support

Build docs developers (and LLMs) love

Get started for freeTalk to us