Nav
The thread header — scroll progress with a diamond node, chapter tracking, and a full-screen mobile menu.
Live — this one is real
This frame has its own scroll and modal context. Narrow the preview to try the mobile menu.
Usage
import { Nav } from "mizu-ui";
export function Shell() {
return (
<Nav
brand={<strong>MIZU.</strong>}
links={[{ href: "/", label: "Home" }]}
currentPath="/"
/>
);
}
Source & setup
Import mizu-ui/styles.css once. Fonts are optional via mizu-ui/fonts.css. Override --mizu-* tokens or use className for local styling. Uses native React and CSS; install the package peers for root imports.
Inspect composite/Nav.tsx
Source is included in the npm package under src/composite/Nav.tsx.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| brand | ReactNode | — | Logo or wordmark. |
| links | { href, label }[] | — | Primary navigation links. |
| currentPath | string | — | Current path for active state. Defaults to window.location.pathname. |
| trackChapters | boolean | 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.