TOC Reveal Component

Why navigation matters in long-form content

Digital audiences today demand more than static walls of text. They expect interactivity, structure, and visual feedback that helps them make sense of complex information. Traditional navigation tools often feel clunky—lists of links that fail to respond dynamically as a user scrolls. This creates friction, especially in content-rich environments like documentation, knowledge bases, or thought leadership blogs.

The shift toward dynamic UX

Static tables of contents were once enough, but users now expect tools that adapt in real time. A truly modern TOC should act as a co-pilot in the reading journey, not just a static index. This new Framer component was designed with exactly that principle in mind: it offers a balance of functionality and delight, guiding readers without overwhelming them.

Dynamic CMS-driven experience

At the core of this component lies its integration with the CMS. This ensures headers are always accurate, always current, and always connected to the right section of a post. Every header pulled from the CMS becomes an anchor link, and when a reader clicks on it the page scrolls smoothly to the exact location of the section, eliminating guesswork and unnecessary scrolling. Once a header is selected, the TOC doesn’t simply vanish. Instead, it collapses with a fluid, polished animation, offering an elegant moment of closure. These small touches accumulate into an experience that feels professional and well-crafted rather than mechanical.

Parent–child grouping of headings

What makes this TOC truly different is its awareness of hierarchy. Readers don’t encounter a flat, overwhelming list of every section—they experience an intelligent expansion and collapse of relevant groupings. H2s become parent headings, while H3s nest beneath them as children, mirroring the natural flow of structured writing and preventing readers from being lost in a forest of subtopics. As the user scrolls into a new parent heading, its children reveal themselves automatically, and when the reader leaves, those children retract, ensuring the TOC remains manageable in size. In the default Framer branding, groupings are connected with a clean white line. This subtle touch communicates structure without clutter, reflecting a design philosophy of minimalism in service of clarity.

Progress indicators for seamless orientation

Navigation is not only about knowing where you are going—it is also about knowing how far you have traveled. That’s where the scroll-based progress indicators come into play. Each section of the TOC features a blue progress bar that expands as users read through the content, giving immediate visual confirmation of progress, something particularly valuable in long or technical articles. When the reader moves into a new section, the current one resets, shifting focus forward. The active section stands out clearly, while inactive ones fade back, minimizing distractions. To ensure scalability, the TOC smartly manages its size by expanding only the relevant grouping at any given time. Even with dozens of subsections, the component never balloons into an unmanageable list, a design decision that keeps navigation approachable and efficient.

Thoughtful constraints for usability

Rather than supporting every heading level indiscriminately, the TOC was designed with restraint. H1s are generally reserved for titles, so including them would create unnecessary redundancy. Disabling them by default keeps the TOC focused on in-body content. H2s and H3s provide the sweet spot of organization—enough structure to break down complex material, but not so much that the reader drowns in micro-sections. The result is a TOC that reflects the author’s intent while remaining easy to follow.

Optimized for mobile devices

A modern TOC must not only function well on desktop but also excel on mobile, where most readers consume content today. Scrolling, expanding, and collapsing remain fluid even on smaller devices. Users can interact with the TOC without frustration, ensuring accessibility regardless of screen size. Animations are optimized to remain responsive and snappy on mobile hardware, avoiding the laggy effects that sometimes plague interactive components. And because screen space is precious, the TOC adapts intelligently to keep itself compact while still offering full functionality, enhancing rather than obstructing the reading experience.

A more immersive reading experience

The brilliance of this component lies not in any single feature, but in how all its parts come together into a coherent system. The CMS-driven structure, expandable groupings, progress indicators, and mobile-optimized animations collectively transform the TOC into an immersive navigational guide. Readers never feel overwhelmed, because the TOC responds contextually to their actions. It doesn’t compete with the content but instead supports it, ensuring focus remains where it belongs. Writers and designers benefit from deeper engagement, while readers enjoy a seamless interaction that makes long-form material more digestible. Everyone benefits from the refinement baked into this design.

Final note

This TOC is more than a utility—it is a manifestation of thoughtful UX design. It acknowledges the reader’s journey and enhances it with hierarchy, fluidity, and progress tracking. In doing so, it sets a new bar for what content navigation in Framer can be. And to those considering adoption, there is only one final disclaimer: no refunds.