Sign In Get Started

Navigate Long Pages
with a Table of Contents

Give visitors a clickable outline of your page content. They jump to the section they need, and the TOC highlights where they are as they scroll.

Build Your TOC — Free
You
Create a sticky table of contents for my documentation page with 6 sections. Highlight the active section in purple as the user scrolls.
MightyWidgets AI
Done! I've built a sticky sidebar table of contents with 6 section links. The active section highlights in purple as visitors scroll, and clicking any link smooth-scrolls to that section. It collapses into a dropdown on mobile.

What Is a Table of Contents Widget?

A table of contents widget lists the sections of a page as clickable navigation links. Clicking a link scrolls the page smoothly to that section, and the link for the currently visible section is highlighted automatically. It solves the fundamental problem of long-form content: visitors need to find specific information without reading everything from top to bottom. Blog posts, documentation, legal pages, tutorials, and knowledge base articles all become dramatically easier to use with a visible table of contents. The widget can float as a sticky sidebar, sit inline at the top of the page, or collapse into a dropdown on mobile devices — adapting to whatever layout serves your readers best.

See It in Action

Click a section link or scroll the content to see active tracking

Introduction

Welcome to our comprehensive guide. This document covers everything you need to know to get up and running quickly with the platform. We recommend reading through the key sections in order.

Getting Started

Create your account and complete the onboarding flow. You will be guided through the initial setup, including connecting your website and choosing your first widget template from our library.

Core Concepts

Understanding widgets, embed codes, and the AI builder. Each widget is a self-contained component that loads asynchronously on your page. Describe what you want in plain English and iterate.

Configuration

Customize colors, fonts, spacing, and behavior through natural language instructions. The AI interprets your requests and applies changes instantly. No settings panels or code editing required.

Advanced Usage

Learn about conditional display rules, A/B testing, analytics integration, and multi-site publishing. These features let you optimize widget performance across all of your web properties.

Troubleshooting

Common issues and solutions for embed code placement, caching, and cross-origin restrictions. Most problems are resolved by ensuring the embed code is placed in the correct location in your HTML.

This is a working table of contents. Build yours with MightyWidgets in under a minute.

Why Add a Table of Contents to Your Website?

Turn long pages into navigable, reader-friendly experiences

Help Visitors Find What They Need

Long pages are hard to navigate. A table of contents gives visitors a map of your content so they can jump directly to the section that matters most — without guessing or scrolling endlessly.

Increase Time on Page & Reduce Bounce

When visitors see a clear overview of everything on the page, they are far more likely to stay and explore. A TOC signals that the page is comprehensive and well-organized — two things both readers and search engines value.

Improve Readability for Long-Form Content

Blog posts, documentation, guides, and legal pages benefit enormously from a visible table of contents. It transforms a wall of text into a structured, approachable resource that visitors actually want to read.

Everything You Need in a Table of Contents

Powerful features wrapped in a simple, no-code builder

Active Section Highlighting

As visitors scroll through your content, the corresponding link in the table of contents is highlighted automatically. This real-time tracking helps readers maintain their orientation on long pages and provides a visual indicator of reading progress through the document.

Table of contents with highlighted active section link showing scroll-based tracking

Sticky Sidebar or Inline Display

Position the TOC as a sticky sidebar that follows the reader down the page, or place it inline at the top of your content. On mobile, it can collapse into a compact dropdown to save screen space. Just tell the AI which layout you prefer and it handles the responsive behavior automatically.

Sticky sidebar table of contents that remains visible while scrolling through long content

Smooth Scroll with Smart Offset

Clicking a link triggers a smooth scroll animation to the target section. The widget automatically accounts for fixed headers so the section heading lands precisely in view. You can adjust the scroll speed and offset by asking the AI — everything is configurable through natural language.

Smooth scroll animation triggered by clicking a table of contents link with proper header offset

Embed Anywhere with One Line of Code

Once you publish your table of contents, you get a single embed snippet to paste into any website. It works on WordPress, Shopify, Squarespace, Wix, Webflow, and any platform that supports custom HTML. The widget loads asynchronously, so it never slows down your page.

One-line embed code being copied from MightyWidgets dashboard for adding the TOC to any website

Add a Table of Contents in 3 Easy Steps

From page sections to live TOC on your website in under a minute

1

Describe It

Tell the AI your page sections and how you want the TOC to look, or start from a ready-made template.

2

Refine It

Ask the AI to adjust styling, position, or behavior in plain English. Iterate until it matches your site perfectly.

3

Embed It

Copy one line of code and paste it into your site. Your table of contents is instantly live.

Table of Contents Use Cases

See how different content types benefit from page navigation

Blog Posts & Articles

Long-form content becomes dramatically easier to navigate with a visible TOC. Readers jump to the section they care about and return to the overview at any time.

Documentation & Guides

Technical documentation, API references, and how-to guides need quick access to specific sections. A sticky TOC makes every heading reachable in one click.

Legal & Policy Pages

Privacy policies, terms of service, and compliance documents are long and dense. A table of contents lets visitors find the clause they need without reading everything.

Online Courses & Tutorials

Students navigate between lessons, examples, and exercises more efficiently. A TOC shows the full course structure at a glance and tracks reading progress visually.

The Easiest Way to Add a Table of Contents to Any Website

Whether you need a table of contents widget for WordPress, a page navigation sidebar for Shopify, or a sticky TOC for your custom-built documentation site, MightyWidgets makes it effortless. Describe your page structure in plain English and the AI builds a fully responsive table of contents that works on every platform and every device. You don't need to install plugins, write JavaScript, or configure scroll offset calculations. Just describe it, list your sections, and publish. Your table of contents widget will be live on your website in under a minute — complete with active section highlighting, smooth scrolling, and a design that integrates seamlessly with your brand.

Works With Every Website Builder

Embed your table of contents on any platform that supports custom HTML

One TOC, every platform

MightyWidgets generates a single embed code that works everywhere. Whether your site runs on WordPress, Shopify, Squarespace, or plain HTML, your table of contents will look and work exactly the same. No platform-specific plugins needed.

  • WordPress
  • Shopify
  • Squarespace
  • Wix
  • Webflow
  • Weebly
  • Ghost
  • Custom HTML Sites

Frequently Asked Questions

Everything you need to know about table of contents widgets

What is a table of contents widget?

A table of contents widget is a navigation element that lists the major sections or headings of a page as clickable links. When a visitor clicks a link, the page scrolls smoothly to that section. It can be displayed inline, as a floating sidebar, or as a sticky element that follows the visitor as they scroll.

How does MightyWidgets create a table of contents?

Describe your page sections in plain English — list the headings you want in the TOC and mention any styling preferences. The AI builds a fully functional, responsive table of contents widget for you. You can ask for changes like "make it sticky on scroll" or "highlight the current section in purple" and the AI adjusts instantly.

Does the TOC highlight the active section as I scroll?

Yes. The table of contents automatically detects which section is currently in view and highlights the corresponding link. This active state tracking helps visitors maintain their orientation on long pages and know exactly where they are in the content.

Can I make the table of contents sticky?

Absolutely. You can ask for a sticky sidebar that stays visible as the visitor scrolls down the page. On mobile, the TOC can collapse into a dropdown or remain as a scrollable inline list — just tell the AI which behavior you prefer.

Does smooth scrolling work when clicking a link?

Yes. Clicking any link in the table of contents triggers a smooth scroll animation to the corresponding section. The scroll offset accounts for fixed headers so the section heading lands exactly where the visitor expects it.

How do I embed the TOC on my website?

Publish your table of contents widget and copy the single line of embed code. Paste it into any page on WordPress, Shopify, Squarespace, Wix, Webflow, or any platform that supports custom HTML. The widget loads asynchronously and never slows down your page.

Is MightyWidgets free to use?

You can create and customize widgets for free with our Free plan. Credits are used when your published widget loads on a visitor's browser and when you use AI features. Upgrade to a paid plan for more credits, widgets, and features. Top-up credit packs are also available and never expire.

You Might Also Like

Other widgets that improve page navigation and readability

FAQ Accordion

Expandable Q&A sections for frequently asked questions

Back to Top Button

Let visitors quickly return to the top of the page

Tabs

Organize content into switchable tabbed panels

Ready to Build Your Table of Contents?

Create a sticky page navigation widget in under a minute. No coding required, no credit card needed.

Get Started Free