5f:I[267044,["/creators-assets/_next/static/immutable/chunks/356g_j0l71_46.js","/creators-assets/_next/static/immutable/chunks/40ipl9wdtrm_x.js","/creators-assets/_next/static/immutable/chunks/1bd061yvfby7i.js","/creators-assets/_next/static/immutable/chunks/2ii8lkleumgkk.js","/creators-assets/_next/static/immutable/chunks/1jubx4t_1hq7l.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/1amcd-eostlux.js","/creators-assets/_next/static/immutable/chunks/06b9gh03a5itu.js","/creators-assets/_next/static/immutable/chunks/19qq0hy3mz_vv.js","/creators-assets/_next/static/immutable/chunks/2oixy7hansmjm.js","/creators-assets/_next/static/immutable/chunks/2rczsbgoa3afm.js","/creators-assets/_next/static/immutable/chunks/3kkqflhmmpg9p.js","/creators-assets/_next/static/immutable/chunks/2504rifrkrd_l.js","/creators-assets/_next/static/immutable/chunks/3xzkckc77quth.js","/creators-assets/_next/static/immutable/chunks/0ib-rcz4b0eq3.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/25aeqr2ydtz4o.js","/creators-assets/_next/static/immutable/chunks/2hfz7h1vpjv9v.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/2a63j-5qkrdf4.js","/creators-assets/_next/static/immutable/chunks/0mgwzh6o644jl.js","/creators-assets/_next/static/immutable/chunks/41glpbsahf_22.js","/creators-assets/_next/static/immutable/chunks/0xd4yj8g3g-ci.js","/creators-assets/_next/static/immutable/chunks/31t_i-sjkqwxc.js","/creators-assets/_next/static/immutable/chunks/3o5qsyzxffd89.js","/creators-assets/_next/static/immutable/chunks/0sdd6rzuigoor.js","/creators-assets/_next/static/immutable/chunks/31wecb1pe5ugs.js","/creators-assets/_next/static/immutable/chunks/2bej0vd4kut9m.js","/creators-assets/_next/static/immutable/chunks/3f4d4x4z1mrzh.js","/creators-assets/_next/static/immutable/chunks/0mf-dfabvof5m.js","/creators-assets/_next/static/immutable/chunks/28zsl3gu7sgg3.js","/creators-assets/_next/static/immutable/chunks/2r15b2hek61lg.js","/creators-assets/_next/static/immutable/chunks/31uxrh745m-yq.js","/creators-assets/_next/static/immutable/chunks/2qeyp4zfa4qwb.js","/creators-assets/_next/static/immutable/chunks/1hrrs8zq4ee_v.js","/creators-assets/_next/static/immutable/chunks/19r4rf2zyng-y.js","/creators-assets/_next/static/immutable/chunks/14pxn0b6e1dc9.js","/creators-assets/_next/static/immutable/chunks/3eh5q_6ksmw0l.js","/creators-assets/_next/static/immutable/chunks/0kwdy8yc-c0ba.js","/creators-assets/_next/static/immutable/chunks/2rdaqkxiyeq_6.js"],"S"] 60:Tb25,

Right-Side Hover Table of Contents (Free)

A free Notion-inspired, ChatGPT-style floating Table of Contents for Framer that automatically generates navigation from your page headings. Perfect for documentation, blogs, knowledge bases, help centres, and Framer CMS pages. No manual anchors, no configuration, and no maintenance required.

Features

🆓 Free Framer component – Just drop it into your project and it works.
📑 Notion & ChatGPT-inspired TOC – Clean, modern floating navigation similar to the documentation experience in Notion and ChatGPT.
⚡ Automatic heading detection – Scans H1, H2, H3 (or custom selectors) and builds the outline automatically.
🎯 Scroll Spy – Highlights the current section as users scroll.
🚀 Smooth scrolling – Click any heading to jump directly to that section with configurable offsets.
🧩 Framer CMS compatible – Automatically updates with CMS Rich Text content and dynamically loaded pages.
🔄 Real-time updates – Detects DOM changes, making it ideal for dynamic content, tabs, and CMS.
🌗 Light & Dark mode – Adapts automatically to the user's preferred colour scheme.
🎨 Minimal floating design – Compact collapsed state with an elegant hover-to-expand navigation panel.
⚙ Customisable – Configure heading selectors, title, scroll offset, spacing, and navigation indicators without editing code.

Perfect for

Developer documentation
Product documentation
Portfolio Case Studies
Framer CMS blogs
Knowledge bases
Help centres
API documentation
Long-form articles
Landing pages with multiple sections

Simply add the component to your page, publish, and your interactive Table of Contents is generated automatically. No anchor links, manual IDs, or ongoing maintenance required.

5e:["$","$L5f",null,{"value":{"fallback":{"$inf$activity-creator-48187080-0210-4d90-91f5-f31629a7fb5a-all:/unified/creator/48187080-0210-4d90-91f5-f31629a7fb5a/activity/":[{"data":[{"id":"019f9e1e-8fbd-75c8-a3a5-ce6e83c674ab","type":"component.created","target":{"type":"component","id":"i4xyrg6mVJXT0IK2vPS1","preview":"TOC Component","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/48187080-0210-4d90-91f5-f31629a7fb5a/019f9e0f-3556-72ad-a3e1-d4609714c5d7.png","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"48187080-0210-4d90-91f5-f31629a7fb5a","name":"Esakki kumar","avatar":null,"slug":"esakki-kumar","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"component","visibility":"public","startedAt":"2026-07-26T11:10:30.845Z","latestAt":"2026-07-26T11:10:30.845Z"},{"id":"019f6b2d-c20f-71db-9f95-850d2c881ab6","type":"component.liked","target":{"type":"component","id":"xx99X8dO7V1Egbc8GwnH","preview":"Animated Gradient","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/xx99X8dO7V1Egbc8GwnH/animated-gradient-PvBoUC65Ayl1gvq0W3mPqzBoZcR9IG","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"48187080-0210-4d90-91f5-f31629a7fb5a","name":"Esakki kumar","avatar":null,"slug":"esakki-kumar","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"component","visibility":"public","startedAt":"2026-07-16T13:46:28.737Z","latestAt":"2026-07-16T13:46:28.737Z"}],"pagination":{"next":null,"previous":null},"totalCount":"$undefined","feedSession":"$undefined"}],"$inf$posts:48187080-0210-4d90-91f5-f31629a7fb5a:/unified/posts/?creator=48187080-0210-4d90-91f5-f31629a7fb5a&with=reposts":[{"data":[{"id":"019f9e1e-8e4a-732d-b559-7e5f50cffb83","title":null,"body":"

New free component: Notion-style TOC for Framer. Zero setup, just works.

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"New free component: Notion-style TOC for Framer. Zero setup, just works."}]}]},"author":{"framerUserId":"48187080-0210-4d90-91f5-f31629a7fb5a","name":"Esakki kumar","slug":"esakki-kumar","avatar":null,"followed":false,"followsYou":false},"media":[],"resources":[{"id":"i4xyrg6mVJXT0IK2vPS1","resolved":true,"title":"TOC Component","body":"$60","bodyJson":{"type":"doc","content":[{"type":"customHeading","content":[{"type":"text","text":"Right-Side Hover Table of Contents (Free)"}],"attrs":{"level":1}},{"type":"paragraph","content":[{"type":"text","text":"A "},{"type":"text","text":"free","marks":[{"type":"bold"}]},{"type":"text","text":" Notion-inspired, ChatGPT-style floating Table of Contents for Framer that automatically generates navigation from your page headings. Perfect for documentation, blogs, knowledge bases, help centres, and Framer CMS pages. No manual anchors, no configuration, and no maintenance required."}]},{"type":"customHeading","content":[{"type":"text","text":"Features"}],"attrs":{"level":2}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"emoji","attrs":{"name":"free","emoji":"🆓"}},{"type":"text","text":" "},{"type":"text","text":"Free Framer component","marks":[{"type":"bold"}]},{"type":"text","text":" – Just drop it into your project and it works."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"emoji","attrs":{"name":"bookmark_tabs","emoji":"📑"}},{"type":"text","text":" "},{"type":"text","text":"Notion & ChatGPT-inspired TOC","marks":[{"type":"bold"}]},{"type":"text","text":" – Clean, modern floating navigation similar to the documentation experience in Notion and ChatGPT."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"emoji","attrs":{"name":"zap","emoji":"⚡"}},{"type":"text","text":" "},{"type":"text","text":"Automatic heading detection","marks":[{"type":"bold"}]},{"type":"text","text":" – Scans "},{"type":"text","text":"H1","marks":[{"type":"code"}]},{"type":"text","text":", "},{"type":"text","text":"H2","marks":[{"type":"code"}]},{"type":"text","text":", "},{"type":"text","text":"H3","marks":[{"type":"code"}]},{"type":"text","text":" (or custom selectors) and builds the outline automatically."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"emoji","attrs":{"name":"dart","emoji":"🎯"}},{"type":"text","text":" "},{"type":"text","text":"Scroll Spy","marks":[{"type":"bold"}]},{"type":"text","text":" – Highlights the current section as users scroll."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"emoji","attrs":{"name":"rocket","emoji":"🚀"}},{"type":"text","text":" "},{"type":"text","text":"Smooth scrolling","marks":[{"type":"bold"}]},{"type":"text","text":" – Click any heading to jump directly to that section with configurable offsets."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"emoji","attrs":{"name":"jigsaw","emoji":"🧩"}},{"type":"text","text":" "},{"type":"text","text":"Framer CMS compatible","marks":[{"type":"bold"}]},{"type":"text","text":" – Automatically updates with CMS Rich Text content and dynamically loaded pages."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"emoji","attrs":{"name":"arrows_counterclockwise","emoji":"🔄"}},{"type":"text","text":" "},{"type":"text","text":"Real-time updates","marks":[{"type":"bold"}]},{"type":"text","text":" – Detects DOM changes, making it ideal for dynamic content, tabs, and CMS."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"emoji","attrs":{"name":"last_quarter_moon","emoji":"🌗"}},{"type":"text","text":" "},{"type":"text","text":"Light & Dark mode","marks":[{"type":"bold"}]},{"type":"text","text":" – Adapts automatically to the user's preferred colour scheme."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"emoji","attrs":{"name":"art","emoji":"🎨"}},{"type":"text","text":" "},{"type":"text","text":"Minimal floating design","marks":[{"type":"bold"}]},{"type":"text","text":" – Compact collapsed state with an elegant hover-to-expand navigation panel."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"emoji","attrs":{"name":"gear","emoji":"⚙"}},{"type":"text","text":" "},{"type":"text","text":"Customisable","marks":[{"type":"bold"}]},{"type":"text","text":" – Configure heading selectors, title, scroll offset, spacing, and navigation indicators without editing code."}]}]}]},{"type":"customHeading","content":[{"type":"text","text":"Perfect for"}],"attrs":{"level":2}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Developer documentation"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Product documentation"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Portfolio Case Studies"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Framer CMS blogs"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Knowledge bases"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Help centres"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"API documentation"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Long-form articles"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Landing pages with multiple sections"}]}]}]},{"type":"paragraph","content":[{"type":"text","text":"Simply add the component to your page, publish, and your interactive Table of Contents is generated automatically. No anchor links, manual IDs, or ongoing maintenance required."}]}]},"introduction":"Free TOC Component","slug":"toc-component","author":{"framerUserId":"48187080-0210-4d90-91f5-f31629a7fb5a","name":"Esakki kumar","slug":"esakki-kumar","avatar":null,"followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/48187080-0210-4d90-91f5-f31629a7fb5a/019f9e0f-3556-72ad-a3e1-d4609714c5d7.png","metadata":{"tint":{"h":0,"s":0,"l":3},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-07-26T11:10:30.074Z","updatedAt":"2026-07-26T11:10:30.074Z","publishedAt":"2026-07-26T11:10:30.069Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":"https://framer.com/m/ScrollIndicator-orbv2L.js@KeVGHdlPlBwF8TMHndP7","previewUrl":"https://visual-hands-680849.framer.app/","price":null,"paymentUrl":null,"workshop":false,"categories":[{"id":"4c691677-c621-4041-a908-cbc2d3272658","name":"Navigation","slug":"navigation"}],"lastSaveId":"KeVGHdlPlBwF8TMHndP7","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":15,"liked":false},"comments":{"count":1},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-07-26T11:10:30.474Z","updatedAt":"2026-07-26T11:10:30.474Z"}],"pagination":{"next":null,"previous":null},"totalCount":"$undefined","feedSession":"$undefined"}]}},"children":"$L61"}]