About Table of Content
This component is Part of the Essential Components plugin. Browse and insert 30+ components directly in Framer. Start for free
The Collapsible Table of Contents automatically builds a TOC from your headings and gives you control over how it appears.
How to Set up
In your CMS collection, ensure your page content is stored in a Formatted Text field (for example, Content).
Structure your content using H2, H3, and H4 headings.
These headings will automatically be detected and added
Add a Text element to your CMS detail page and connect it to this CMS field.
Drag the CollapsibleTOC component onto the same page where your CMS content is rendered.
Customization
You can fully customize the appearance and behavior of the Collapsible Table of Contents using the component’s property controls.
Container – Adjust padding, border radius, background color, indentation for nested items, and scroll offset to account for fixed or sticky headers.
Title – Customize the title font, background color, text color, and toggle icon size and color.
Links – Set default, hover, and active link colors, and control vertical spacing between links and nested items.
Heading Fonts – Customize typography separately for H2, H3, and H4 items to clearly distinguish hierarchy.
Numbers – Customize the number font, size, padding, border radius, and background color.
Scrolling – Enable smooth scrolling when clicking TOC links
Visibility & Behavior – Control which heading levels appear using Show H2, Show H3, and Show H4,
Tips for Best Results
Use a proper heading hierarchy (H2 → H3 → H4) for correct nesting.
Adjust the scroll offset for pages with fixed headers.
Customize styling to match your page design for a seamless look
Preview: https://tableofcontentsframer.framer.website/articles/collapsible-table-of-contents
