shadcn.io is not affiliated with official shadcn/ui
Scrolling Article Table of Contents Blog Block for React
A framed, fixed-height essay with six sections beside a rail that follows the section in view with a sliding bar, and a Jump to select on phones; choosing a section scrolls the essay, never the page.
Installation
Overview
A long read with a table of contents for React with Base UI, written for Spineline, a long-form writing lab. A compact header sits over a split behind a divider: at the start a framed article of fixed height with six headings that scrolls inside its frame, and at the end a rail listing the sections. A bar slides to the section in view as you read, and "Section 3 of 6" says where you are. Choosing a section scrolls the article and nothing else, so the page never jumps. The article is a labelled, focusable scroll region that comes first in the DOM, so it can be read with a keyboard; on a phone the rail becomes a "Jump to" select above the article that follows the section in view. It uses Toc, Select and Guides, with CSS for the entrance.
FAQ
How do I use my own article?
Replace SECTIONS at the top of the file: each section has an id (the heading's anchor), a title and its paragraphs. The rail, the select, the outline passed to Toc and "Section 3 of 6" are all built from that one list, so adding a section adds it everywhere.
Why doesn't the page scroll when I choose a section?
The article is its own scroll box, and the table of contents is told to scroll that box (scrollEl) instead of the window. Selecting a section, in the rail or in the select, moves only the article. For a real post, drop the fixed height and the scrollEl, and the same rail follows the page.
How does it know which section is in view?
Toc watches the headings inside the article as you scroll and marks the one nearest the top; the first and last sections are held at the ends of the scroll. The bar is a single element that slides and resizes with a CSS transition, and it jumps without animating under reduced motion.
What replaces the rail on a phone?
A Select labelled "Jump to a section", above the article. It shows the section in view and scrolls the article when you choose another. Keyboard and screen reader users on any width can also read the article directly, since it is a focusable region with its own label.
Related
- Pro
Table of Contents FAQ
NavigationA FAQ for an object-storage service with a sticky table of contents: three topics and their questions in an outline that follows the reader, beside topic bands that each hold an accordion.
- Pro
Chaptered Origin Story About
Company storyA company's origin story as four long chapters of prose beside a sticky chapter index that follows the reader, turning into a row of chips on phones.
- Pro
Reading Progress Blog
Reading toolsFour articles you have opened as rows that lead with a progress ring, then the title, the time left and a Continue link; the header counts how many are still in progress.
- Pro
Hover Card Footnotes Blog
Article partsAn annotated essay: numbered markers open a card with their note on hover and focus, jump to the note in an ordered list where the target note is tinted, and a link goes back to the exact place in the text.
- Pro
Post Footer Blog
Article partsThe end of an article: tags as links, a share cluster whose Copy link really copies, an author panel beside Published and Updated dates, and Previous and Next as two cells on a shared hairline with arrow key hints.
- 3Pro
Series Tracker Blog
Tutorials and seriesA reader's place in a six-part series: the catalog's vertical Steps with a tick for each part read, the current part's panel with a typographic cover, a thin progress bar and a Shine Button that continues to the next part.