Webflow Table of Contents

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

Get Started

Go back

Step #1

Copy the Webflow Marquee <script> and paste into the <body> of your page

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

Copy Script

Step #2

Implement in Webflow by Applying attributes to elements on the page

Required for minimum setup

Below is a list of required attributes:

Contents

I want the Headings of this

Rich Text or Div Block

element to generate a table of contents

Add this attribute

Name

ss-toc-content-comp

Value

toc-rt

Description

Apply this attribute to the wrapper containing your page content, such as a Rich Text Block or a Div with nested Headings. The Table of Contents will automatically generate from these heading elements.

The attribute value can be any unique identifier—just ensure it matches the value set in [ss-toc-comp]

TOC Holder

I want all the Links to be appended to

Div Block

element

Add this attribute

Name

ss-toc-comp

Value

toc1

Description

Apply this attribute to the wrapper where you want all the links to be added.

TOC Item

I want

Div Block

element to be used as link item

Add this attribute

Name

ss-toc-comp-ele

Value

item

Description

Ensure this item div is placed inside the TOC Holder [ss-toc-comp]. This element will serve as a Table of Contents item.

TOC Item Text

I want the

Text

element to be used to updating the text

Add this attribute

Name

ss-toc-comp-ele

Value

item-text

Description

This step is optional. If omitted, the [ss-toc-comp-ele='item'] TOC Item will be used to update the text.

Active Class

I want to style the active link

Add this attribute

Name

ss-option-item-active-class

Value

is-active

Description

Create a combo class for the TOC Item [ss-toc-comp-ele='item'] and style it as desired.

‍

These styles will apply when a link is active while scrolling through the Table of Contents.

‍

Ensure the combo class name matches the value exactly here.

‍

Extra Controls [Optional]

Below is a list of Attributes that can help you customize your Table of content component.

Option

Heading Selector

Specify which headings to include (default: `h1, h2, h3, h4, h5, h6`)

Add this attribute

Name

ss-option-heading-selector

Value

h2, h3

Description

Add this attribute to the same TOC Holder element.

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

Option

List Design Type

I want to add bullet points or Numbered List

Add this attribute

Name

ss-option-list-type

Value

Description

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 Value: none
Accepted Values: ul | ol | none

Option

Smooth Scroll

I want a smooth scroll on click of TOC Link item

Add this attribute

Name

ss-option-smooth-scroll

Value

true

Description

Add this attribute to enable smooth scrolling.

‍

Default Value: false

Option

Scroll Speed

I want to control the scroll speed

Add this attribute

Name

ss-option-scroll-speed

Value

400

Description

Add this attribute and set its value to the desired timing in milliseconds.

‍

Default Value: 300

Option

Add Offset

I want to add a top offset to the "Current" state of Heading sections

Add this attribute

Name

ss-option-offset

Value

120

Description

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.

Value: Set in pixels (e.g., 50px)
Note: This works only if smooth scrolling is enabled.
Default Value: 0 (no offset)

Working examples

Example

Default Table of Contents

Heading 2

Heading 3

Heading 4

Heading 5

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

Block quote

Ordered list

Item 1
Item 2
Item 3

Unordered list

Item A
Item B
Item C

FAQ's

1. Is the Table of Contents library free to use?

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

2. Does it work with Webflow CMS collections?

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

3. How do I install the Table of Contents library?

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

4. Can I customize the Table of Contents style?

Yes! Use Webflow’s Designer or custom CSS for full styling control.

5. Does it support smooth scrolling?

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

6. Is it mobile-friendly?

Yes, it’s fully responsive and works seamlessly on mobile devices.

7. Can I exclude specific headings from the Table of Contents?

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

8. Will it work on dynamic or nested content?

Yes, it supports dynamic content and handles nested headings automatically.

Let's Take Care of your Webflow Site.

We're a tight-knit team of webflow experts that eat, sleep, breathe Webflow. You bring your ideas or designs and we will make it happen, no matter the complexity.

Speak with Sales