---
title: "TOC Island (CMS) — Framer component · Best of Framer"
description: "$20.00 · Framer component · by Garry Andreano · Navigation. This cutting-edge Framer code component is a UX delight, slightly changing how users interact with CMS headers in blog posts,…"
canonical: "https://framer.elliotli.dev/component/toc-island-cms"
---

[Home](/)/[Components](/components)/[Navigation](/components/category/navigation)/TOC Island (CMS)

# TOC Island (CMS)

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

![TOC Island (CMS) preview image 1](https://framer.elliotli.dev/og/component/toc-island-cms/ab946804215eca94/1600x1200.jpg)

## Summary

This cutting-edge Framer code component is a UX delight, slightly changing how users interact with CMS headers in blog posts, offering a seamless and visually engaging experience.

## Description

This cutting-edge Framer code component is a UX delight, slightly changing how users interact with CMS headers in blog posts, offering a seamless and visually engaging experience.

With dynamic functionality, users can easily display and customize headers, ensuring a structured and user-friendly reading journey. 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 users scroll down the page, they’ll notice a dynamic interplay of motion and feedback: a percentage-based progress button elegantly updates on the right, while a circular progress indicator on the left provides an intuitive visual cue for reading completion. This dual-animation system not only keeps readers informed about their progress but also adds a sophisticated layer of interactivity to the browsing experience.

Additionally, when the dropdown is expanded, a dynamic “minute read” estimate appears exclusively for CMS-based posts. This feature instantly informs users of the estimated time required to read the article, helping them manage their engagement and set expectations before diving into the content.

To further enhance focus and readability, expanding the dropdown triggers a subtle background blur overlay that extends across the full height of the viewport. This effect ensures that the reader’s attention remains on the essential content, minimizing distractions and reinforcing high-quality UX design principles.

With its thoughtful design, smooth animations, and data-driven interactivity, 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 · #9309

## Details

- **Author**: Garry Andreano
- **Price**: $20.00
- **Published**: 2025-08-11
- **Updated**: 2025-08-11
- **Added**: 2025-07-31
- **Categories**: Navigation

## More like this

-   [Reveal Navigations](/component/reveal-navigations) — Design Supply · Free — A calmer way to open your menu
-   [Collapsible Sidebar](/component/collapsible-sidebar) — Marso Angelov · $10 — Responsive Side Navigation
-   [Dial Picker](/component/dial-picker) — Tanmay Kaper · $14 — A machined dial for your projects
-   [Expanding Side Menu](/component/expanding-side-menu) — Russet Supply · $5 — Animated Framer Navigation