Why reading navigation matters
A 10-minute ops article is not a social feed. Without landmarks, readers bounce mid-way or reread the same block three times.
This piece is intentionally split into several H2 / H3 headings so the sidebar TOC, top progress bar, and clickable heading anchors all light up.
What you already see on the page
Progress bar
The thin turquoise bar at the top tracks scroll through the article body (#article-body). It answers the silent question: where am I?
Table of contents
With two or more section headings, the TOC lists every ## and ###. On desktop it sits sticky in the right column. On mobile, On this page in the toolbar opens it.
Anchors and copy link
Hover a heading: a link icon appears. One click copies the URL with the section hash. Perfect for runbooks and tickets.
Comfort controls
Font scale (A− / A+)
Three sizes: compact, standard, large. Useful late in the day or on a 13" laptop.
Focus mode
Focus hides the sidebar (category, related, contact CTA) and centers text on a comfortable reading width (~42rem). The body stays scannable without side noise.
Back to top
After enough scroll, a floating control returns you smoothly to the header. On long mobile reads, it is a small but decisive detail.
Typographic rhythm
Paragraphs use generous line-height (~1.75). H2 sections are separated by a light rule so they feel like chapters without breaking flow.
The goal is not lifestyle-blog aesthetics. It is lower friction when reading dense material between incidents.
How to write so these features help
- Split into useful sections (
##), not marketing chapters. - Add
###only when a sub-step deserves it. - Put a
:::takeawaysblock at the top or bottom for skimmers. - Avoid ten callouts in a row: TOC often structures enough.
Next demos
The next two articles cover other feature families: runbook (code + checklists) and knowledge graph (links + footnotes + CTA).
Use the right-hand TOC to jump to Comfort controls, then return here with back-to-top.