Open Source Library

Webflow Table of Contents.
Dynamic Navigation.

Easily create a dynamic Table of Contents in Webflow with this custom code library. Improve content navigation, accessibility, and SEO using simple data attributes.

1

Install the Script

Navigate to your Webflow project settings (or individual page settings). Paste the core library script into the Before </body> tag section.

<body> Custom Code
<!-- [ShaikSaif PowerUps] Webflow Table-of-contents -->
<script defer src="https://cdn.jsdelivr.net/npm/@imshaiksaif/webflow-custom-toc@latest/dist/index.js"></script>
2

HTML Structure

Apply the required attribute ss-toc-comp to the wrapper containing your content and the wrapper where you want the links added. Ensure you set a unique identifier.

TOC Wrapper
Content Wrapper

Element Tree

<div ss-toc-comp="article" ss-toc-content-comp="toc-rt">   <!-- Content Wrapper -->
<h1>Introduction</h1>
<p>Article goes here...</p>
<h2>Features</h2>
<p>More content...</p>
</div>

<div ss-toc-comp="article">   <!-- TOC Link Wrapper -->
<!-- Optional Link Item -->
<a href="#" ss-toc-comp-ele="item"><span ss-toc-comp-ele="item-text">TOC Link</span></a>
</div>
Item Attribute
Item Text Attribute
3

Configuration Attributes

Fine-tune your Table of Contents behavior by applying these optional attributes to the exact same element where you placed ss-toc-comp. Click an attribute below to copy it.

1. TOC Elements

The values are comma-separated, and any tags specified here will be dynamically included in the Table of Contents. Default Value: h1, h2, h3, h4, h5, h6

2. List Type

You can specify the list type (ul, ol, or none).
- ul: Adds circle bullet points
- ol: Adds numbered bullet points
- none: No bullet points (Default)

3. Smooth Scrolling

Add this attribute to enable smooth scrolling behavior when clicking links. Default Value: false

4. Scroll Duration

Set its value to the desired timing in milliseconds. Only works if smooth scrolling is enabled. Default Value: 300

5. Scroll Offset

Use this attribute to create a top offset for the heading when a Table of Contents link is clicked. This ensures the linked section is positioned correctly, accounting for fixed headers or padding. Default Value: 0

6. Active Class Styling

Define a custom class to be added to the TOC link element when its corresponding section is in view. This allows you to highlight the active section in your Table of Contents.

FAQ's

Is the TOC totally free?

Yes, it’s completely free to use for personal and commercial Webflow projects.

Does it work with CMS collections?

Absolutely! The Table of Contents dynamically generates from headings within CMS content.

Do I have to write code to use it?

Simply add a small JavaScript snippet to your Webflow project, and apply the required attribute.

Can I completely style the list?

Yes! Use Webflow’s Designer or custom CSS for full styling control of your active elements.

Is smooth scrolling supported?

Yes, clicking a Table of Contents item scrolls smoothly to the section if enabled.

Can I omit certain headings?

Yes, you can customize which headings to include or exclude using data attributes.