Sticky Table of Contents

A table of contents that follows the reader and highlights the section they are in.

Copied 0 times.

On this page

Getting started

How it works

Pricing

FAQ

Members only

This design needs a membership.
Today's price: $1/month, locked forever once you join.

Get it for $1/month Log in

Build a sticky table of contents for my article pages. Match my existing design system, colors, and fonts.

STRUCTURE
- Position: a left rail beside the article on wide screens (sticky, top offset matching my header), about 220px wide. Below the desktop breakpoint the rail hides and the floating-button variant takes over: a small round button (bottom-right, safe-area padded) that opens the TOC as a dismissible panel.
- Include only h2 headings: one flat list, the article's main sections.
- Each entry is a real anchor link to its heading's id; generate missing heading ids from the heading text (slugified, deduplicated).
- The TOC builds itself from the rendered article's headings at load time (or at build time if my stack allows): never a hand-maintained list that drifts from the content.

ACTIVE HIGHLIGHT
- The entry for the section currently in view is highlighted (accent color text plus a small marker bar); track sections with one IntersectionObserver, never a scroll-event handler that runs on every frame.
- Exactly one entry is active at a time; when between sections, the last passed heading stays active.

BEHAVIOR
- Clicking an entry smooth-scrolls to the heading with scroll-margin-top compensating for any sticky header (offset from a config constant); respect prefers-reduced-motion by jumping instantly.
- The browser URL hash updates on click without adding a history entry per section (history.replaceState).
- With fewer than 3 headings, the TOC does not render: a one-line article needs no map.

QUALITY
- Semantic markup: a nav element with aria-label="Table of contents" containing a nested ul; the active entry gets aria-current="true".
- Fully keyboard operable, visible focus rings, WCAG AA contrast for both active and inactive states.
- The TOC never causes layout shift: its rail space is reserved, and long entries truncate with ellipsis rather than wrapping the rail wider.

Members only

What it does

The sticky table of contents is the little map that rides alongside a long article: every section listed, the one you're reading highlighted, one tap to jump anywhere. Long reads stop feeling long when readers can always see where they are and what's left.

Builds itself from your article's actual headings; it can never drift out of date.
Exactly one entry stays lit as you scroll, and clicks glide you neatly below your header.
The web address updates quietly, without cluttering the back button.
On narrow screens the rail hands over to a small floating button.
Fewer than three sections means no map at all; a one-line page doesn't need one.

How it works

1Pick where it lives, a rail beside the article or a small floating button that opens the list.
2Choose the depth: main sections only for a short list, or sub-sections nested underneath them.
3Copy the prompt, your AI's full instructions for this one, into whichever AI you use.
4Your AI builds the list straight from your article's actual headings, with the highlight following the reader as they scroll.
5Click a few entries to test: each jump should land cleanly below your header, with the right entry lighting up.
6Shrink your browser window: the rail should hand over to the floating button when the screen gets narrow.

What you can customize

Where it lives: the rail keeps the map always visible on big screens, with a floating button taking over on phones; floating button uses the button everywhere.
Heading depth: main sections keep the list short and calm; adding sub-sections turns it into a detailed map for really long guides.
Colors, highlight, and type adapt to your site automatically, because your AI builds the list right inside your own design.

You'll also like

Get 10% off your first order

Drop your email and the code lands in your inbox.

you@email.com

Send me the code

No thanks

Email Capture Popup

A conversion popup that captures emails without annoying your visitors. Pick when it shows and what it offers, then copy the prompt.

you@email.comSubscribe

One email a week. Unsubscribe anytime.

Newsletter Section

A full-width inline email capture section that earns the signup with a clear promise, not a popup.

We use cookies for basic stats. Privacy

Cookie Consent Banner

A compliant consent bar that blocks nothing, remembers the choice, and defaults to declining non-essential.