Creating a Dynamic Table of Contents in Framer

Here's a tutorial that guides you on how to create a dynamic table of contents using Framer, an interactive prototyping tool. This feature is essential, especially when designing documentation pages or blog posts with multiple sections. The great news is that you don’t need to write a single line of code to achieve this. How amazing is that?

The dynamic table of contents created using Framer focuses on two major functionalities. One, it uses scroll variants and scroll sections to highlight the section of the page currently being viewed. And two, it uses component variants to determine the active and inactive state of the navigation links. These two features work together to enhance user navigation, providing a smooth user experience throughout your site.

Working with Framer Templates

Interestingly, you can start your project from an existing Framer template. For this tutorial, the 'Sender Documentation'- a free template from the Framer Templates website was used. It’s a perfect candidate for creating a table of content, but feel free to choose any template that suits your project needs. Once you've chosen your template, you can begin editing the fields and sections.

Setting Up the CMS for Your Table of Contents

With your template set, the next step is to configure your CMS to pull data dynamically, hence creating a dynamic table of contents. By default, the CMS has one content field that you need to edit depending on your page's content. You can create up to five sections or more, depending on your needs.

The idea is to split your content into different sections that align with your headings (titles). For instance, if your documentation or blog post has five topics, each should have a corresponding section in your CMS. Once you're done creating these sections, you need to set titles for each of them. These titles will be used for your navigation links, referred to as dynamic titles because they pull data dynamically from the CMS.

Adding Your Content Sections and Titles

Next, you need to add your content to the respective sections and set the titles for each. The process involves pasting your content into the fields you edited in the CMS and replacing the default title with your custom title. You can do this for as many titles and sections as needed.

One unique aspect about setting up the CMS in this way is that it allows for dynamic visibility of navigation links. This means that only navigation links that have corresponding content set in the CMS will show up. Hence, you don't have to worry about empty sections showing up in your table of content. The Framer Code takes care of this in the back end, making your work easier and your page cleaner and more professional.

The Final Product

Having set your CMS and added your sections and titles, your table of contents should now be pulling data dynamically from the CMS. If you followed all the steps, you will have achieved a dynamic table of content that works with scroll variants to highlight the currently viewed section and set the active/inactive state for your navigation links.

Although this may sound technical when you're just starting, with a little Framer Tutorials practice, you'll be creating dynamic tables of contents like a pro. So, check out some Success Stories and start creating interactive content with Framer today!