An auto-generating, sticky table of contents that builds itself from your page headings — no manual anchor tagging, ever. Scroll-spy active highlighting, deep linking with sticky-header offsets, an optional multi-page documentation sidebar, and JSON-LD structured data baked in. Every pixel styled from the editor. Vanilla JS, zero jQuery.
Below is a single module instance — nothing on it is hand-coded. Switch between Docs, FAQ and Contact from the left without leaving the page; each section builds its own table of contents from its headings, deep-links update the URL, and the Contact section holds the form. Default look is a clean monochrome UI — every value is editable.
Everything you need to set it up, plus the rules that keep it working on messy real-world pages.
Docs & Table of Contents Pro builds a table of contents automatically from the headings already on your page — you never hand-tag anchors. On render it scans your content, generates a URL-safe id on every heading (without ever overwriting an existing one), and builds a navigable, scroll-spy TOC that highlights the section the reader is currently viewing. It also ships an optional multi-page documentation sidebar and outputs JSON-LD structured data so search engines and AI assistants can understand and cite your sections. Vanilla JS, no jQuery, no external libraries.
That's it. Sensible defaults mean it looks good and works the instant it's dropped on a page, before any configuration.
On load (and again after the page fully loads), the module scans the content scope for headings, then:
Getting Started → #getting-started).id, so your manual deep links keep working.#getting-started-2).MutationObserver) when other modules inject headings after load.The Content Scope field (Content > Behavior & Detection) controls which part of the page is scanned.
main, article, common blog/body containers, and picks whichever holds the most headings)..blog-post__body or #main-content to target a specific container. Headings inside the module itself are always ignored.Choose which levels to include: H2 only, H2 and H3, or H2, H3 and H4. Nested levels are indented to show document hierarchy.
Two offsets live under Style > Layout Controls:
#hash.IntersectionObserver (not scroll-event math) for accuracy and performance, and highlights the topmost section above the offset line.#hash scrolls to that section with the offset applied.An optional live filter (Content > Show Filter / Search Box) narrows the table of contents — and the multi-page nav — as the reader types. It is fully styleable under Style > Filter / Search Box: background, text, placeholder, border, icon and focus-ring colors, font, border radius, vertical padding, and a show/hide-icon toggle.
Turn on Content > Help / Contact CTA to add a "Still have questions?" card at the bottom of the TOC panel — the standard docs pattern. Pick a HubSpot form to embed it inline (styled to match your module settings — inputs, labels, focus ring, and submit button all themed), or leave the form empty to show a contact button instead. Fully styleable under Style > Help / Contact Card (background, border, heading/text colors, button colors, radius). Hidden automatically in the Top Bar layout.
Enable Content > Multi-Page Navigation to add a persistent list of doc pages above the on-this-page TOC (best with the Sidebar Left layout). Each row is a link with an optional group heading.
When headings are found, the module emits a <script type="application/ld+json"> block describing the page's section structure — built from the headings actually detected, so it always matches what's on the page. Choose the type under Content > SEO / Structured Data:
WebPageElement per H2, each with its anchor URL. Great for docs/guides and Google's "jump to section" behaviour.Article type.<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "TechArticle",
"headline": "Getting started with headless commerce",
"url": "https://example.com/guide",
"hasPart": [
{ "@type": "WebPageElement", "name": "Why teams move to headless",
"url": "https://example.com/guide#why-teams-move-to-headless" }
]
}
</script>The module only emits schema when there are headings to describe, never empty or malformed. Turn it off under SEO / Structured Data if you manage schema elsewhere.
Below the configurable breakpoint (Style > Responsive), the TOC switches to:
The Top Bar always collapses to a sheet on mobile.
Dedicated HubSpot font fields for the TOC title, top-level items, nested items, and the active item — family, weight, size and color in one control. Plus text-transform per level, title letter-spacing, and item line-height.
Container background and border, hover text and background, active background, active-indicator color, and the reading-progress bar fill + track — all with opacity.
Left border bar (with adjustable thickness), filled background, dot marker, bold weight only, or none.
Background, text, placeholder, border, icon, focus colors; font; radius; padding; show/hide icon.
Container padding, item vertical/horizontal padding, indent per nesting level, container border width and radius, item radius, and an optional container shadow (off by default).
Width (rail/sidebar), gap to content, sticky top offset, scroll target offset, max height with internal scroll for very long pages, and top-bar inner max width.
The mobile breakpoint at which the layout switches to its mobile behaviour.
<nav> landmark with a configurable aria-label.aria-current="location".overflow: hidden on the page can prevent sticky — use overflow-x: clip instead if you must clip.This page shows the default Sticky Right Rail layout against one comprehensive article: auto-generated anchors, scroll-spy highlighting, the filter box, deep linking (click an entry and watch the URL hash), the reading-progress bar, an embedded contact form, and TechArticle JSON-LD — all from default "cool UI" styling (left-bar indicator, indigo accent, Inter). The Sidebar Left and Top Bar layouts described above are the same engine with a different layout setting.