- Folder
- src/components/NavList/
- Props
- sections: the nav sections in page order, each an id and a label
- activeId: the section to mark active; omitted on the site, where useActiveSection follows the section in view
- forced (Workshop only): { id, state } sets data-state hover or focus on that section's item
- Tokens
- Items: NavLink, mono label in Muted with a 1 px line, 32 px at rest; hover, focus and active turn it Text and grow the line to 64 px
- List: items stack with no gap; each link's 12 px block padding spaces them
- Motion
- Line scale, label slide and colour 150 ms from NavLink; under reduced motion the line and label jump, the colour fades stay
- Scroll-spy: the active item is the latest section crossing a band from 40 to 45 percent of the viewport height; the last section at the bottom of the page
- Accessibility
- A nav named In this page holding a ul of links to the section hashes
- aria-current on the active link
- Hidden on phones, where each section label is a sticky bar instead