# Navigation Menu

> Top navigation with rich flyouts.

Import from `@aspyn-io/kit`. Scaffold source: `npx shadcn@latest add https://design.aspyn.io/r/navigation-menu.json`

## Install

```tsx
import {
  NavigationMenu,
  NavigationMenuList,
  NavigationMenuItem,
  NavigationMenuTrigger,
  NavigationMenuContent,
  NavigationMenuLink,
  navigationMenuTriggerStyle,
} from "@aspyn-io/kit";
```

### Site navigation with flyouts

Marketing-site-style top navigation with rich dropdown panels.

```tsx
<NavigationMenu>
  <NavigationMenuList>
    <NavigationMenuItem>
      <NavigationMenuTrigger>Products</NavigationMenuTrigger>
      <NavigationMenuContent>
        <ul className="grid w-96 gap-2 p-3">
          <li><NavigationMenuLink href="/crm">CRM: accounts & subscriptions</NavigationMenuLink></li>
          <li><NavigationMenuLink href="/billing">Billing: invoices & payments</NavigationMenuLink></li>
        </ul>
      </NavigationMenuContent>
    </NavigationMenuItem>
    <NavigationMenuItem>
      <NavigationMenuLink href="/pricing" className={navigationMenuTriggerStyle()}>
        Pricing
      </NavigationMenuLink>
    </NavigationMenuItem>
  </NavigationMenuList>
</NavigationMenu>
```

### With icons

Give each menu item a leading icon for faster scanning.

```tsx
<NavigationMenuContent>
  <ul className="grid w-72 gap-1 p-2">
    <li>
      <NavigationMenuLink href="/dashboard" className="flex-row items-center gap-2">
        <DashboardIcon /> Dashboard
      </NavigationMenuLink>
    </li>
  </ul>
</NavigationMenuContent>
```

## Notes

- For app-internal navigation prefer plain links/sidebar; NavigationMenu shines on marketing sites.