A drop-in documentation module for HubSpot — an auto-generating, sticky table of contents with in-place Docs, FAQ & Contact sections, deep links, JSON-LD, and a built-in form. Clean monochrome by default, and every font, color, space, and word is yours to restyle and translate.
Docs & Table of Contents Pro turns any HubSpot page into a polished, navigable knowledge hub — auto-built tables of contents, instant in-page section switching, deep-linkable anchors, and a styling system so complete that you can make it look like any brand on earth.
Docs & Table of Contents Pro is a self-contained HubSpot module that reads the headings inside your content and builds a live, scroll-synced table of contents around them. It is designed for documentation pages, help centers, knowledge bases, long-form guides, product manuals, legal pages, and anywhere a reader benefits from being able to jump straight to the part they need.
Out of the box it ships with a clean, monochrome look inspired by modern developer-docs UI — restrained type, generous whitespace, a subtle active indicator. But nothing about that look is fixed. Every color, font, border, radius, and spacing value is a field you control, so the module is equally at home on a minimalist startup site or a richly branded enterprise portal.
Marketers building help centers, product teams shipping documentation, agencies who need one flexible module that adapts to every client brand, and anyone tired of hand-maintaining anchor links. If your content has headings, this module gives it navigation for free.
The module installs like any other HubSpot module — there is no theme dependency and no setup script to run.
It works on landing pages, website pages, and inside templates and global partials. Because it carries its own styles and vanilla JavaScript, it does not matter which theme — or no theme — the page is built on.
The happy path takes about a minute.
Everything after this is refinement — picking a layout, dialing in the scroll offset, and styling it to match your brand.
Content is organized into sections. You can add as many as you like, and each one appears as a top-level entry the reader can switch to. Switching is instant: the module swaps the visible content without a full page reload, updates the URL hash to the section’s slug, and rebuilds the table of contents for whatever section is now active. That means each section has its own, self-contained TOC drawn from its own headings.
The core section type. You paste rich text and the module harvests its headings to build the TOC. Fields include the section label (what shows in the switcher), the slug, and the rich-text content body. Docs sections emit TechArticle structured data automatically.
A question-and-answer section. Each item has a question and a rich-text answer; questions become the TOC entries. FAQ sections emit FAQPage JSON-LD so your Q&A can earn rich results. Fields include the section label, slug, and a repeatable list of question/answer pairs.
A section that renders a contact card with an embedded HubSpot form. Fields include the section label, slug, a heading, supporting text, and the HubSpot form id to embed. See The contact form.
Content is authored as rich text, so you write the way you already do in HubSpot. The module reads the document structure to build navigation.
The table of contents is generated from the headings in your content — nothing else. By default, every Heading 2 and Heading 3 becomes a TOC entry (H2 at the top level, H3 nested beneath it). You can include H4 as well by switching Behavior & Detection → Heading Levels to “H2, H3 and H4”.
The headings must be real heading styles: in the rich-text editor, select your text and choose Heading 2 or Heading 3 from the paragraph-format dropdown. Bold text is not a heading — it will not appear in the table of contents. You never add anchors by hand; the module slugifies each heading and generates a stable anchor for it automatically, rebuilding the TOC whenever you rename or reorder a heading.
Paragraphs, ordered and unordered lists, blockquotes, code and code blocks, images, and links are all supported and styled by the module’s Article Content settings. Write naturally; the navigation keeps up.
The module ships with three layouts. Pick the one that fits the page’s shape and reading pattern.
The classic docs layout: content on the left, a slim TOC that sticks to the right as the reader scrolls. Best for long-form articles on wide pages where you want the navigation always visible but out of the way.
The TOC lives in a left sidebar, content to its right. Feels like a traditional knowledge base or product manual. Best when navigation is the primary wayfinding tool and you have many sections.
The TOC collapses into a horizontal bar above the content. Best for narrow pages, embedded contexts, or mobile-first designs where vertical space for content matters more than a persistent side rail.
This is the single most common setup step, so do it early. If your site has a fixed/sticky header, anchor jumps will land underneath it unless you tell the module how tall that header is.
Set the Scroll Target Offset field to the pixel height of your fixed header. When a reader clicks a TOC entry or lands on a deep link, the module subtracts this offset so the heading clears your header.
The Sticky Top Offset controls how far from the top the TOC itself pins when it becomes sticky — set it to match your header so the rail doesn’t tuck under it either.
Key rule: Scroll Target Offset must equal your fixed header height. If jumps hide content under the header, this value is too small.
Every heading and section gets a stable, shareable anchor so any part of your docs is directly linkable.
Headings are converted into clean, URL-safe slugs (lowercase, hyphenated). Copy the link from any TOC entry and it points straight to that heading.
If two headings would produce the same slug, the module de-duplicates them automatically. It also never overwrites an existing id already present in your content — your hand-set anchors are respected.
Because deep-link jumps honor the Scroll Target Offset, a shared hash link lands cleanly below any fixed header rather than under it.
You can enable an optional filter box above the table of contents. As the reader types, it instantly filters the TOC entries down to matching items — no page reload, no server call. It’s ideal for long documents where scanning a thirty-item list is slower than typing two letters. The filter is fully styleable (see Filter box) and can be turned off entirely if you don’t need it.
The module emits JSON-LD structured data automatically so search engines understand your content. Docs sections emit TechArticle; FAQ sections emit FAQPage. You don’t configure anything — it’s generated from the content you already wrote.
{
"@context": "https://schema.org",
"@type": "FAQPage",
"mainEntity": [{
"@type": "Question",
"name": "How do I set the scroll offset?",
"acceptedAnswer": {
"@type": "Answer",
"text": "Set Scroll Target Offset to your fixed header height."
}
}]
}A Contact section embeds any HubSpot form by id. In the section’s settings, paste the form id into the form field and the module renders it inside a contact card alongside your heading and supporting text. Because the form is rendered through the module, everything about it is styleable — the card, the labels, the inputs, the checkboxes and radios, and the submit button. See Styling & full theming control for the full list of form fields.
This is the heart of the module. The promise is simple: every colour, font, size, spacing, border, radius and shadow is a real field in the Style tab — if you can see it, you can restyle it. (Only internal structural values like z-index, transition timing and SVG geometry stay fixed.) The default is a clean monochrome look inspired by modern developer UI, but it’s only a starting point. Every value below is a real field in the Style tab, so you can repaint the entire module to match any brand without touching code.
Typography is deliberately simple: you pick just two typefaces. The Body Font is used everywhere — the table of contents, the filter box, the mobile menu, the contact form, and the article body. The Headings Font is used for the article headings (H1–H6); leave it on “Default” and it matches the body font, which is what most brands want. You don’t hunt through a dozen per-element font pickers — set the family once (or twice) and every element follows. Sizes, weights, transforms, letter-spacing and colors for each element stay individually adjustable in their own sections.
Every color is a picker: item text, hover, active, the TOC background, the container and divider borders, and the active-indicator color. Point these at your brand palette and the whole rail re-skins instantly. There are no baked-in grays you can’t reach.
The marker on the currently-active TOC entry is configurable. Choose its style — left bar, filled, dot, or underline — and set its color and thickness to taste.
Tune container padding, item padding, the indent applied per nesting level, the gap between sections, border width, border radius, and shadows. This is where you move between a dense, compact list and an airy, spacious one.
Every article element is covered: a size and color for each heading level H1, H2, H3, H4, H5 and H6 (all sharing the Headings Font), the body line-height, link color, blockquote accent and text color, inline code and code-block colors, the gap and divider between sections, and the content max width for comfortable line length. Body text font, size and color come from the Body Font.
Style the filter input fully: background, text color, placeholder color, border, the search icon, focus ring, radius, padding, and text size (it uses the Body Font). It can match the rail or stand out as a distinct control.
Every form element is a field — all using the Body Font. Style the card background, border, radius, and padding; the label size and color; input size and color; placeholder color; input background, border, radius, and padding; checkbox and radio styling; the submit button background, hover, text size and color, radius, and padding; and the error-message color. The embedded HubSpot form inherits all of it.
Set the rail/sidebar width, the gap between the TOC and content, the sticky top offset, the scroll target offset, the TOC max height (for scroll-within), and the responsive breakpoints at which the layout collapses for mobile.
The module is fully localizable because every visible string is an editable text field. There is nothing baked into the code that you can’t retype.
Retype any of these in any language — Chinese, Arabic, Spanish, anything your audience reads. Your article and FAQ content is rich text you author in your own language too, so a fully translated docs experience is just a matter of typing.
The module is built to be usable and fast.
The table of contents is a proper nav landmark, the active entry is marked with aria-current, navigation is fully keyboard operable, motion respects prefers-reduced-motion, and the default palette meets WCAG AA contrast.
It’s vanilla JavaScript with zero dependencies — no jQuery, no framework. Scroll-syncing uses IntersectionObserver rather than scroll-event polling, so it stays smooth even on long pages.
Quick answers to the questions people ask before dropping Docs & Table of Contents Pro onto a page.
No. The module reads your H2 and H3 headings and generates a stable, URL-safe anchor for each one automatically. You just write normal headings — no id attributes, shortcodes, or special markers. Rename or reorder a heading and the anchors and table of contents update themselves.
Yes. Paste your existing rich text into the content field and the module builds the table of contents from whatever headings are already there. It never rewrites your text or overwrites an id you have already set by hand — your existing anchors keep working alongside the generated ones.
They will, once you set the Scroll Offset field to your header’s height. Every jump — from the TOC, a deep link, or a section switch — then stops clear of the fixed header so the target heading is fully visible. This is the single most common setup step, which is why it has its own field.
The monochrome look is only the default. Every color, font, size, radius, border, and spacing value is an editable field wired through CSS variables, so you can repaint the whole module to your brand without writing any CSS. Nothing is hardcoded — the clean black-and-white palette is just a tasteful starting point.
The module emits JSON-LD automatically: TechArticle for the Docs section and FAQPage for the FAQ section, with each question and answer mapped for you. This can help search engines surface rich results and FAQ snippets. There is no separate schema field to maintain — it is generated from your content.
Yes. The table of contents is a real, keyboard-focusable navigation list with proper links, the active section is conveyed semantically rather than by color alone, and smooth scrolling respects the reader’s reduced-motion preference. It is built to be usable with a screen reader out of the box.
It does. The side rails collapse gracefully on narrow screens, and the Top Bar layout is designed specifically for mobile-first and narrow-column contexts, keeping navigation accessible without crowding the text. Section switching and deep links behave the same on phones as on desktop.
No. Anchor generation, scroll-spy, search filtering, and section switching all run on lightweight vanilla JavaScript with no jQuery and no heavy framework. There are no render-blocking dependencies, so the module stays fast even on long pages.
Send us a message
Fill this in and we’ll get back to you — this is a live HubSpot form, styled entirely by the module’s settings.