#What is Table of Contents?

Table of Contents is a Framer component that dynamically creates structured navigation links based on headings inside your page content. Built specifically for long-form articles, documentation pages, tutorials, and product guides, it helps users quickly scan and jump to specific sections. Instead of manually linking every heading, this component automates the process — saving time while improving usability and overall page experience inside Framer projects.

#Features ⚡

• Automatic Heading Detection: Reads page headings and generates structured navigation links.

• Smooth Scroll Behavior: Clicking an item scrolls cleanly to the corresponding section.

• Sticky Sidebar Option: Keep navigation visible while users scroll.

• Responsive Layout: Optimized for desktop, tablet, and mobile.

• Clean Hierarchy Support: Supports nested heading structures (H1–H6).

• Customizable Styling: Adjust fonts, spacing, alignment, and active link states directly in Framer.

#Included Components/Templates

• Table of Contents Component: Core auto-generated navigation system.

• Anchor Linking Logic: Built-in scroll-to-section functionality.

• Hierarchical List Structure: Supports nested heading layouts.

• Styling Controls: Customize typography, spacing, and active state highlights.

• Responsive Presets: Optimized placement for sidebars or inline layouts.

#Pricing 💸

Table of Contents is available as a marketplace component.

• Premium: $15

• One-Time Purchase: Lifetime usage after payment.

• No Subscription Required: Use in multiple Framer projects.

#Integrations 🧰

Designed to work natively inside Framer’s ecosystem.

• Framer rich text content

• Framer CMS blog collections

• Documentation layouts

• Knowledge base pages

• SEO-focused article structures