Webflow: Generate a dynamic Table of Contents for CMS-based pages

Case: Create an interactive Table of Contents for a long-read article on Webflow like on this page

In-page linking and interactive Table of Contents could help not only with navigation, but also improve the page's SEO performance. Structured ToC wrapped into <nav> tag helps search engines to understand the structure of your page and increase chance to get Jump Links in Google search results.

You can do it easily without code on a static page, while linking to Headings inside RIch Text element on a CSM collection-based Webflow page will require some code to extract headings, assign IDs to them for anchor linking and generate your Table of Contents.

Method:

• Identify a Rich Text element.
• Extract Headlines and their contents.
• Assign IDs to headings.
• Print a ToC inside a <div> block.

Step-by-Step Guide

The ToC will be generated dynamically from headings within a specific rich text element and inserted into a designated container.

1: Prepare your HTML Structure

• Add a Rich Text field to your CMS collection and create a Rich Text block on the page template with the ID rich-text-element. Link it to this field.
• Ad a <div> block as a container for the ToC with the ID toc-container.

2: Add JavaScript to Generate the ToC

Insert the following script to the </body> custom code section of your Collection template page to dynamically generate the ToC based on the headings within the rich-text-element. 

• We will use h2, h3, and h4 headings only.
• We will need to automatically assign unique ID's for each heading inside the Rich Text element to enable anchor linking.
• To make our ToC readable, we will add indents to each its item based on the heading level it links to.

<script>
// Function to generate the ToC
function generateToc() {
 // Select the rich text element by its ID
 var richTextElement = document.getElementById('rich-text-element');
 if (!richTextElement) return '';

  // Query all h2, h3, and h4 elements within the rich text element
  var headings = richTextElement.querySelectorAll('h2, h3, h4');
  var toc = '';

  // Generate an ID for each heading for anchor linking if it doesn't have one
  headings.forEach(function(heading) {
   var tagName = heading.tagName.toLowerCase(); // Get the tag name in lowercase
   var id = heading.id ? heading.id : heading.textContent.trim().toLowerCase().replace(/\s+/g, '-'); // Generate a unique ID by trimming, converting to lowercase, and replacing spaces with hyphens.
   heading.id = id; // Assign the id to the heading

    // Dynamically set classes to define indents for each ToC item based on the level of heading it links to. We don't touch h2 as it won't have indent
    var indentClass = ''; // Variable to hold the class for indentation
   if (tagName === 'h3') {
     indentClass = 'indent-1'; // Add indent-1 class for h3 elements
   } else if (tagName === 'h4') {
     indentClass = 'indent-2'; // Add indent-2 class for h4 elements
   }

    // Create a list item with an anchor link pointing to the heading ID. Assign a class to each <li> according to the heading level.
    toc += '<li class="' + indentClass + '"><a href="#' + id + '">' + heading.textContent + '</a></li>';
 });

  return toc;
}

// Function to insert ToC into the container
function insertToc() {
 var toc = generateToc(); // Generate the ToC
 var tocContainer = document.getElementById('toc-container'); // Select the #toc-container element
 tocContainer.innerHTML = '<nav><ul>' + toc + '</ul></nav>'; // Wrap the ToC into a <nav> and <ul> elements
}

// Call insertToc function when the page is loaded
window.onload = insertToc;
</script>

Key functions:

• generateToc(): Extracts h2, h3, and h4 headings from the Rich Text element, assigns IDs to them, and creates a structured list of links pointing to these headings.
• insertToc(): Inserts the generated list into a container element and wraps it into <nav> and <ul> tags.
• window.onload: Ensures the ToC is created and inserted after the page is fully loaded.

3: Add CSS for the ToC Styling

Insert the following CSS to style the ToC into the <head> of your page. It includes styling for the list, links and indentation for different heading levels to show the structure.

You can also create a div block on the page with same ID's, classes and structure to style it via Webflow designer interface, but we put the css code here to show the structure.

<style>
/* Styles for ToC list */
#toc-container ul {
 list-style: none; /* Remove bullets from the list */
 padding-left: 0;
}

/* Styles for ToC list items with indentation levels — we use .indent-# classes to show the logic. */
#toc-container .indent-1 {
 padding-left: 20px;
}
‍
#toc-container .indent-2 {
 padding-left: 40px;
}

/* Styles for ToC links */
#toc-container a {
 display: inline-block;
 font-family: Poppins;
 font-size: 16px;
 text-decoration: underline 0.5px;
 color: #d8d8d8;
 transition: color 0.3s;
 line-height: 1.2;
}
‍
/* Styles for link on hover */
#toc-container a:hover {
 color: #cff7a4;
}
</style>

‍

Done!

PS. Don't forget to use descriptive yet short headings — this will improve SEO even more along with the clickable ToC. Share your thoughts and cases in comments.