This component is Part of the Essential Components plugin. Browse and insert 30+ components directly in Framer. Start for free
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.
You can customise all the properties i.e padding, Background, scroll behaviour ,e.t.c
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/10-daily-habits-to-boost-productivity
Kai Studio
