TableOfContent_v1
Dynamic table of contents that adapts based on blog content with fully customizable styling.
Make it with Workshop
Build your own component with AI
Dynamic table of contents that adapts based on blog content with fully customizable styling.
Make it with Workshop
Build your own component with AI
A plug‑and‑play Table of Contents that automatically builds a nested navigation from the headings in any article or blog post. It adapts to your content, highlights the active section as you scroll, supports deep links, and offers full styling control so it matches your site design.
Automatic detection of semantic headings (H1–H6) and generation of a nested TOC.
Live active-section highlighting as the reader scrolls (configurable offset).
Smooth scrolling to anchors and optional URL hash updates for deep linking/back-button behavior.
Responsive behavior: sticky sidebar on desktop.
Customizable appearance: colors, fonts, spacing.
Settings to choose heading levels, scroll offset, and more.
Works with static and dynamically loaded content.
Accessibility-minded markup (nav/list structure, aria-current, keyboard navigation).
Place the component where you want the TOC (sidebar or inline).
In the component settings, point the TOC at your content container by entering its selector (example: #1).
Select which heading levels to include and set the Scroll Offset (use your header height or a percent — e.g., 35%).
If your site has a fixed header, set Scroll Offset to the header height so the active state updates at the right moment.
The TOC relies on semantic headings — ensure content uses proper h1–h6 tags for best results.
The TOC component with full settings panel
Demo article to preview behavior
Quick-start instructions and documentation
Ongoing updates and priority support for paid purchasers
