# AnchorNav

A page outline that follows the section in view.

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

## Usage

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

export function Example() {
  return (
    <div>
      <AnchorNav
        items={[
          { id: "anchor-intro", label: "Introduction" },
          { id: "anchor-details", label: "Details" },
        ]}
      />
      <section id="anchor-intro">
        <h3>Introduction</h3>
        <p>Navigation follows the document.</p>
      </section>
      <section id="anchor-details">
        <h3>Details</h3>
        <p>Every item is a native fragment link.</p>
      </section>
    </div>
  );
}
```

## 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/anchor-nav
```

## Props

- `items`: `{id: string; label: string}[]`. Existing document section ids.
- `label`: `string`. Landmark name.

## Accessibility

Native fragment links work without an observer. IntersectionObserver marks the visible location and disconnects on unmount.

## Motion

Native scrolling; respects the document's scrolling settings.