Design

0 views

4 min

How to Create an Automatic Table of Contents from a Webflow Article’s Headings

Learn how to automatically generate a clickable table of contents from the H2s and H3s in your Webflow articles.

In this tutorial, Sandro, cofounder of Gemeos Webflow agency, shows you how to automatically generate a clickable table of contents from the H2 and H3 headings in your Webflow article.

Example

Automatically generated table of contents from headings

Table of contents

Introduction

Webflow is a no-code website builder that generates clean HTML, CSS, and JavaScript.

1. Set up the project

Create a new project in Webflow and choose a starter template.

Connect a domain

In the project settings, go to the Hosting section.

Enable the CMS

The Webflow CMS lets you manage dynamic content without code.

2. Build the design

Use the Designer to create your layout visually.

3. Publish the site

Click Publish to put your site live on your custom domain.

Element	ID or class	Role
Table of contents container div	id='toc'	Injected by the script, hidden by default
Article content area	class='article-content'	Source of the H2/H3 headings being parsed
Article H2 and H3 headings	auto-generated id	Anchor targets for the table of contents

1. Add the table of contents container in Webflow

Create a Div on your page where you want the table of contents to appear (above the article, in a sidebar, and so on). Add the ID toc using a custom attribute. Set it to display: none by default: the script will only make it visible if it finds headings.

2. Add the class to your article area

On the Div that contains your Rich Text or article content, add the article-content class. The script looks for H2 and H3 headings inside that element only.

3. Add the script in Footer code

(function() {
  var content = document.querySelector('.article-content');
  var tocContainer = document.getElementById('toc');
  if (!content || !tocContainer) return;

  var headings = content.querySelectorAll('h2, h3');
  if (headings.length < 2) return;

  var ul = document.createElement('ul');
  ul.style.cssText = 'list-style:none;padding:0;margin:0;';

  headings.forEach(function(h, i) {
    if (!h.id) h.id = 'heading-' + i;

    var li = document.createElement('li');
    li.style.cssText = 'margin-bottom:6px;' + (h.tagName === 'H3' ? 'padding-left:16px;' : '');

    var a = document.createElement('a');
    a.href = '#' + h.id;
    a.textContent = h.textContent;
    a.style.cssText = 'font-size:' + (h.tagName === 'H2' ? '14px' : '13px') + ';color:#6b7280;text-decoration:none;';
    a.addEventListener('mouseenter', function() { a.style.color = '#111'; });
    a.addEventListener('mouseleave', function() { a.style.color = '#6b7280'; });
    a.addEventListener('click', function(e) {
      e.preventDefault();
      document.getElementById(h.id).scrollIntoView({ behavior: 'smooth' });
    });

    li.appendChild(a);
    ul.appendChild(li);
  });

  tocContainer.appendChild(ul);
  tocContainer.style.display = 'block';
})();

good to know

The script automatically generates IDs for headings that don't have one yet (heading-0, heading-1...). If your headings already have custom IDs in Webflow (via custom attribute id=''), the script respects them and uses them as anchor targets. Perfect for long articles with semantically named anchors.

Conclusion

An automatic table of contents improves navigation and SEO for your long articles. Use cases:

Long blog posts with multiple sections
Technical documentation pages
Guides and tutorials with numbered steps

Table of contents generated from this article's headings

Good to know

Heading

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat. Aenean faucibus nibh et justo cursus id rutrum lorem imperdiet. Nunc ut sem vitae risus tristique posuere.

Learn more

4.9/5 • 97 reviews

Lorem ipsum dolor sit amet consectetur.

Lorem ipsum dolor sit amet consectetur. Aliquam orci sagittis dignissim sapien praesent donec.

Let's discuss