How can I automatically generate a Table of Contents for my blog posts or CMS items using Webflow without the need for plugins or complex code?
- Structure your blog with H2, H3 headings, ensuring each has an ID.
- Add a Div Block for the TOC and assign it an ID (e.g., "toc").
- Insert custom JavaScript in Page Settings > Custom Code to dynamically generate TOC links from headings.
- Optionally, enable smooth scrolling with a small CSS snippet in the
<head>.
You can automatically generate a Table of Contents (TOC) in Webflow for your blog posts or CMS items using Webflow’s built-in elements and a little custom JavaScript. Here’s how to do it without third-party plugins or complex code.
1. Structure Your Blog Post Properly
- Use Heading elements (H2, H3, etc.) in your Rich Text Block to define sections.
- Add an ID to each heading to enable smooth scrolling. Webflow automatically creates IDs for headings, but you can also manually set them.
2. Create a TOC Section
- Add a Div Block where you want the TOC to appear.
- Inside it, insert a Text Block or List where your links will dynamically populate.
- Set an ID (e.g., "toc") for this section.
3. Add Custom JavaScript for Auto-Generation
Go to Page Settings > Custom Code and place this before
</body>:
```javascript
document.addEventListener("DOMContentLoaded", function() {
let tocContainer = document.getElementById("toc");
let headings = document.querySelectorAll(".blog-content h2, .blog-content h3");if (tocContainer && headings.length) { let tocList = document.createElement("ul"); headings.forEach((heading, index) => { let id = heading.id || ("heading-" + index); heading.id = id; let listItem = document.createElement("li"); let link = document.createElement("a"); link.href = "#" + id; link.textContent = heading.textContent; listItem.appendChild(link); tocList.appendChild(listItem); }); tocContainer.appendChild(tocList);}});
```Modify the
.blog-contentselector if your Rich Text Block has a different class.
4. Enable Smooth Scrolling (Optional)
- In Webflow Site Settings > Custom Code, add this inside
<style>in the<head>section:
```css
html { scroll-behavior: smooth; }
```
Summary
This method dynamically generates a Table of Contents inside a designated TOC section by scanning your blog’s headings and automatically creating anchor links. It works without third-party plugins and only requires lightweight JavaScript.