A table of contents that writes itself. Table of Contents scans the headings already on your page. It builds a navigable outline with smooth scrolling and a scroll-spy highlight that follows the reader — the finishing touch for blogs, documentation, and long-form pages.
Three visual styles, an optional reading progress bar, and mobile collapsing make it production-ready out of the box.
How to use
Drop the component next to your article and it finds the headings automatically. Choose which levels to include (H1–H6 from/to), optionally scope it to one part of the page with a CSS selector, and pick a Style: Minimal, Numbered, or Pill.
Fine-tune the reading experience with indent, spacing, scroll offset, and smooth scrolling, and keep Sticky on so it follows the reader with your chosen top distance. Enable the Progress indicator, an optional Back-to-top link, and Mobile Collapse below your breakpoint. Colors for text, active, hover, accent, line, and panel plus separate title and item fonts complete the styling.
Features
Automatic outline from the page's headings
Selectable heading range from H1 to H6
Optional CSS-selector scope
Three styles: minimal, numbered, and pill
Scroll-spy highlighting of the current section
Smooth scrolling with adjustable offset
Sticky positioning with custom top distance
Reading progress indicator
Optional back-to-top link
Mobile collapse below a custom breakpoint
Max height with internal scrolling for long outlines
Six color controls and separate title/item fonts
Works beside articles, docs, and long pages
Responsive across desktop, tablet, and mobile
Refund Policy:
Due to the nature of digital products, all sales are final. Once purchased, this component is non-refundable. Please make sure it fits your needs before completing the checkout.
Support: hi@alicorak.com
A table of contents that writes itself. Table of Contents scans the headings already on your page. It builds a navigable outline with smooth scrolling and a scroll-spy highlight that follows the reader — the finishing touch for blogs, documentation, and long-form pages.
Three visual styles, an optional reading progress bar, and mobile collapsing make it production-ready out of the box.
How to use
Drop the component next to your article and it finds the headings automatically. Choose which levels to include (H1–H6 from/to), optionally scope it to one part of the page with a CSS selector, and pick a Style: Minimal, Numbered, or Pill.
Fine-tune the reading experience with indent, spacing, scroll offset, and smooth scrolling, and keep Sticky on so it follows the reader with your chosen top distance. Enable the Progress indicator, an optional Back-to-top link, and Mobile Collapse below your breakpoint. Colors for text, active, hover, accent, line, and panel plus separate title and item fonts complete the styling.
Features
Automatic outline from the page's headings
Selectable heading range from H1 to H6
Optional CSS-selector scope
Three styles: minimal, numbered, and pill
Scroll-spy highlighting of the current section
Smooth scrolling with adjustable offset
Sticky positioning with custom top distance
Reading progress indicator
Optional back-to-top link
Mobile collapse below a custom breakpoint
Max height with internal scrolling for long outlines
Six color controls and separate title/item fonts
Works beside articles, docs, and long pages
Responsive across desktop, tablet, and mobile
Refund Policy:
Due to the nature of digital products, all sales are final. Once purchased, this component is non-refundable. Please make sure it fits your needs before completing the checkout.
Support: hi@alicorak.com
