Navigation Menu - Craft UI

Powered by Mintlify

Auto-generate your docs

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

<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

⌘I