Simply add this vertical Side Nav component to your website to instantly see a Dynamic Table of Contents that live updates based on the content on your site (even works for CMS content).
Hover over the menu to reveal a background change, then click to open/close the popover.
When you need to display extensive navigation in a clean, organized way, popover mode reveals a beautiful menu overlay on hover. Perfect for long-form content, documentation, or any situation where you want to show the complete content structure without cluttering your design.
Perfect for minimal, focused navigation experiences. When users hover over navigation elements, lines dynamically scale based on proximity to their cursor, creating an elegant visual hierarchy that feels both sophisticated and intuitive.
Custom Heading Range - Target exactly which headings to track (e.g., H2-H4 only). Skip your H1 title and avoid footer clutter.
Exclude Selectors - Hide headings inside specific containers (like .no-toc or .footer-nav) from appearing in the TOC.
CMS-Bindable Labels - Override any TOC item with custom text, and bind each label to CMS variables for per-article control.
You have complete flexibility to choose what is shown inside the component and even create custom labels overrides too!
Feel free to check out my other Scroll Indicator / TOC component here
Dan Marek
