Page Minimap
Schematic map of a long page with the visible area. Free, MIT · Content and social › Interactive explainers
A schematic map of a long page: its sections as blocks to scale and the visible area as a frame. Pick a section to jump to it under the fixed header, drag the frame, or use the position slider. Only the registered sections are measured, once per frame; nothing of the page is cloned.
Installation
npx valyro-cli@latest add page-minimapnpx shadcn@latest add https://valyro.xyz/r/page-minimap.jsonnpm install valyro-ui
import 'valyro-ui/styles.css';
import { PageMinimap } from 'valyro-ui';Props
| Prop | Type | Default | |
|---|---|---|---|
sections * | MinimapSection[] | The sections, in document order. | |
scrollContainer | HTMLElement | null | null | The element that scrolls; null (default) means the page itself. |
maxHeight | number | 320 | Upper limit of the map's height, px. Default 320; it is also kept within the screen. |
headerOffset | number | 0 | Height of a fixed header over the content, px: jumps land below it. Default 0. |
hideWhenFits | boolean | true | Hide the map when everything fits without scrolling. Default true. |
placement | 'inline' | 'fixed' | 'inline' | inline (default) in the flow, or fixed to the inline end of the screen. |
onActiveChange | (id: string | null) => void | Called when the section the reader is in changes. | |
onNavigate | (id: string) => void | Called when the reader picks a section in the map. | |
labels | Partial<PageMinimapLabels> | Overrides for the built-in English text; keys left out keep their defaults. |
Related components
- Feature Hotspots — Numbered points on an image that open a note about each detail
- Exploded Layers — Prepared image layers pulled apart with captions
- Prediction Card — The reader guesses first, then sees the answer and the explanation
- Detail Dial — Choose how deep an explanation goes: short, detailed or full
- Version Scrubber — Step through prepared versions of a design with one slider
- Article Header — Article header: section, headline, lede, authors and date
- Byline — Byline: authors, published and updated dates, reading time
- Article Figure — Image with caption and photo credit
- Pull Quote — Pull quote with attribution
- Key Points — “Key points” summary block
- Editor Note — Update, correction, disclosure and sponsored-content notes
- Article Toc — Article table of contents that tracks the current section
Previous: Version Scrubber · Next: Tier List · All Content and social