# Navigation Menu

- Page: <https://kznlabs.github.io/labsUI/components/navigation-menu>

## Navigation Menu (`navigation-menu`, component)

Website top navigation on the APG disclosure pattern: plain links and panels of rich links. Hover opens after a beat, then sliding along the bar switches panels at once; every panel shares one viewport that springs to the next panel's size and position while the content slides in from the side you moved toward. Click, Enter, ↓, ← → and Esc work; closed panels keep their links in the HTML for crawlers.

- Install: `npx @kznlabs/labsui add navigation-menu`
- Docs: <https://kznlabs.github.io/labsUI/components/navigation-menu>
- Brings: use-controllable-state, use-dismiss, use-indicator, utils
- npm: clsx@^2.1.1, lucide-react@1.63.0, motion@14.7.1, tailwind-merge@^3.7.0

### API

- `<NavigationMenu>` (+ <nav> props): Top navigation for a website: links and hover/click panels. Hover opens after a beat, then
sliding along the bar switches panels at once; click and Enter toggle, Down opens into the panel,
Left/Right walk the bar, Esc closes. Controlled with `value`/`onValueChange` ("" = closed).
  - `defaultValue?: string` = `""`: Item open at first render (uncontrolled).
  - `onValueChange?: (value: string) => void`: Called with the opened item's value, or "".
  - `value?: string`: Controlled open item; "" = all closed.
- `<NavigationMenuList>` (+ <ul> props): The row of items. Its padding is the hover pill's inset.
- `<NavigationMenuItem>` (+ <li> props): One top-level entry: a Trigger + Content pair, or a single Link.
  - `value?: string | (readonly string[] & string)`: Stable id matched by `value`; one is generated if omitted.
- `<NavigationMenuTrigger>` (+ <button> props): Opens its panel: hover (mouse), click, Enter or Space; Down opens and focuses the first link.
- `<NavigationMenuContent>` (+ <div> props): The panel. Size it with `className` (e.g. `w-[32rem]`); the viewport springs to it. While
closed, its links stay in the HTML (hidden) so crawlers and no-JS readers still find them.
- `<NavigationMenuLink>` (+ <a> props): On the bar: a plain top-level link. In a panel: a row with optional icon, title and
description (or your own children). Following it closes the menu.
  - `active?: boolean`: Current page: `aria-current="page"` and the selected look.
  - `description?: ReactNode`: Muted line under the title.
  - `icon?: ReactNode`: In a panel: rich row with a tile icon, title and one-line description.
  - `title?: string`: Bold first line of a panel link.

### Usage

```tsx
<NavigationMenu aria-label="Main"><NavigationMenuList><NavigationMenuItem><NavigationMenuTrigger>Products</NavigationMenuTrigger><NavigationMenuContent className="w-80"><NavigationMenuLink href="/bot" icon={<Bot />} title="Discord bot" description="Moderation and clips" /></NavigationMenuContent></NavigationMenuItem><NavigationMenuItem><NavigationMenuLink href="/blog" active>Blog</NavigationMenuLink></NavigationMenuItem></NavigationMenuList></NavigationMenu>
```

### Example: main-nav.tsx

```tsx
import { Bot, Clapperboard, ShoppingBag } from "lucide-react";
import {
  NavigationMenu,
  NavigationMenuContent,
  NavigationMenuItem,
  NavigationMenuLink,
  NavigationMenuList,
  NavigationMenuTrigger,
} from "@/components/ui/navigation-menu";

export function MainNav({ pathname }: { pathname: string }) {
  return (
    <NavigationMenu aria-label="Main">
      <NavigationMenuList>
        <NavigationMenuItem>
          <NavigationMenuTrigger>Products</NavigationMenuTrigger>
          <NavigationMenuContent className="w-80">
            <NavigationMenuLink href="/bot" icon={<Bot />} title="Discord bot" description="Moderation, logs and slash commands" />
            <NavigationMenuLink href="/clips" icon={<Clapperboard />} title="Clips" description="Record, trim and share highlights" />
            <NavigationMenuLink href="/shop" icon={<ShoppingBag />} title="Shop" description="Merch and server boosts" />
          </NavigationMenuContent>
        </NavigationMenuItem>
        <NavigationMenuItem>
          <NavigationMenuLink href="/blog" active={pathname.startsWith("/blog")}>
            Blog
          </NavigationMenuLink>
        </NavigationMenuItem>
      </NavigationMenuList>
    </NavigationMenu>
  );
}
```