> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/yogendrarana/craftdotui/llms.txt
> Use this file to discover all available pages before exploring further.

# Navigation Menu

> A navigation menu component with dropdowns for site navigation, built on @base-ui/react.

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

## Installation

```tsx theme={null}
import { NavigationMenu } from "@craftdotui/baseui/components/navigation-menu";
```

## Usage

<Note>
  This component is built on @base-ui/react's NavigationMenu primitive. Refer to the source code for the complete implementation.
</Note>

```tsx theme={null}
<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

```tsx theme={null}
<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