How to Add a Dynamic Table of Contents to Your Webflow Blog
TL;DR:
To create a table of contents in Webflow, follow these steps:
- Design the individual links for your table of contents in a separate Webflow page
- Create a custom field to specify which headings to use in your table of contents
- Add a div to house the table of contents on your blog post page
- Add some code to the end of the <body> tag
What is a Table of Contents in a Blog?
A Table of Contents in a blog post is a list of links to different sections within the post. It allows your reader to quickly navigate to the section of the post that they're actually interested in reading.
This can be especially useful for long blog posts that your readers want to skim.
The table of contents typically appears at the beginning of the post. Sometimes, it may be "floated" on the side of the page so that it is always visible as the reader scrolls down the page.
Why Do You Need a Table of Contents for Your Business Blog?
A Table of Contents Makes Your Blog Post Easier to Navigate
We've already talked about this, but a table of contents helps your users navigate seamlessly through your post.
You help your reader answer their question instead of leaving them to stare staring at a text wall and promptly bounce off your site. This is especially necessary on long pages.
A Table of Contents Helps You Rank Higher on Google
A table of contents also helps search engines understand the structure of your blog post.
When you have direct links to different sections, Google can now extract and use these links in SERP boxes like answers to the People Also Ask section or Featured Snippets.
 |
What Makes a Table of Contents Dynamic?
A dynamic table of contents automatically highlights the current section as the reader scrolls through the post. Your reader can also click on a link to any section in the table of contents. That makes them jump to that section without manually scrolling.
A static table of contents is just a plain text list of sections. Not very helpful.
 |
How to Add Dynamic a Table of Contents in Webflow
You bought a beautiful Webflow template. It looks great. But something is missing — you guessed it, a handy table of contents.
In this guide, we'll show you how to add a table of contents that floats on the left side of your blog. It helps to have some knowledge of code, but it's not strictly necessary.
Section 1: Design the Individual Links in Your Table of Contents
In this section, we will design the individual table of content element links on a dummy page.
Step 1: Create a New Page for Your Table of Contents
Create a new page in your Webflow site. You can name it "Table of Contents", but the name doesn't really matter.
 |
Step 2: Create Links Elements
You're going to create a Link Block element with a Text Block within it. Give it two classes: toc-item and toc-h2.
Add some padding around it, and choose whatever font size and color you like.
 |
In the Selector field, open up the Hover state.
 |
Add some background color and border radius so that it's clear to the user when they're hovering over the link
 |
Copy and paste your link block in the left pane to duplicate it. Put both of them within a container that vertically aligns them to make it easier for you to visualize. Here is the overall structure:
 |
When you copied it, you also applied the same classes. You're going to remove the toc-h2 class and assign it a class toc-h3. You're also going to add some margin to the left side so that it's indented. The end result is:
 |
You should now have two elements that look like this on your page:
 |
You can rinse and repeat for H4, H5 and H6 if you want, but we recommend stopping at H3, or else the indentation levels get overwhelming.
Section 2: Create a Custom Field to Specify Which Headings to Use in Your Table of Contents
Open the settings for your Blog Posts CMS Collection.
 |
Create a new custom field here or type Plain text and label it "Table of Content Headings". Select the Text field type "Single line".
Click Save Collection.
Your end user will type "h2,h3" here for all the H2 and H3 section headings to be listed in the table of contents. If they just type "h2", it will just use the H2 headings.
Section 3: Create a Div to House the Table of Contents
Open your blog posts template page, which you will find under CMS Collection pages.
 |
Step 1: Create the Div
Drag and drop a div element where you want your table of contents to be.
 |
Step 2: Give the Div an ID
While the div is selected, in the right pane, click on the Settings gear icon. Enter toc in the ID field.
 |
You can style the div block however you want. Add padding, margin, left align it, put it in a column, etc. It's up to you. We're just going to place it above the RichText body in our blog post.
Step 3: Wrap Your Rich Text in Div and Give It an ID
Find your Rich Text element that contains the body of your blog post. We need to be able to identify it to extract the headings from it later.
 |
Wrap this Rich Text element in a div if it isn't already.
 |
While the div is selected, in the right pane, click on the Settings gear icon. Enter content in the ID field.
 |
Section 3: Add some Code to the End of the <body> Tag
Open up the settings for the blog posts template page.
 |
Scroll down to the section titled "Before </body> tag"
You're going to add some custom code here.
<script>
function strip(html){
let doc = new DOMParser().parseFromString(html, 'text/html');
return doc.body.textContent || "";
}
document.getElementById("content").querySelectorAll("{Table of Contents Headings field}").forEach(function(heading, i) {
// runs a function for all headings inside your rich text element
let strippedInnerHtml = strip(heading.innerHTML);
// adds section titles to slugs
let str = strippedInnerHtml.replace(/\s+/g, '-').replace(/[°&\/\\#,+()$~%.'":;*?<>{}]/g, "").toLowerCase();
// replaces spaces with hyphens, removes special characters
// and extra spaces from the headings, and applies lowercase in slugs
heading.setAttribute("id", str);
// gives each heading a unique id
const item = document.createElement("a");
// creates an anchor element called "item" for each heading
let displayText = strippedInnerHtml;
let MAX_LENGTH = 120;
let truncatedItem = (displayText.length > MAX_LENGTH) ? displayText.slice(0, MAX_LENGTH-1) + '…' : displayText;
item.innerHTML = truncatedItem;
// gives each item the text of the corresponding heading
("{Table of Contents Headings field}").split(/[, ]+/).forEach(function(x) {
// runs a function for each item in your headings list
if (heading.tagName.toLowerCase() == x) {
item.classList.add("toc-item", "toc-" + x);
// gives each item the correct class
}
});
item.setAttribute("href", "#" + str);
// gives each item the correct anchor link
document.querySelector("#toc").appendChild(item);
// places each item inside the Table of Contents div
});
</script>This code was inspired by the Flowrite blog.
Replace the two places in the above code where it says {Table of Contents Headings field} with the actual field you created in Section 2.
 |
The final output should look like this:
 |
In case you're curious, the above code does the following:
- It searches for all section headings matching the ones provided in the custom field. So if you entered "h2,h3", it will search for all H2s and H3s.
- For each heading it finds, it pulls out the heading text.
- It creates a URL-friendly version of the heading. So a heading with text "My Important Section" will be turned into
my-important-section. It then attaches an ID to each heading HTML element so that your browser can scroll down to the section automatically. - It creates an item with the text (but truncated if it's too long) in the Div with ID
tocthat you created earlier. It wraps it in a<a href>link element. This is called an anchor link. It also gives it the same classestoc-itemandtoc-h2ortoc-h3you defined earlier so that the styles get applied. It links it to the respective heading.
Publish your site, and you're good to go!
When someone writes a new blog post, just make sure they specify the headings in the table of contents in the custom field you created.
Quick FAQs
Is Webflow a Content Management System?
Webflow is a content management system (CMS) that allows users to have complete control over the structure and design of their website's content. With Webflow CMS, users can easily manage and customize their content layout and design across their entire site.
Why is Webflow Considered Better than WordPress?
WordPress is a trusted everyday solution for blog hosting — the sheer number of available plugins makes it a delight to design, and it has established a name for itself in the online world.
But for the modern startup blog, we think Webflow is the better choice. Choosing the more modern approach avoids technical debt. It's much more robust for a B2B SaaS company because you're not stuck piecing together a "Frankenstein monster" of open-source plugins.
Webflow is also gaining market share, with 4.1 billion page views monthly — and it's clear why. Webflow does everything for you regarding your blog's functionality, allowing total creative freedom through visual access and control of underlying code. This, combined with its speed and the resources on Webflow University, make it an excellent choice for a B2B blog.
We cover this in more detail in our post about Webflow vs WordPress.
You're One Step Closer to Perfect CRO with a Table of Contents on Webflow
A table of contents makes your article easier to navigate — for both people and Google.
In 30 minutes, you've set up a table of contents on your Webflow blog. You've improved your chances of articles ranking on Google and are helping readers find what they need quickly (for which they will be very thankful; if only recipe sites would do the same).
Your Webflow site is probably a leaky bucket and losing leads. We help you publish content seamlessly to your Webflow site and can help you turn your site a conversion machine. Feel free to reach out to us.
Subscribe to newsletter
No-BS growth strategies and content marketing tactics in your inbox twice a month.
Related Reading
Some other posts you might find helpful
