A reusable drawer that scans the scroll container for [data-toc] markers and builds a nested, collapsible outline. Sub-tabs marked with [data-subtab] are listed above the sections, so picking one switches the shell's view instead of scrolling. Sections get stamped addresses (3, 3B) matching the numbering shown in the headings themselves.
Also called: table of contents · section pullout · jump to section · settings outline
- 1Any settings section marks itself with data-toc="Title"; a nested one adds data-toc-level.
- 2SectionTocDrawer rescans on tab change and on DOM churn, guarded by a signature so its own re-renders do not loop.
- 3Scroll position picks the active entry — including correctly choosing the LAST section when the page cannot scroll further.
- 4Open/closed state is remembered in localStorage.
Settings tabs grew long enough that a page like Client Portal or Integrations became a scroll hunt. Earlier active-section logic failed at the bottom of a page because the page cannot scroll past its end, so the last section never lit up.
- Long configuration pages had no map and no fast jump.
- Sub-tabs inside a shell were invisible until you noticed the small tab strip.
See it on your own jobs
Twenty minutes, your numbers, no slide deck. We’ll build one of your real buildings in front of you and send you the estimate link at the end — yours to keep either way.
or keep browsing features →