---
title: "AutoTOC"
canonical_url: "https://framerhub.io/components/auto-toc"
last_updated: "2026-06-15T14:46:28.736Z"
---

## AutoTOC

Automatically generate a table of contents for your blog posts or documentation pages. This component scans your page for H2 and H3 headings and creates a clickable, sticky navigation menu that highlights the current section as the user scrolls.

## Features

**Auto-Generation**
No manual linking required. Just drop it on your page, and it automatically finds all `<h2>` and `<h3>` tags to build the hierarchy.

**Scroll Tracking**
The active section is highlighted in real-time as the user scrolls down the page, providing clear context.

**Collapsible Subsections**
Keep your TOC clean by automatically collapsing H3 subsections when they are not in view.

**Customizable Styles**
Full control over fonts, colors, hover states, and active states for both H2 and H3 heading levels.

## Use Cases

**Blog Posts** — Perfect for long-form articles where readers need quick navigation between sections.

**Documentation** — Help users navigate technical docs, API references, and knowledge bases effortlessly.

**Landing Pages** — Make multi-section landing pages easier to explore with sticky navigation.

![AutoTOC Preview](/framerhub/img/components/control/auto-toc.jpg)

## How to Use

### Installation

**VIDEO PLACEHOLDER: Installation Tutorial**

1. Log in to your account at framerhub.io
2. Navigate to framerhub.io/dashboard
3. Find AutoTOC in your Recent Purchases
4. Click the "Copy" button
5. Open your Framer project
6. Paste the component anywhere on your canvas (Cmd/Ctrl + V)

### Customization

Use the property controls to adjust the look and feel:

**Layout**

- Gap between items
- Indentation for H3 subsections

**H2/H3 Styles**

- Font family, size, and weight
- Default, hover, and active colors
- Background colors and padding

**Collapsible Mode**

- Toggle collapsible subsections
- Auto-collapse options

### Quick Tips

**Sidebar Placement** — Place the component in a sticky sidebar for best results. Users can navigate while scrolling.

**Use Standard Headings** — Ensure your page uses proper H2 and H3 text styles in Framer for the component to detect them.

**Preview Mode** — The component only populates with real headings in Preview/Publish mode. Canvas shows placeholder data.

**Dark Mode** — Customize colors for both light and dark themes using the color controls.

## License

**Single Use License** — Use in one client project with full commercial rights. No redistribution. 1 license = 1 client.

## Refund Policy

Due to the nature of our digital products, we are unable to offer refunds, but we're here to assist you with any questions or concerns!

## Why Designers Love This

AutoTOC is the fastest way to add professional, auto-updating navigation to content-heavy pages. No manual linking, no maintenance—just drop it in and go.

---