How to create a table of contents for CMS collections in Framer.
Nov 20, 2023
In this tutorial, you'll learn how to implement a custom table of contents in Framer.
Get the Code from GitHub
Visit my GitHub repository and copy the code from it.
Open Framer, Go to
Name the code file
Paste the code and save it.
Implement the Table of Contents
Select the content you want to include in the table of contents.
Add the code override file named
TableOfContentand the override function named
Create Component with Variants
Create a component with six variants: h1, h2, h3, h4, h5, and h6.
Ensure the naming is lowercase (e.g., "h1," "h2").
Create a Link variable for links.
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
Implement Design Changes
In my case, I only want to display the headings h1 and h2.
In the code, edit the
HEADING_TO_DISPLAYin my case, it will be equal to
const HEADING_TO_DISPLAY = ["h1", "h2"].
Go to your component and remove the variants that are not h1 and h2.
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.
Share this article