Super-Easy Table of Contents (Rich Text) in Webflow
When building content heavy sites, having a table of contents for each article or post is absolutely crucial for the user experience.
However, there isn’t any native way of creating a dynamic one in Webflow. That’s why I wrote a tiny script to help you set one up in seconds.
1 — Github
The first thing you should do is to visit my Github repo for Toc.js. There you’ll find all the instructions you need to get going, but feel free to read this article if you need a more detailed overview.
2 — Initialize
Start by importing the script using the import script in the repo. This should be placed before the body tag on all the pages you want to add a table of contents on.
Copy the initialization code from the Github repo and place it inside script tags underneath your import. This creates a new instance of Toc.js.
Text source
The first option is the text source, meaning the class name of your rich text element in Webflow.
Target
The second option is the class name of whatever div element you want to place your table of contents in. You can place this div wherever you want on your page.
Included heading types
The third option is an array of all heading types you want included in your toc.
Indent size
Sometimes, you might want to indent lower heading (H3, H4 etc.) to visualize the hierarchy of headings in your table of contents. This number is the pixel based value of how large you want your indentations to be.
3 — Setup your table of contents
There are three classes that are required for this script to work correctly.
Toc
This is the main “list” element for your toc. Typically you’d want to use a vertical flex gap to space out the children of this div element.
Toc Item
This is a “list item” of the toc list. You can style this one however you want, but it can also be left as is.
Toc Heading
These are the generated heading links of your toc. Feel free to style them however you see fit. In my example video, I make them blue & small and that’s pretty much it.
4 — Conclusion
That’s it, that’s all. Hopefully this script can help you save some time for your next project(s). If you need help, feel free to comment down below or hit me up through my site.
