Page Outline Rail
A sticky on this page outline rail listing document anchors along a guide line with the active section marked, beside doc content with a code sample.
A sticky on this page outline rail listing document anchors along a guide line with the active section marked, beside doc content with a code sample.
Search blocks by description or jump to a page.
The source for every Application block is included with Basic and Pro. Pick a plan to copy the code.
Already purchased? Log in
Page Outline Rail pairs a document with an on this page outline. The sticky right column, 56 wide and shown from lg up, lists the anchors along a left guide line: Overview, Limits by plan, Rate limit headers active with a filled left border, Handling 429 responses expanded to two indented subsections (Retry with backoff, Queue writes), and Best practices, with Suggest an edit and Back to top links below a rule. Beside it the article carries real content so every anchor has a target: an API rate limits heading, an Overview paragraph, a Limits by plan table for Free, Pro, and Enterprise, a monospace rate limit headers sample, and a Handling 429 responses section.
The outline array carries a label, an active flag, and optional children. The active anchor uses a solid left border and stronger text while the rest use a transparent border that fills on hover, and children render indented under their parent. The rail is position sticky at top-8, so it reads as a scroll spy while shipping fully static.
Reach for this block on any long documentation or reference page where readers need to jump between sections. Generate the outline from your rendered headings and wire the active anchor to an IntersectionObserver so it tracks the heading in view.
A natural flow around it on an Application Pro page:
Before
After
One strong use is the reference page outline. Other configurations:
Tip: the active anchor is a boolean here; wire it to a scroll spy so it tracks the section in view as the reader moves down the page.