Dynamically Generated ToC with Webflow CMS

2022-01-23
, most recent update.

Generating ToC’s based on h2 and h3 headings of a rich text CMS element with active states in a sticky Table of Contents, as done by flowrite.

Follow the (flowriteinstructions)[https://www.flowrite.com/blog/dynamic-table-of-contents-on-webflow-cms].

*This post here is just archival for my implementations of it. Besides specifics, they also talk about variants like how to create ToC inside a rich text element.*

Create a Div with id "toc" for the ToC with a text-link element inside.

Style the TOC classes.

Style the "active" class.

Name the Rich Text content element id "content".

Create custom field in CMS Collection:

```

TOC generated from

```

(Plain text)

Comma separated, no spaces! Define the Heading tags you want to be generated in the ToC from the Rich Text

Insert code at the end of \<\\body\> tag on collection page template setting.

Use the dynamic “Add Field” to replace [HEADINGS] in above code with the value of your "TOC generated from" CMS field.

Read next in DOCU

Add Copy-able Code Blocks to Webflow CMS

Uses highlight.js and custom code to add code blocks where you can copy the code to rich text element of Webflow CMS

Read next in DOCU

Calculate Read Time from Webflow CMS

Calculated a read time from Webflow CMS and add to your blog template.

Read next in DOCU

Dynamic Social Media Share Buttons for Webflow CMS Blogposts

Add a Twitter button and a share on LinkedIn to your blogposts with sharing content generated from Webflow CMS

Read next in DOCU

Dynamically Generated ToC with Webflow CMS

Generating ToC’s based on h2 and h3 headings of a rich text CMS element with active states in a sticky Table of Contents

Hej. I am on Twitter, too.

Connect with me on Twitter and LinkedIn.