Finsweet Attributes: Table of Contents

How to integrate Finsweet Attributes Table of Contents with Webflow

Content-heavy Webflow sites need navigable anchor points for long articles and CMS collections. Users scrolling through entire pages to find specific sections lose context and abandon content. Finsweet Attributes Table of Contents adds in-page navigation to collection items without custom JavaScript.

Integrate Finsweet Attributes through a single script tag and HTML attributes. Add the Attributes script to your site's custom code in head. Apply HTML attributes through Webflow's element settings to configure table of contents behavior.

Use native features, direct embeds and widgets

Finsweet Attributes Table of Contents integrates through a single script tag you add to your site's custom code section. Visit the Finsweet Attributes documentation for the script CDN URL at https://cdn.jsdelivr.net/npm/@finsweet/attributes@2/attributes.js. Add this script tag to your site's custom code in the head section. The script loads globally and enables all Finsweet Attributes functionality.

Configure your table of contents by adding HTML attributes through Webflow's element settings panel. The Attributes system works without custom JavaScript. Apply the fs-toc-element attribute to the container where you want the table of contents to appear. Apply fs-toc-content to the section containing your headings. The script automatically generates navigation from H2 through H6 headings in your Rich Text content.

The table of contents updates the URL hash as users scroll through sections. This enables direct links to specific content sections. The navigation highlights the current section based on scroll position. Configure additional options like sticky positioning or heading level filters using the documented attribute values in the official Finsweet documentation.

Test your implementation on your published site. Finsweet Attributes requires browser testing and does not work in Webflow's Designer preview mode. Verify that clicking navigation items scrolls to the correct sections. Check that URL hashes update properly. Test the current section highlighting across different browsers.

Build with Webflow and Finsweet Attributes API

Finsweet Attributes operates client-side without exposing a REST API or webhooks. The library reads HTML attributes from published pages and cannot be controlled through external API calls. For programmatic Webflow CMS operations, use the Webflow CMS API directly to manage collection items and content structure.

What you can build

Integrating Finsweet Attributes Table of Contents with Webflow enables navigation systems for content-heavy sites. Common implementations include documentation sites, FAQ pages, and long-form content with section navigation.

• Documentation sites with section navigation: Build help centers where a sticky table of contents lists article headings. Users click headings to scroll to sections. URLs update with section hashes for direct sharing. The navigation highlights the current section as users scroll through content.
• FAQ pages with question jump links: Create FAQ collections where users click questions to jump to answers. The URL updates with each question's anchor for sharing specific FAQ items. The table of contents generates automatically from heading elements in your Rich Text content.
• Long-form content with progress tracking: Display content sections with persistent navigation that follows users through the page. The navigation highlights the current section based on scroll position. URLs update as users move through different sections for bookmarking and sharing specific content locations.