# Nav

The thread header — scroll progress with a diamond node, chapter tracking, and a full-screen mobile menu.

- Family: Composites, imported from `mizu-ui` or `mizu-ui/composite`
- Docs: https://mizu.user64bit.world/components/nav
- Source: https://github.com/0xuser64bit/mizu/blob/main/packages/mizu/src/composite/Nav.tsx

## Usage

```tsx
import { Nav } from "mizu-ui";

export function Shell() {
  return (
    <Nav
      brand={<strong>MIZU.</strong>}
      links={[{ href: "/", label: "Home" }]}
      currentPath="/"
    />
  );
}
```

## Copy it with the shadcn CLI

```sh
npx shadcn@latest init 0xuser64bit/mizu/preset # once, where there is no components.json
npx shadcn@latest add 0xuser64bit/mizu/nav
```

## Props

- `brand`: `ReactNode`. Logo or wordmark.
- `links`: `{ href, label }[]`. Primary navigation links.
- `actions`: `ReactNode`. Controls kept in the bar at every width, beside the links or the Menu button: search, a theme switch, an account.
- `currentPath`: `string`. Current path for active state. Defaults to window.location.pathname.
- `trackChapters`: `boolean` (default `true`). Observe [data-chapter] sections and show the current chapter.

## Accessibility

Semantic header/nav; mobile menu uses native modal focus containment, locks scroll, and closes on Escape.

## Motion

Progress line is a spring-smoothed scroll link; the chapter label crossfades; the mobile menu is a full-screen fade.