The Simplest Table of Contents in Webflow — No Custom Code

Table of contents

A table of contents collects in-page links to each section so readers can jump straight to what they want. In Webflow, splitting CMS rich text and assigning IDs builds one without custom code.

Hi, I'm Masato.

Writing blog articles, the thought struck me: readers should be able to jump straight to the section they want. So this article builds a linked table of contents using Webflow's CMS.

Except — you can't create in-page links inside Webflow's CMS rich text. In fact, rich text won't accept IDs at all. So here's the workaround: a linked table of contents built with minimal manual work, driven by the CMS wherever possible.

The approach in one line: build the list and links outside the CMS, and everything else with it. Split the CMS rich text into sections, assign IDs, and link to them.

Building the foundation

Three constraints for this build:

• No custom code
• Everything completes inside Webflow's own features
• As few steps as possible

Start with a List element

Make one list item, then copy it up to five.
Note: Make as many as your TOC needs — each gets used later.

Split the CMS by section

Two fields matter here:

• Table of contents
  The field holding the text each TOC entry displays.

• Section 1–5
  Fields for the IDs each TOC entry jumps to. Already writing a blog? Try decomposing your posts into sections.

Assign IDs to the text blocks

Each added rich-text field needs a matching element on the page — and the whole reason for splitting is to give each one an ID.

Where IDs live

Select the gear at top right — the ID field is at the very top. Name each section to match its CMS field (Table of contents 1–5).

Since a TOC at the very top looks odd to me, I added a heading field for the H1 and lead paragraph — six rich-text blocks total. Need more sections? Add them the same way.

Then it's just wiring

• Bind the TOC text to the CMS: assign Table of contents 1–5 in order
• Point each link at its in-page ID: assign each Section
• Bind each rich-text block to the CMS
  

That's a working in-page TOC. But there's one problem left.

The List itself isn't CMS-generated — so a page with only three sections shows empty TOC entries.

The fix is Conditional Visibility.

This setting controls when an element displays. The screenshot's rule: "display when Table of contents 1 is set."

Apply the rule to each item, matching numbers 1–5 top to bottom. Entries without input then hide themselves — three sections, three TOC entries.

Bonus

Apply the same rule to the Div block wrapping the entire TOC and you can produce TOC-less pages just by leaving Table of contents empty.

Then restyle to taste — background, text color, underlines — and it's done.

Can you link mid-paragraph to elsewhere on the page?

Splitting the CMS this way makes it possible, but it's genuinely tedious. As far as I know there's no easy route — though custom code would likely make it trivial.

Summary

• Insert a List as the foundation
• Create a CMS field for the TOC entry text
• Split the CMS content by section
• Assign IDs to the rich-text blocks
• Bind CMS links and text to the list
• Configure display-only-when-set
• Style the list

If your blog is young or just starting, setting this up early is worth considering.

Note: The finished example is this blog's own TOC.

‍