---
title: "Table of Content Pro — Framer component · Best of Framer"
description: "$12.00 · Framer component · by Kai Studio · Navigation. Table of contents for framer"
canonical: "https://framer.elliotli.dev/component/table-of-content-pro"
---

[Home](/)/[Components](/components)/[Navigation](/components/category/navigation)/Table of Content Pro

# Table of Content Pro

Table of contents for framer

[View on Framer](https://framer.com/marketplace/components/table-of-content-pro/?via=elliot-li)

![Table of Content Pro preview image 1](https://framer.elliotli.dev/og/component/table-of-content-pro/683d683dde8d282b/1600x1200.jpg)

## Summary

Table of contents for framer

## Description

**This component is Part of the  Essential Components plugin.** Browse and insert 30+ components directly in Framer. [Start for free](https://www.framer.com/marketplace/plugins/essential-components/preview/)

[![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-8r9qbz5j-ab6Mr3Z7UuVd73Xs50NI0JGLlnNEIS)](https://www.framer.com/marketplace/plugins/essential-components/)

**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.
    

![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-54imz9jn-3XxSC5l736cYru4OKSdsHYqqkNyK5F)

-   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](https://framer-toc.framer.website/articles/10-daily-habits-to-boost-productivity)

## Rank history [How rankings work →](/terms#rankings)

-   All · #8676

## Details

- **Author**: Kai Studio
- **Price**: $12.00
- **Published**: 2025-11-04
- **Updated**: 2026-04-05
- **Added**: 2025-10-17
- **Categories**: Navigation

## More like this

-   [Reveal Navigations](/component/reveal-navigations) — Design Supply · Free — A calmer way to open your menu
-   [Collapsible Sidebar](/component/collapsible-sidebar) — Marso Angelov · $10 — Responsive Side Navigation
-   [Dial Picker](/component/dial-picker) — Tanmay Kaper · $14 — A machined dial for your projects
-   [Expanding Side Menu](/component/expanding-side-menu) — Russet Supply · $5 — Animated Framer Navigation