Minimap Nav
betaA document minimap of hairline dashes, one per section, that swell near the pointer, pulse as the reader scrolls past, and jump to their section on click.
- Navigation
- 1 file
- 2 npm packages
- Accessibility notes
- Animates with motion
pnpm dlx @dowel-ui/cli add minimap-navnpm packages installed: class-variance-authority, motion.
import { MinimapNav } from "@/components/ui/minimap-nav";Default
End Side
Explicit Kinds
Weights
<MinimapNav>
| Prop | Type | Default |
|---|---|---|
sections (required)The sections, in document order. Each id must match an element on the page. | MinimapNavSection[] | — |
activeOffsetDistance in px from the top of the scroll area to the reading line: the last section whose top has crossed it is current. | number | 80 |
side | "start" | "end" | "start" |
Plus every attribute of <nav>.
9/9
checks passed
- Tested — passes
- axe assertion — passes
- Keyboard tested — passes
- Storybook examples — passes
- Accessibility documented — passes
- Semantic tokens only — passes
- Motion from tokens — passes
- className merged — passes
- Visible focus — does not apply
- No fixed widths — passes