SayUI
← Library→ Turn this into a prompt
Navigation & structure

Anchor Nav / TOC Scrollspy

On-page section links plus scrollspy highlighting for long documents.

Also known as table of contents · scrollspy · on-page nav

Demo · not production-ready code

Prompt for AI

Pick a stack, copy a ready prompt, paste into Cursor / Claude / ChatGPT.

Your stack

Shapes the prompt you copy

React + Tailwind + shadcn/ui · EN

Stack: React + Tailwind + shadcn/ui. Use React with Tailwind CSS and shadcn/ui patterns (Radix-based primitives, cn(), class-first styling).

Task: implement "Anchor Nav / TOC Scrollspy".

Add a TOC with scrollspy: real hash links, headings with scroll-margin-top matching the sticky header, IntersectionObserver choosing the last heading past the top edge, TOC self-scrolls to keep the active item visible.

Anatomy:
- TOC item: Maps to a heading id; indent by depth.
- scrollspy: Highlight follows the section in view.
- scroll-margin-top: Clear sticky headers without JS math.
- active indicator: Bar or bold state on the current item.

Preferred API / pattern: `custom TOC / intersection hooks`

Keep scope minimal: only this UI pattern, match existing project style.

Acceptance checks

  • ○Avoid: Jump lands under a sticky header
  • ○Avoid: div+onClick TOC
  • ○Avoid: Highlight every visible heading
  • ○Avoid: Long TOC doesn’t scroll itself

In plain wordsHow people search for it

“the side outline that jumps me to sections in a long doc”“click a chapter and the page scrolls there”“the TOC that highlights as I scroll past headings”

AnatomyOpen for part names

TOC item
Maps to a heading id; indent by depth.
scrollspy
Highlight follows the section in view.
scroll-margin-top
Clear sticky headers without JS math.
active indicator
Bar or bold state on the current item.

How to write itOpen for stack patterns

Web (HTML/CSS)hash links + IntersectionObserver + scroll-margin-top
React + Tailwind + shadcn/uicustom TOC / intersection hooks
SwiftUIScrollViewReader + section ids
Ant Design<Anchor items targetOffset />

Notes

Jump with real <a href="#id"> so URLs are shareable. Spy with IntersectionObserver; when several headings are visible, pick the last one past the top line—not every visible one. sticky headers need scroll-margin-top on targets. Honor reduced-motion for smooth scroll.

Common mistakesHumans and models trip here

  • Jump lands under a sticky header: set scroll-margin-top.
  • div+onClick TOC: no shareable deep links.
  • Highlight every visible heading: the indicator flickers—pick one rule.
  • Long TOC doesn’t scroll itself: active item disappears off-screen.

More failure symptoms on AI broke it.

Related patterns

Sticky PositioningAn element scrolls with the page until it hits an edge, then sticks there.BreadcrumbA trail of links showing the path from the root to the current page.Back to TopA control that appears after a long scroll and jumps the user back to the top of the page.Accordion / CollapseStacked headers that expand and collapse to show nested content.

Spotted a wrong name or missing pattern?

Message on X