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?
TL;DR
- Use heading tags (H2/H3) in CMS Rich Text fields and add unique IDs to each section manually or via a small JavaScript snippet.
- Create a TOC above the post with text links pointing to these IDs, optionally using CMS reference fields for dynamic generation and enabling smooth scroll in Webflow settings.
To automatically generate a Table of Contents (TOC) for CMS blog posts in Webflow without plugins or complex code, you can use Webflow’s built-in CMS structure and a bit of native interaction logic.
1. Structure Your Blog Content with Heading Elements
- Ensure blog content in your CMS uses standard heading tags—such as H2 or H3—to define your section titles.
- In your Rich Text field (in the CMS Collection), apply the correct semantic tags when creating content using the Webflow Designer or Editor.
2. Add Unique IDs to Headings
- Select the Rich Text Block in the Designer that's bound to your blog content.
- Use a custom embed block at the top of the blog post template to add a small JavaScript snippet that dynamically adds IDs to all H2 or H3 tags based on their text (if you're comfortable with minimal script).
- Alternatively, manually add anchor IDs in your CMS content using custom embeds in the Rich Text field:
- Before an H2 like “Introduction”, add:
<div id="introduction"></div>.
3. Create a Table of Contents Section
- Add a div block above your blog post content. This will become your TOC container.
- Manually create links that correspond to your headings using Link Blocks or Text Links.
- Set their link destination to
#your-heading-id(matching the ID set above).
Example:
- Text Link: “Introduction” → Link setting:
#introduction
4. Use CMS Reference Fields If Needed
- If you prefer managing the TOC items dynamically, add a Multi-reference field in your CMS for listing TOC sections.
- Each reference can include:
- Section Title
- Anchor ID or URL fragment (#your-id)
- Bind this reference list in the template to show the TOC.
5. Optional: Add Smooth Scroll
- To create a smooth scrolling effect when a user clicks the TOC link:
- Select the Body element.
- In the right-side panel, set Scroll Behavior to Smooth under “Typography.”
Summary
Use Webflow's CMS and basic anchor linking to create a lightweight, maintainable Table of Contents. Add IDs manually or with light custom code, refer to them using Text Links, and structure your Rich Text with proper heading tags. This keeps your solution entirely within Webflow—no external plugins required.