How to Create a Table of Contents for CMS Collections in Framer

In this tutorial, you'll learn how to implement a custom table of contents in Framer.

Implement the Table of Contents

1. Select the content you want to include in the table of contents.

2. Add the code override file named TableOfContent and the override function named withContent.

Create Component with Variants

1. Create a component with six variants: h1, h2, h3, h4, h5, and h6.

2. Ensure the naming is lowercase (e.g., "h1," "h2").

3. Create a Link variable for links.

4. Create a Title variable for the content.

To use the component, you will have to select the component and add the code override file named TableOfContent and the override function named withTableOfContent.

Implement Design Changes

In my case, I only want to display the headings h1 and h2, so I will set the HEADING_TO_DISPLAY variable as const HEADING_TO_DISPLAY = ["h1", "h2"];.

Adjust the scroll margin top

If you want to edit the scroll top offset, you will need to modify the SCROLL_MARGIN_TOP variable. By default, it's set to const SCROLL_MARGIN_TOP = 160.

Congratulations! You've successfully created a custom table of contents for your CMS collections in Framer.
If you have any questions, don't hesitate to reach out for support.