Table of Contents Pro
A sticky sidebar that follows readers through your blog posts. Highlights the active section as they scroll, collapses into a mobile menu, and installs in under 60 seconds.
- Scroll tracking — the current section highlights automatically as readers scroll
- Mobile optimized — collapses into a sticky bar that auto-detects your site header
- One-line install — paste a single code snippet, no developer required
- Fully accessible — keyboard navigation, ARIA attributes, and focus states built in
Why Your Blog Needs a Table of Contents
Long blog posts earn more search traffic — but only if readers stick around. A table of contents turns a wall of text into a navigable resource. Here's what that does for your site:
Jump links
Google can surface your TOC links as sitelinks in search results, giving your post multiple entry points instead of one. More entry points means higher click-through rates.
Lower bounce rate
Readers jump straight to the section they care about instead of scanning and leaving. Less bouncing, more time on page — both signals Google uses when ranking content.
Accessibility
Screen reader users get a navigable landmark instead of a flat document. Keyboard users can skip to any section. A TOC makes your content usable by everyone.
Squarespace doesn't include a built-in table of contents. Most workarounds involve pasting hundreds of lines of code and manually maintaining anchor links. TOC Pro handles all of it — one script tag, automatic heading detection, and a sidebar that follows the reader.
Features
Sticky Sidebar
TOC stays visible as readers scroll, always within reach for quick navigation.
Active Highlighting
Current section automatically highlights as readers scroll through your content.
Mobile Optimized
Scroll-triggered sticky bar slides in as readers scroll, with zero layout shift. Auto-detects sticky headers.
Configurable Levels
Include H2, H3, and H4 headings. You control which levels appear in the TOC.
Custom Colors
Easy CSS variables let you match your brand colors with no coding required.
Works Everywhere
Compatible with any Squarespace 7.1 template. Just paste and it works.
Keyboard Accessible
Full keyboard navigation, managed tab order, ARIA attributes, and visible focus states built in.
Auto Anchor Links
Headings missing IDs? The script generates them automatically. No extra setup from you.
How It Works
Three simple steps. No developer required.
Purchase and check your email
You'll get a customized code snippet with your domain and chosen config baked in.
Paste into Code Injection
Open your Squarespace blog settings, find Code Injection, paste the code. That's it.
Your TOC is live
The TOC automatically detects headings, builds the sidebar, and starts tracking scroll position. Tweak colors and settings anytime via simple CSS variables.
Requirements
Customize Your TOC
Configure the settings below and watch the preview update in real-time →
The heading displayed above your TOC
Highlights the current section and link hover
Default color for TOC title and links
TOC container background color
H2 required. Add H3/H4 for nested headings.
How the sticky bar behaves on mobile (<900px)
Desktop sticky distance from top (mobile auto-detects header)
Extra space above TOC to align with content
Advanced Options
Vertical padding on each TOC link
Font weight of the TOC title
Sidebar width as percentage of container (sidebar layout only)
Left indentation for nested heading levels
Header divider line color (empty = auto from text color)
CSS font-family value (e.g., Georgia, serif)
Free vs Pro
| Feature | Free | Pro |
|---|---|---|
| Inline table of contents | ✓ | ✓ |
| Sticky sidebar | — | ✓ |
| Scroll tracking | — | ✓ |
| Active highlighting | — | ✓ |
| Mobile sticky bar | — | ✓ |
| Heading levels | H2 | H2-H4 |
| Keyboard accessible | — | ✓ |
| Auto anchor links | — | ✓ |
| Auto header detection | — | ✓ |
FAQ
How do I install it? +
After purchase, you'll receive an HTML file customized for your domain. Paste the contents into your Squarespace blog post's Code Injection area. No coding required. See our step-by-step installation guide for details.
Does it work with all Squarespace templates? +
Yes — it works with any Squarespace 7.1 template on a Business (Core) plan or higher. You need at least the Business plan because Code Injection is required. It's designed for blog post pages and adapts to your site's layout automatically.
How does it work on mobile? +
On screens under 900px, the TOC becomes a sticky bar that slides in from the top as readers scroll down. It auto-detects sticky headers and positions itself below them. Readers can expand or collapse the navigation within the bar, and it auto-collapses after tapping a link.
Can I customize the colors? +
Absolutely. The code includes CSS variables at the top that you can easily adjust to match your brand.
What if it doesn't work for me? +
We offer a 30-day money-back guarantee. If you're not satisfied for any reason, email us for a full refund.
Can I use it on multiple sites? +
Each license is for one domain. Contact us for volume discounts if you have multiple sites.
What if I need help installing or customizing? +
We're here to help. Reach out to us and we'll walk you through installation, color matching, or any custom tweaks you need for your site.
Get Table of Contents Pro
Your customized TOC is ready. Enter your domain to complete your purchase.
See it live on Brentwood Therapy Collective →
Enter the public URL visitors use — e.g., myblog.com (not your .squarespace.com address)