---
title: "TOC Lines (CMS) — Framer component · Best of Framer"
description: "$20.00 · Framer component · by Garry Andreano · CMS. A classy, yet practical and dynamic table of contents user experience for CMS, users can easily display and customize CMS headers."
canonical: "https://framer.elliotli.dev/component/toc-lines-cms"
---

[Home](/)/[Components](/components)/[CMS](/components/category/cms)/TOC Lines (CMS)

# TOC Lines (CMS)

[View on Framer](https://framer.com/marketplace/components/toc-lines-cms/?via=elliot-li)

![TOC Lines (CMS) preview image 1](https://framer.elliotli.dev/og/component/toc-lines-cms/da05753c74eebb4a/1600x900.jpg)

## Summary

A classy, yet practical and dynamic table of contents user experience for CMS, users can easily display and customize CMS headers.

## Description

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.

## Rank history [How rankings work →](/terms#rankings)

-   All · #5027

## Details

- **Author**: Garry Andreano
- **Price**: $20.00
- **Published**: 2025-09-18
- **Updated**: 2025-09-18
- **Added**: 2025-09-05
- **Categories**: CMS

## More across types

-   [Savepoint](/plugin/savepoint) — Syauqizaidan Khairan Khalaf · Free — Undo for your Framer CMS
-   [Store Locator](/plugin/store-locator) — Framefic · Free — Interactive Maps, Nearby Stores
-   [FlowSlider Pro](/plugin/flowslider-pro) — Junseo Ham · Free — CMS Slider & Carousel Engine

## More like this

-   [Bend Video Carousel](/component/bend-video-carousel) — Axis Supply · $15 — Bend Video Carousel is an interactive video carousel for Framer that combines smooth movement with a curved, dimensional layout.
-   [CMS Archway Video](/component/cms-archway-video) — Axis Supply · Free — CMS Archway Video is a cinematic video carousel for Framer that combines continuously moving video cards with a distinctive arched shape.
-   [Reveal Nav CMS](/component/reveal-nav-cms) — TOC Studio · Free — CMS-connected hover nav menu