Sticky table of contents (scrollspy)

A long article with a sticky side menu whose link highlights the section currently on screen. On phones the menu becomes a row of links above the text.

scrollspydata-scrollspytable of contentstocstickyanchorarticlenavigation

About this block

data-scrollspy on a nav sets aria-current="true" on the link whose #target is most visible, and clears it on the others. The highlight is plain CSS on aria-current, so you style it any way you like.

How to customize it

  • Every link must be an in-page anchor (#id) pointing at an element with that id. Add or remove links and sections together.
  • scroll-mt-24 on each section keeps its title clear of a fixed header when a link jumps to it.
  • Change the aria-[current=true]: classes on the links to restyle the active state.
Previous
Features
Next
Testimonials

Browse other blocks

Same library cards — preview live and grab the code from any block.

View full library

Copy and image split

Two-column section with heading and body text on one side, rounded cover image on the other.

Image with story

Photo on the left, eyebrow, headline, body copy, and CTA on the right.

Content — about split (copy + image)

Two-column about section with eyebrow title and body text on one side, full-height cover image on the other. Stacks on mobile.

Split heading and body

Two columns: headline with intro and CTA link on the left, longer body text on the right.

Project portfolio grid

Section heading with a 2x2 grid of project cards showing photos, titles, and category labels.

Heading with stat

Centered heading with a highlighted stat, body paragraphs, and a primary text link.

Image gallery asymmetric

Six rounded photos in an asymmetric 4-column grid with varying spans.

Three image cards row

Three tall cover photos side by side in a row, stacking on mobile. Clean gallery strip.

Section header

Centered intro with eyebrow, title, accent rule, and subtitle on a soft background.

Text and image split

Two-column section with heading and paragraphs on the left, single image on the right.

Table of contents

Centered card listing chapter titles and descriptions, separated by hairline dividers.

Editorial quote split

Two-column section with a small kicker label on the left and a large pull-quote on the right.