Anchor Nav Shell
A full-page docs shell with a slim topbar, a column of anchored section cards, and a sticky On this page rail tracking the active section.
A full-page docs shell with a slim topbar, a column of anchored section cards, and a sticky On this page rail tracking the active section.
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
Anchor Nav Shell is the long-document frame: a slim topbar carrying the Acme badge and four nav links (Docs active), a wide content column of stacked section cards, and a sticky right hand On this page rail. The shipped page is a Security overview with Authentication, Access control, Data retention, and Audit logs sections, each an anchored card the rail scrolls to. Data retention holds a definition list of four rows keyed by data class.
Nav, anchors, and retention rows are three const arrays; the rail marks the active anchor and every section uses scroll-mt so a heading never hides under the topbar when jumped to.
Reach for this shell whenever a page runs long enough that readers need a map: security and compliance overviews, API references, changelog roll-ups, or a dense policy page. Wire the anchors to your section IDs, drive the active state from a scroll observer, and replace the section cards with your own prose or tables.
A natural flow around it on an Application Pro page:
Before
After
One strong use is the security overview. Other anchored long-form pages:
Tip: the rail is hidden below lg on purpose; on narrow viewports surface the same anchors in a collapsible menu above the content instead.