TOC Lines (CMS)

A classy, yet practical and dynamic table of contents user experience for CMS, users can easily display and customize CMS headers. Each header is automatically anchor-linked to its respective section, allowing for intuitive in-page navigation. When a user clicks on a header within the dropdown, the menu gracefully closes with a smooth, refined animation, enhancing the overall fluidity of the interaction, as one would expect from a TOC component.

However, the real magic that makes this component useful for all projects is the fact that it retracts into a subtle, vertically positioned collection of horizontal lines of different lengths (corresponding to the different headings) that smoothly expands out to a popup reveal, both on hover and on tap.

As users scroll down the page, they can see active states on the lines, depending on the scroll position of each section.

The lines can be customized with different colors and even gradients.

The TOC can even be used on mobile devices.

With its thoughtful design and smooth animations, this advanced Framer component elevates content consumption, creating a more immersive and intuitive reading experience for users.