@synqro/summary

Auto-generate an interactive table of contents in Webflow. Detects H2 headings and creates clickable links with scroll tracking.

Installation

Add this script in Project Settings → Custom Code → Footer Code:

<!-- [Synqro Labs] Summary -->
<script src="https://cdn.jsdelivr.net/npm/@synqro/summary@1/dist/index.min.js"></script>

Setup in Webflow

<!-- Summary container -->
<div sl-summary-list>
  <div class="summary-item">
    <div sl-summary-text>Item template</div>
  </div>
</div>

<!-- Your article content -->
<div sl-summary-content>
  <h2>First Section</h2>
  <p>Content...</p>
  <h2>Second Section</h2>
  <p>Content...</p>
</div>

Style the active state by creating a combo class .summary-item.active in Webflow.

Options

| Attribute | Example | Description | | --------------------- | ----------- | ---------------------------------------------------- | | sl-summary-headings | "h3" | Heading type (default: h2) | | sl-summary-active | "current" | Active class name (default: active) | | sl-summary-offset | "80" | Scroll offset in px for fixed headers (default: 0) |

Examples:

<!-- Use H3 headings -->
<div sl-summary-list sl-summary-headings="h3">
  <!-- Add 80px offset for fixed header -->
  <div sl-summary-list sl-summary-offset="80">
    <!-- Multiple summaries -->
    <div sl-summary-list="intro"></div>
    <div sl-summary-content="intro">...</div>
  </div>
</div>