The Collapsible Table of Contents makes navigating long pages easy. It automatically builds a TOC from your headings and lets you control its look, links, and collapsible sections.
Make it with Workshop
Build your own component with AI
The Collapsible Table of Contents makes navigating long pages easy. It automatically builds a TOC from your headings and gives you control over how it appears.
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 to the Table of Contents.
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. In this example, it’s placed just above the content field, but you can position it on the left, right, or above the content—as long as it remains on the same page as the connected CMS content.
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. The title bar also acts as a toggle to open and close the TOC.
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 and adjust the scroll offset for layouts with sticky navigation.
Visibility & Behavior – Control which heading levels appear using Show H2, Show H3, and Show H4, choose whether the TOC starts open on page load, and decide if nested sections should be expanded by default.
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.
Full access to the CollapsibleTOC, including all features and configuration options.
Future updates to the component at no additional cost.
A Remix link with a working demo, showing the component used in a real CMS detail page with structured content and headings.
Clear setup instructions, covering content structure and configuration options.
Ongoing support, so you can get help if you run into issues or have questions about setup or usage
Preview: https://tableofcontentsframer.framer.website/articles/collapsible-table-of-contents
