# Navigation Menu

## Overview

A horizontal navigation bar designed for top-level application sections. Supports dropdown sub-menus with rich content panels. Use it as a secondary top navigation when the primary navigation is in the `<Sidebar>`. Built on Radix UI NavigationMenu.

---

## When to Use

- Horizontal navigation between top-level sections in a webapp or marketing site
- When combined with the Sidebar for secondary navigation categories

## When NOT to Use

- Primary app navigation — use `<Sidebar>` for that.
- Simple links — use plain `<a>` or `<Button>` with `asChild`.

---

## Anatomy

```
<NavigationMenu>
  <NavigationMenuList>
    <NavigationMenuItem>
      <NavigationMenuTrigger>Getting Started</NavigationMenuTrigger>
      <NavigationMenuContent>
        {/* Rich dropdown content */}
      </NavigationMenuContent>
    </NavigationMenuItem>
    <NavigationMenuItem>
      <NavigationMenuLink href="/docs">Docs</NavigationMenuLink>
    </NavigationMenuItem>
  </NavigationMenuList>
</NavigationMenu>
```

---

## Examples

```tsx
import {
  NavigationMenu,
  NavigationMenuContent,
  NavigationMenuItem,
  NavigationMenuLink,
  NavigationMenuList,
  NavigationMenuTrigger,
} from 'xertica-ui/ui';

<NavigationMenu>
  <NavigationMenuList>
    <NavigationMenuItem>
      <NavigationMenuTrigger>Products</NavigationMenuTrigger>
      <NavigationMenuContent>
        <div className="grid gap-3 p-4 w-[300px]">
          <div className="space-y-1">
            <h4 className="text-sm font-medium">Analytics</h4>
            <p className="text-xs text-muted-foreground">Real-time data insights</p>
          </div>
          <div className="space-y-1">
            <h4 className="text-sm font-medium">AI Assistant</h4>
            <p className="text-xs text-muted-foreground">Integrated AI workflows</p>
          </div>
        </div>
      </NavigationMenuContent>
    </NavigationMenuItem>
    <NavigationMenuItem>
      <NavigationMenuLink href="/pricing">Pricing</NavigationMenuLink>
    </NavigationMenuItem>
  </NavigationMenuList>
</NavigationMenu>;
```

---

## AI Rules

- `NavigationMenu` is for **horizontal marketing/secondary navigation** — not for dashboard left-rail navigation (use `Sidebar`).
- `NavigationMenuContent` renders in a portal — ensure `XerticaProvider` wraps the app.
- Use `NavigationMenuLink` for simple links; use `NavigationMenuTrigger` + `NavigationMenuContent` for dropdown sub-menus.