Table of Contents
Sticky TOC panel auto-generated from page headings with scroll-spy active state, nested hierarchy, collapsible sections, and a mobile drawer variant.
1. Flat — H2 Only
Simplest form: one heading level, static list. No scroll-spy, no nesting. Suitable for short documents or landing pages with a handful of sections.
Content for the Introduction section goes here. Scroll to see the active state update.
Content for the Installation section goes here. Scroll to see the active state update.
Content for the Configuration section goes here. Scroll to see the active state update.
Content for the Usage section goes here. Scroll to see the active state update.
Content for the API Reference section goes here. Scroll to see the active state update.
Content for the FAQ section goes here. Scroll to see the active state update.
"Configuration" shown as the active item.
2. Nested Hierarchy — H2 / H3 / H4
Three heading levels with progressive indentation. Each level reduces font size slightly and shifts left padding by 0.75rem per step. H4 items are de-emphasised — tertiary colour until active.
Content for Introduction.
Content for Installation.
Content for Via npm.
Content for Via CDN.
Content for Configuration.
Content for Basic Options.
Content for Advanced Options.
Content for Environment Variables.
Content for Usage.
Content for API Reference.
Content for Authentication.
Content for Error Codes.
Content for FAQ.
"Environment Variables" (H4) shown as the active item.
3. Scroll-Spy with IntersectionObserver
Active item updates automatically as the user scrolls the content pane. Uses IntersectionObserver in Alpine's x-init — no polling, no scroll event listeners. Also shows a reading progress bar driven by scroll position.
This is the content area for the Introduction section. It contains enough text to push the next section out of view so scroll-spy can trigger. Keep scrolling to watch the active item in the TOC update automatically.
This is the content area for the Installation section. It contains enough text to push the next section out of view so scroll-spy can trigger. Keep scrolling to watch the active item in the TOC update automatically.
Subsection content for Via npm. Scroll up or down to see which item becomes active.
Subsection content for Via CDN. Scroll up or down to see which item becomes active.
This is the content area for the Configuration section. It contains enough text to push the next section out of view so scroll-spy can trigger. Keep scrolling to watch the active item in the TOC update automatically.
Subsection content for Basic Options. Scroll up or down to see which item becomes active.
Subsection content for Advanced Options. Scroll up or down to see which item becomes active.
Subsection content for Environment Variables. Scroll up or down to see which item becomes active.
This is the content area for the Usage section. It contains enough text to push the next section out of view so scroll-spy can trigger. Keep scrolling to watch the active item in the TOC update automatically.
This is the content area for the API Reference section. It contains enough text to push the next section out of view so scroll-spy can trigger. Keep scrolling to watch the active item in the TOC update automatically.
Subsection content for Authentication. Scroll up or down to see which item becomes active.
Subsection content for Error Codes. Scroll up or down to see which item becomes active.
This is the content area for the FAQ section. It contains enough text to push the next section out of view so scroll-spy can trigger. Keep scrolling to watch the active item in the TOC update automatically.
Scroll the right pane — the active TOC item and progress bar update in real time.
4. Collapsible Sections
H2 headings act as collapsible group toggles. H3/H4 children are hidden until their parent is expanded. Useful for long documents with many sections. State is stored per-section ID in an Alpine object.
Content for Introduction.
Content for Installation.
Content for Via npm.
Content for Via CDN.
Content for Configuration.
Content for Basic Options.
Content for Advanced Options.
Content for Environment Variables.
Content for Usage.
Content for API Reference.
Content for Authentication.
Content for Error Codes.
Content for FAQ.
Click any H2 heading in the TOC to expand / collapse its subsections.
5. Floating Sticky Panel
The TOC floats as a card with a subtle shadow — common in documentation sites. In a real layout it would sit in a column alongside the article and use position: sticky; top: 1.5rem.
On this page
Introduction Installation Via npm Via CDN Configuration Basic Options Advanced Options Environment Variables Usage API Reference Authentication Error Codes FAQSample content for Introduction. In production this would be real article prose.
Sample content for Installation. In production this would be real article prose.
Sample content for Via npm. In production this would be real article prose.
Sample content for Via CDN. In production this would be real article prose.
Sample content for Configuration. In production this would be real article prose.
6. Mobile Drawer Variant
On narrow screens the TOC is hidden behind a trigger button. Tapping the button slides up a bottom drawer with the full TOC. Tapping an item or the overlay closes the drawer.
On this page
7. Edge Cases
Real-world conditions that break naive TOC implementations.
Single heading — no nesting needed
On this page
IntroductionLong heading — truncate with title tooltip
Many items — TOC scrolls independently
Loading skeleton