Sticky Index Rail
also known assticky sidebar · TOC rail · scroll-aware navigation
A vertical sidebar that stays pinned to the viewport while the main content scrolls, typically holding navigation or a table of contents.
A sticky index rail uses CSS position: sticky to keep a sidebar fixed in the viewport as the user scrolls through long content. Common contents: a table of contents that highlights the active section, document navigation, or contextual metadata.
The pattern is foundational to modern documentation sites (Vercel docs, Stripe docs, every modern technical reference) because it gives readers permanent navigation without consuming page width.
- Long-form documentation
- Reference content with multiple sections
- Articles where readers will jump between sections
- Mobile (no horizontal space)
- Short pages that don't need navigation
- +Highlight the active section using IntersectionObserver
- +Collapse the rail into a collapsed nav on mobile
- −Don't make the rail wider than 280px — it eats reading width
People also ask
What is a sticky-rail layout?
A layout with a fixed side rail (typically 240–320px) that pins as the main content scrolls — usually holding navigation, a table of contents, or filters.
When is a sticky rail the right pattern?
Documentation sites, long-form articles with a TOC, dashboards with persistent filters, and admin panels where navigation must stay reachable at all times.
How wide should the rail be?
240–320px desktop. Below 200px the rail becomes cramped; above 360px it eats too much reading width on standard displays.
How does a sticky rail behave on mobile?
It collapses — usually into a top sheet, drawer, or bottom-anchored toolbar. Pinning a sidebar on mobile destroys the small viewport.