Discover the best tableofcontents websites created by professional designers. Get inspired and start planning your perfect tableofcontents web design today!

Memberstack

Happy Thursday! 

I recently needed a way to dynamically generate a table of contents that works with the Webflow CMS. Figured it might benefit others to share it in a simple cloneable project.

Everything is styled and configured to be super easy to drop into your project. The code is located in embeds, the page is a static Webflow page (not connected to the CMS), and all styles are applied via class names so you won't lose anything during the copy/paste process. 

I hope it serves you well!

The layout is by Flowbase, the sticky table of contents is by Flowrite (1), and the code styling is by highlight.js (2). Photos from Pexels.

1. https://www.flowrite.com/blog/dynamic-table-of-contents-on-webflow-cms
2. https://highlightjs.org/

Blog CMS Table of Contents

CMS Table of Contents

Ebda Agency

Ebda is a full-service Webflow agency designing and building brands and websites that deliver impact

Ebda Live

Noureddine Made

Create dynamic anchor tags from rich text in your cms collections.

While working on a client's Webflow website, I needed a table of contents for each product information page and advice blog post. The problem was that this needed to be a dynamically generated list that included anchor tags to each specific section or chapter based on the content in a rich text field.

I looked at solutions online but only came across half solutions or solutions for full collections and not for the content inside of each collection item. So I decided to make my own.

The solution I came up with is super simple and allows you to customise it to your exact needs. All we need to do is give two elements on the page a unique ID and then add 15 lines of custom code.

Dynamic Anchor Tags from Rich Text (CMS/Collections)

Dynamic Anchor Tags from Rich Text (CMS collections)

Studio Zakmes

We crafted a clam and elegant visual identity that will leave a lasting impression on its viewer. The design is characterized by its calm and inviting atmosphere, which helps to create a user-friendly experience that is both enjoyable and easy to navigate.

From the moment users arrive on our site, they will be captivated by the simple yet sophisticated aesthetic of the design. The use of whitespace and carefully chosen color palettes creates a sense of tranquility and balance, making it a pleasure to explore and interact with.

Our team understands the importance of designing a website that is both visually appealing and easy to use. That's why we've created a layout that is intuitive and user-friendly, with clear and concise navigation that guides users effortlessly through the site.


Margreet van Steijn

Add table of contents anchor links with images to your blog posts and other collection pages.

Discover tableofcontents websites built by the Webflow community

Discover tableofcontents websites built by the Webflow community