A Table of Contents CMS component featuring headings with unique progress bars which are revealed when users scroll into each corresponding section.
Made with Workshop
Build your own component with AI
This Table of Contents (TOC) component for CMS delivers a smooth, intuitive user experience powered by dynamic CMS functionality. Each heading is anchor-linked for easy in-page navigation, with the dropdown menu closing gracefully after selection. More than a simple TOC, it dynamically organizes content: parent headings reveal their child headings as users scroll, keeping navigation contextual and concise.
To prevent the TOC from becoming overwhelming, sections are grouped and expand or collapse automatically, supported by visual cues like white lines and animated blue progress bars that track scrolling progress. With full support of H1-H6, the component balances clarity and simplicity. It’s fully responsive, ensuring that even on mobile devices, long-form content remains accessible and elegantly navigable.