Table of Contents Pro finds H1–H4 headings in your Formatted Text field and builds a clickable table of contents that scrolls to each section automatically—no extra setup needed.
Make it with Workshop
Build your own component with AI
Table of Contents Pro makes it easy to add a clean, customizable Table of Contents to your pages. It automatically scans your connected Formatted Text field, detects all H1–H4 headings, and builds a clickable TOC that smoothly scrolls to each section. Perfect for blogs, articles, documentation, or long-form landing pages.
Features
🧭 Auto Detection: Finds all H1–H4 headings in your content without extra setup.
⚡ Smooth Scrolling: Clicking a heading scrolls directly to the right section.
🎨 Fully Customizable: Control layout, fonts, colors, spacing, and styles in the Framer UI.
🧱 Lightweight: Automatically updates as your CMS content changes.
🧩 Works with CMS: Ideal for dynamic content and blog templates.
Controls
Container
Padding – Adjusts the inner spacing around the TOC.
Border Radius – Rounds the corners of the container.
Background – Sets the background color of the TOC.
Indent Size – Controls the indentation of nested heading levels.
Scroll Offset – Adds spacing between the top of the viewport and the scrolled-to heading (useful if you have a sticky header).
Links
Default, Hover & Active Colors – Define how link colors look in different states.
Link Gap – Adjust spacing between each link item.
Padding (Optional) – Add background and rounded corners to active links for better highlighting.
Active Background – Change the active link background color.
Typography
Title Font – Customize the TOC title’s font, size, and weight.
H1–H4 Fonts – Set unique font styles for each heading level for a clear hierarchy.
Behavior
Smooth Scroll – Turn smooth scrolling on or off for link interactions.
How to Use
In your CMS collection, make sure your content is stored in a Formatted Text field.
Add a Framer Text element to your page and connect it to that CMS field.
Drag and drop the Table of Contents Pro component onto the same page.
The component will automatically detect your H1–H4 headings and display them as a clickable list.
Use the right-hand controls to adjust layout (padding, radius, indent), colors (default, hover, active), and fonts for each heading level.
Adjust the Scroll Offset if you’re using sticky navigation, so the target heading isn’t hidden behind it.
Preview or publish your page — the TOC will update automatically when your content changes.
Preview: https://framer-toc.framer.website/articles/15-daily-habits-to-boost-productivity
