# NavigationMenu

> Top-level site navigation with frosted dropdown panels of described links, built as disclosure navigation.

Category: Navigation. Docs page: https://rime.mjsons.net/components/navigation-menu

## Installation

```bash
npx shadcn@latest add KezLahd/rime/navigation-menu
```

NavigationMenu is the marketing-site or docs header: a row of top-level items, each either a plain link or a button that opens a panel of links with a title, a description and an optional icon. A panel can lead with a feature block (a highlighted card) and lays its links in one to three columns.

It follows the WAI-ARIA disclosure navigation pattern, not role="menu": these are links, read as links. Clicking outside, tabbing out or pressing Esc closes the open panel.

inline renders the panel in normal flow beneath the bar instead of floating over the page, for docs and previews where it has to show open. defaultValue opens a panel on first render.

## Usage

```tsx
import { NavigationMenu } from "@/components/ui";

<NavigationMenu
  aria-label="Main"
  items={[
    { id: "product", label: "Product", links: [{ href: "/projects", title: "Projects", description: "Plan work and track every order." }] },
    { id: "pricing", label: "Pricing", href: "/pricing" },
  ]}
/>
```

## Props: NavigationMenu

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `items` (required) | `ReadonlyArray<NavigationMenuItem>` |  |  |
| `aria-label` | `string` |  |  |
| `defaultValue` | `string \| null` | `null` | The panel open on first render, by item id. |
| `inline` | `boolean` |  | Renders the open panel in normal flow under the bar instead of floating over the page: for docs and previews, where the menu must show open. |
| `activeHref` | `string` |  | The current page, for aria-current on the matching link. |
| `className` | `string` |  |  |

## Examples

### Open panel with a feature block

Rendered inline and open, so the panel shows in place.

```tsx
<NavigationMenu aria-label="Main" items={NAV} inline defaultValue="product" />
```

### Floating panels

The default: panels float over the page under their item.

```tsx
<NavigationMenu aria-label="Site" items={NAV} />
```

## Theme tokens

Per-component tokens. Undeclared by default: the default below is the fallback the CSS uses. Set any of them at :root or on a wrapper to restyle every instance.

| Token | Default |
| --- | --- |
| `--navmenu-item-radius` | `var(--r-sm)` |
| `--navmenu-link-width` | `230px` |
| `--navmenu-panel-max` | `600px` |
| `--navmenu-radius` | `var(--r-lg)` |

System tokens it reads: `--border-w`, `--brand-gradient-soft`, `--control-h-sm`, `--density`, `--dur`, `--dur-fast`, `--dur-slow`, `--ease`, `--ease-out`, `--focus-ring`, `--ink-body`, `--ink-brand`, `--ink-heading`, `--ink-muted`, `--ink-secondary`, `--line-brand`, `--popover-blur`, `--popover-border`, `--popover-shadow`, `--popover-surface`, `--r-lg`, `--r-sm`, `--text-caption`, `--text-small`, `--wash-active`, `--wash-hover`, `--wash-subtle`, `--z-popover`.

## Accessibility

- Each dropdown trigger is a button with aria-expanded and aria-controls; panels hold ordinary links.
- Left and Right move between top-level items; Down opens a panel and focuses its first link; Up and Down move through links; Esc closes and returns focus to the trigger.
- activeHref marks the current page's link with aria-current="page".

## Do

- Keep to five or six top-level items.
- Give every link a one-line description in panels with more than three links.

## Don't

- Don't use it inside an app shell; that is SidebarShell's nav.
- Don't put actions (sign out, delete) in its panels; those belong in a Menu.

Related: https://rime.mjsons.net/components/breadcrumb, https://rime.mjsons.net/components/menu, https://rime.mjsons.net/components/sidebar-shell