Introduction

This Table of Contents component for Framer is a flexible way to improve navigation across long-form content while keeping full control over styling and structure.

Component Features

Container ID

Choose the exact content container the component should scan. You can also target multiple IDs by separating them with commas.

Scroll Offset

Adjust the scroll position for anchored headings, ideal for sticky headers and fixed navigation.

Label

Set a custom label for the component, or hide it for a cleaner look.

Divider

Style the divider to better separate the label from the content list.

Content

Build the navigation from h2, h3, and h4 headings while keeping h1 reserved for the main page title.

Indicator

Choose between a bar, bullet, arrow, or no indicator at all.

Styling

Customize fonts, colors, spacing, and hover states to match the design of your article page.