Finsweet Attributes: Table of Contents Webflow integration

How to integrate Finsweet Attributes: Table of Contents with Webflow

Finsweet Table of Contents generates clickable anchor links from your heading elements using a custom code embed and HTML attributes. This integration is client-side only; it does not sync data with external services or use Webflow's APIs.

The primary method is to add the script and configure attributes, which covers the basic setup for most use cases.  

Add the script and configure attributes

The integration works entirely through Webflow after you add one script tag. Embed the library in your page head code, then use Element Settings to mark which elements contain headings and which elements serve as navigation links.

Add this script to your page's Custom Code section under Head Code:

<script async type="module" src="https://cdn.jsdelivr.net/npm/@finsweet/attributes@2/attributes.js" fs-toc></script>

Then apply these attributes through Webflow's Element Settings panel:

• Mark your content container: Add fs-toc-element="contents" to the Rich Text Block or Div Block containing your headings
• Mark your navigation links: Add fs-toc-element="link" to the link elements that serve as your TOC template
• Configure scroll behavior (optional): Add fs-toc-offsettop and fs-toc-offsetbottom attributes with CSS values (e.g., "80px") to the contents element to control scroll offset for fixed headers
• Enable interaction triggers (optional): Add fs-toc-element="ix-trigger" to Div elements inside heading wrappers to integrate with Webflow's interaction system

The script automatically generates anchor links for each heading and populates your navigation template. TOC generates items from H2–H6 headings only; H1 tags are excluded.

You can configure scroll behavior for fixed headers using these attributes on the contents element:

• fs-toc-offsettop: Adds pixel offset above the target heading during scroll (use "80px" for an 80px fixed header)
• fs-toc-offsetbottom: Adds pixel offset below the target heading during scroll
• fs-toc-hideurlhash="true": Prevents the URL hash from appearing in the browser address bar

To exclude specific headings from the TOC, add [fs-toc-omit] to the heading text.

The script automatically applies Webflow's .w--current class to the active TOC link as users scroll. Select your link element in Webflow, access the Current state in the Style panel, and apply your active styling.

Note that TOC functionality requires the script to execute, which does not happen in Webflow's preview mode. Publish to staging or production to test the navigation behavior.

Set up multiple TOC instances

When your page needs separate tables of contents for different content sections, use unique suffixes on your attribute values. All related elements must share the same suffix.

For a footer TOC:

<div fs-toc-element="contents-footer">...</div>
<a fs-toc-element="link-footer">...</a>

Each instance uses unique attribute suffixes (such as contents-1 and contents-2) to distinguish its navigation generation from the designated content container. Test thoroughly on the published site, as multiple TOCs targeting the same content can behave unexpectedly in some layouts.

Implement with CMS template pages

The TOC works with CMS-driven content, though there are known limitations with how CMS Rich Text fields structure headings. The TOC is designed for a single Rich Text or content element; complex CMS layouts may prevent the script from correctly detecting headings.

For CMS templates:

1. Apply fs-toc-element="contents" directly to your Rich Text element or Div Block containing your heading elements
2. Create link elements with fs-toc-element="link" to serve as your TOC navigation template
3. Test with actual published content, as TOC functionality only operates on published sites
4. If headings aren't detected, verify your CMS content structure doesn't add extra wrapper elements around headings

This is a known limitation discussed in the Finsweet community. The TOC does not support generating navigation across multiple separate CMS items on a single page.

Add interaction triggers

Finsweet Table of Contents supports Webflow interactions through the fs-toc-element="ix-trigger" attribute. Add a Div element inside your heading wrapper and apply this attribute to trigger IX2 animations when table of contents sections become active during scrolling. This pattern works best for teams familiar with Webflow's IX2 interaction system.

What you can build

Integrating Finsweet Table of Contents with Webflow lets you generate automated navigation for long-form, structured content.

• Documentation sites with hierarchical navigation: Build product documentation where users access nested sections through an auto-generated sidebar TOC 
• Blog posts with sticky section navigation: Create long-form articles where a fixed TOC highlights the current section as readers scroll
• Educational course pages with lesson outlines: Build course modules where learners see a structured outline of lesson sections and jump to specific topics
• ‍Resource libraries with scannable content: Create knowledge base articles where users can quickly scan the heading structure and access relevant information directly