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.

Get the Code from GitHub

1. Visit my GitHub repository and copy the code from it.

2. Open Framer, Go to Assets and select New Code.

3. Name the code file TableOfContent.

4. Paste the code and save it.

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.

1. In the code, edit the HEADING_TO_DISPLAY in my case, it will be equal to const HEADING_TO_DISPLAY = ["h1", "h2"].

2. Go to your component and remove the variants that are not h1 and h2.

3. Add padding to the left of specific variants for a better look.

Adjust the scroll margin top

If you want edit the SCROLL_MARGIN_TOP when clicking on the table of content you can adjust the SCROLL_MARGIN_TOP variable, in my case it will be equal to const SCROLL_MARGIN_TOP = 160

Congratulations! You've successfully created a custom table of contents for your CMS collections in Framer. Feel free to customize further and explore additional design options. If you have any questions, don't hesitate to reach out for support.