A collapsible navigation card built from the article's H2 headings. It tracks scroll position to highlight the active section and fill a progress bar anchored to the bottom of the card, and holds share actions. On viewports wide enough to have a gutter it hangs beside the article without shifting the text column; below that it renders inline above the text, collapsed.
Also called: table of contents · reading progress bar · share this article · jump to section
- 1Headings are extracted server-side from the markdown H2s and slugged with the same function the renderer uses, so anchors always resolve.
- 2A passive scroll listener sets the active heading and the progress percentage.
- 3The rail is absolutely positioned in the left gutter so it never pushes the article off centre.
- 4Below 1300px the rail is hidden and an inline collapsed version renders above the text instead.
The rail's position is the whole design: it "lives on the LEFT SIDE as a rail beside the article — the page grid makes it sticky so it rides along as the reader scrolls," and it is absolutely positioned specifically so "it never pushes the content box sideways." That positioning later caused a real collision — the closing CTA banner "spanned the left gutter and painted straight over the sticky table of contents (Keith 08-21)" — which is why the CTA is a sibling of the article rather than a child of its column.
- Long-form articles had no in-page navigation.
- Readers had no sense of remaining length.
See it on your own jobs
Twenty minutes, your numbers, no slide deck. We’ll build one of your real buildings in front of you and send you the estimate link at the end — yours to keep either way.
or keep browsing features →