fs-toc

Automatically generate a table of contents based on heading tags with Webflow “Current” class and anchor scroll support

Overview

The fs-toc attribute automatically generates a table of contents from heading tags (H2-H6) in your content. It works seamlessly with Webflow Rich Text elements, applies the Webflow “Current” class for active links, and supports smooth anchor scrolling.

Basic Setup

Content Source

Define the content area to scan for headings:

<!-- Rich Text element -->
<div class="w-richtext" fs-toc-element="contents">
  <h2>Introduction</h2>
  <p>Some content...</p>
  
  <h2>Getting Started</h2>
  <p>More content...</p>
  
  <h3>Installation</h3>
  <p>Installation steps...</p>
  
  <h2>Advanced Usage</h2>
  <p>Advanced content...</p>
</div>

TOC Links

Create a link template that will be duplicated for each heading:

<div fs-toc-element="table">
  <!-- Link template -->
  <a href="#" fs-toc-element="link">Link Text</a>
</div>

The link template will be automatically duplicated for each heading found in your content. The text content will be replaced with the heading text, and the href will be set to the heading’s anchor.

Complete Example

<!-- TOC Sidebar -->
<div class="toc-wrapper">
  <h3>Table of Contents</h3>
  <div fs-toc-element="table">
    <a href="#" fs-toc-element="link" class="toc-link">Link</a>
  </div>
</div>

<!-- Content -->
<div class="w-richtext" fs-toc-element="contents">
  <h2>Section One</h2>
  <p>Content for section one...</p>
  
  <h2>Section Two</h2>
  <p>Content for section two...</p>
  
  <h3>Subsection 2.1</h3>
  <p>Subsection content...</p>
</div>

Elements

fs-toc-element=“contents”

Defines the content area to use as the table of contents source. The attribute will scan this element for heading tags (H2-H6).

<div fs-toc-element="contents">
  <h2>Heading that will appear in TOC</h2>
  <p>Regular content...</p>
</div>

fs-toc-element=“table”

Defines the wrapper element that will hold all the generated TOC links. This is optional - if not defined, the library will use the immediate parent of the link template.

<div fs-toc-element="table">
  <a fs-toc-element="link">Link</a>
</div>

fs-toc-element=“link”

Defines the link template element. This element will be cloned for each heading found in the content.

<a href="#" fs-toc-element="link" class="toc-link">Link Text</a>

If you apply fs-toc-element="link" to a non-link element (like a div), the library will automatically look up the DOM tree to find the first parent <a> element.

fs-toc-element=“ix-trigger”

Defines an interaction trigger that fires when a link becomes active or inactive. Useful for custom animations.

<a href="#" fs-toc-element="link">
  Link Text
  <!-- Hidden div for interactions -->
  <div fs-toc-element="ix-trigger" style="display: none;"></div>
</a>

When the link is active, it triggers the “First Click” interaction. When inactive, it triggers the “Second Click” interaction.

Settings

Scroll Offset

Control the scroll position offset when clicking TOC links:

Offset Top

Add space at the top (useful for fixed headers):

<div fs-toc-element="contents" fs-toc-offsettop="100px">
  <!-- Content -->
</div>

Offset Bottom

Add space at the bottom:

<div fs-toc-element="contents" fs-toc-offsetbottom="50px">
  <!-- Content -->
</div>

Use offsettop to account for fixed navigation bars. For example, if you have a 80px fixed header, set fs-toc-offsettop="80px".

Hide URL Hash

Prevent the URL hash from being updated when clicking TOC links:

<div fs-toc-element="contents" fs-toc-hideurlhash="true">
  <!-- Content -->
</div>

Heading Control

Default Behavior

By default, the TOC includes H2-H6 headings. H1 is excluded as it’s typically the page title.

Omit Specific Headings

Exclude specific headings from the TOC by prefixing them with [fs-toc-omit]:

<div fs-toc-element="contents">
  <h2>This appears in TOC</h2>
  <h2>[fs-toc-omit] This does NOT appear in TOC</h2>
  <h2>This also appears in TOC</h2>
</div>

The [fs-toc-omit] prefix is automatically removed from the heading’s visible text.

Custom Heading Levels

Override the heading level for TOC nesting using [fs-toc-h2], [fs-toc-h3], etc.:

<div fs-toc-element="contents">
  <h2>Main Section</h2>
  
  <!-- Treat this H2 as an H3 for TOC nesting -->
  <h2>[fs-toc-h3] Subsection</h2>
  
  <h3>Regular H3</h3>
</div>

Anchor Links

Automatic Anchor Generation

The library automatically generates URL-friendly anchor IDs for headings:

<!-- Original heading -->
<h2>Getting Started with Webflow</h2>

<!-- Becomes -->
<h2 id="getting-started-with-webflow">Getting Started with Webflow</h2>

Custom Anchors

Define custom anchors using the fs-toc-anchor attribute:

<h2 fs-toc-anchor="custom-id">My Heading</h2>

Deep Linking

The TOC automatically supports deep linking. Users can navigate directly to sections via URL:

https://yoursite.com/page#getting-started

Styling

Active Link Class

Webflow’s “Current” class (.w-current) is automatically applied to the active TOC link:

/* Active TOC link */
.toc-link.w-current {
  font-weight: bold;
  color: #0066ff;
}

Nested Links

Style nested heading levels with CSS:

/* Top level links (H2) */
.toc-link {
  padding-left: 0;
  font-size: 16px;
}

/* Second level links (H3) */
.toc-link[href*="h3"] {
  padding-left: 20px;
  font-size: 14px;
}

/* Third level links (H4) */
.toc-link[href*="h4"] {
  padding-left: 40px;
  font-size: 12px;
}

You can also add data attributes to the generated links to target specific heading levels. Check the generated HTML to see what attributes are available.

Advanced Usage

Multiple TOC Instances

Create multiple table of contents on the same page:

<!-- TOC 1 -->
<div fs-toc-element="table" fs-toc-instance="sidebar">
  <a fs-toc-element="link">Link</a>
</div>

<div fs-toc-element="contents" fs-toc-instance="sidebar">
  <h2>Content Section 1</h2>
</div>

<!-- TOC 2 -->
<div fs-toc-element="table" fs-toc-instance="footer">
  <a fs-toc-element="link">Link</a>
</div>

<div fs-toc-element="contents" fs-toc-instance="footer">
  <h2>Content Section 2</h2>
</div>

Integration with CMS

Use TOC with Webflow CMS Rich Text fields:

<!-- TOC -->
<div fs-toc-element="table">
  <a fs-toc-element="link" class="toc-link">Link</a>
</div>

<!-- CMS Rich Text -->
<div class="w-richtext" 
     fs-toc-element="contents"
     fs-toc-offsettop="80px">
  {{wf {"path":"post-content","type":"RichText"} }}
</div>

Progress Indicator

Combine with custom CSS for a reading progress indicator:

.toc-link {
  opacity: 0.5;
  transition: opacity 0.3s;
}

.toc-link.w-current {
  opacity: 1;
}

/* Progress bar on the side */
.toc-link::before {
  content: '';
  position: absolute;
  left: 0;
  width: 2px;
  height: 100%;
  background: transparent;
  transition: background 0.3s;
}

.toc-link.w-current::before {
  background: #0066ff;
}

Complete Examples

Basic TOC

<div class="page-layout">
  <!-- Sidebar TOC -->
  <aside class="toc-sidebar">
    <h3>On This Page</h3>
    <nav fs-toc-element="table">
      <a href="#" 
         fs-toc-element="link" 
         class="toc-link">
        Link Text
      </a>
    </nav>
  </aside>
  
  <!-- Main Content -->
  <main>
    <article class="w-richtext" 
             fs-toc-element="contents"
             fs-toc-offsettop="80px">
      <h2>Introduction</h2>
      <p>Welcome to this article...</p>
      
      <h2>Main Content</h2>
      <p>The main content goes here...</p>
      
      <h3>Subsection</h3>
      <p>A subsection with more details...</p>
      
      <h2>Conclusion</h2>
      <p>Final thoughts...</p>
    </article>
  </main>
</div>

Common Use Cases

Documentation Pages

Provide easy navigation for long documentation:

<div fs-toc-element="table">
  <a fs-toc-element="link">Link</a>
</div>

<div class="w-richtext" fs-toc-element="contents">
  <!-- Documentation content -->
</div>

Blog Posts

Help readers navigate long-form articles:

<div fs-toc-element="contents" fs-toc-offsettop="60px">
  <!-- Blog post content from CMS -->
</div>

Landing Pages

Create anchor navigation for single-page sites:

<nav fs-toc-element="table">
  <a fs-toc-element="link">Section</a>
</nav>

<div fs-toc-element="contents">
  <section>
    <h2>Features</h2>
  </section>
  <section>
    <h2>Pricing</h2>
  </section>
  <section>
    <h2>Contact</h2>
  </section>
</div>

Integration with fs-inject

The fs-toc attribute automatically waits for fs-inject to complete before generating the table of contents. This ensures that any injected content is included in the TOC.

Tips & Best Practices

1. Heading Structure: Use semantic heading hierarchy (H2 → H3 → H4)
2. Descriptive Headings: Write clear, descriptive headings for better TOC navigation
3. Fixed Headers: Always set fs-toc-offsettop to match your fixed header height
4. URL Hashes: Keep hideurlhash false for shareable links to specific sections
5. Styling: Use the .w-current class for active link styling

Avoid skipping heading levels (e.g., H2 → H4) as this creates an unclear document structure and may result in unexpected TOC nesting.

Browser Support

The fs-toc attribute is compatible with all modern browsers and IE11+.