Framer Component

CMS Table of Contents

Auto-generates a dynamic, interactive table of contents from the headings in your CMS content.

Building websites with Framer
How to add components to Framer sites
Dynamic Table of Contents component
Ultimate component library for designers
Building websites with Framer
How to add components to Framer sites
Dynamic Table of Contents component
Ultimate component library for designers
Building websites with Framer
How to add components to Framer sites
Dynamic Table of Contents component
Ultimate component library for designers

Get over 60 components and code overrides for building websites with Framer!
No subscription - pay once, use forever.

Type

Code Component

Free

No

Last Updated

Jun 1, 2024

Instructions

Instructions

Copy and paste the component into your Framer project and use the property controls on the right side to customize and configure it for your website.

Add the Table of Contents component to a CMS detail page.

Connect the formatted text field to the "Content" property using the + button. Optionally connect the page's title field to the "Title" property.

Add a scroll section to the main text content block on the CMS page, then enter the scroll section name into the "Content ID" property. This will enable the currently selected item in the table of contents to move as you scroll down the page and make it possible to click on items to scroll to the corresponding heading.

Customize the fonts, headings, labels, and highlight properties to match your website's design.