Side TOC
A sticky outline rail that tracks reading position in a document layout.
Side TOC — specimen document
A sticky outline beside a long article. Scroll the column or jump from the rail.
Purpose
Wide reading layouts can afford a persistent outline. The side rail keeps every heading one click away without covering the column.
Additional paragraph so the scroll region has enough length for the active marker to travel as you read.
The rail tracks this document only — not headings outside the specimen canvas.
Active highlight
Scroll position drives which entry is current. A left-edge mark and stronger type make the active section obvious at a glance.
Additional paragraph so the scroll region has enough length for the active marker to travel as you read.
The rail tracks this document only — not headings outside the specimen canvas.
Hierarchy
Indentation mirrors heading level so nested structure stays readable without icons or numbers.
Additional paragraph so the scroll region has enough length for the active marker to travel as you read.
The rail tracks this document only — not headings outside the specimen canvas.
Jump
Selecting an entry scrolls the document column. The rail itself stays sticky so orientation never leaves the viewport.
Additional paragraph so the scroll region has enough length for the active marker to travel as you read.
The rail tracks this document only — not headings outside the specimen canvas.
When to use
Prefer a side rail on desktop document pages. On phones, the morph dock is the better companion — horizontal space is already spoken for.
Additional paragraph so the scroll region has enough length for the active marker to travel as you read.
The rail tracks this document only — not headings outside the specimen canvas.
- Behavior
A sticky side outline that highlights the active heading as you scroll a document column and jumps on click.
- Interaction
Pointer click selects sections. Keyboard reaches outline buttons. Touch works but the rail is sized for desktop document layouts.
- Controls
Scroll the article to move the active marker. Click any outline entry to jump to that heading.
- Motion & sound
No decorative motion — active state is a border and weight change. Reduced motion is already static. No sound.
- Learnings
Side rails earn their keep on wide reading layouts; on phones, prefer the morph dock so the column stays full-bleed.
- Source
Reuse `TableOfContentsSide` from `@dammydev/lab`. Scope with `rootSelector` / `scrollRootSelector` so the rail only tracks the specimen document.