5d:I[333483,["/creators-assets/_next/static/immutable/chunks/356g_j0l71_46.js","/creators-assets/_next/static/immutable/chunks/15s1ft4k9lx-7.js","/creators-assets/_next/static/immutable/chunks/0x8sumr53pdkk.js","/creators-assets/_next/static/immutable/chunks/3pud1dqsw0-_7.js","/creators-assets/_next/static/immutable/chunks/1m75iqpnspynu.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/3ohf-5_4hfjuq.js","/creators-assets/_next/static/immutable/chunks/2jjhfe7-w6y9a.js","/creators-assets/_next/static/immutable/chunks/325i2v5l4tnlq.js","/creators-assets/_next/static/immutable/chunks/0kisxyo3aw231.js","/creators-assets/_next/static/immutable/chunks/2b1mm8iiske-y.js","/creators-assets/_next/static/immutable/chunks/0i7m0zg6jfazw.js","/creators-assets/_next/static/immutable/chunks/3-hmotkz_bdv_.js","/creators-assets/_next/static/immutable/chunks/06bqtx1jsc1kz.js","/creators-assets/_next/static/immutable/chunks/3q5wansxm4vp6.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/3naniu4pnqfyw.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/456d4lcv9-syj.js","/creators-assets/_next/static/immutable/chunks/36-o7-3julke0.js","/creators-assets/_next/static/immutable/chunks/2xq6uu2rcdc2i.js","/creators-assets/_next/static/immutable/chunks/2y9gv91n8o3i9.js","/creators-assets/_next/static/immutable/chunks/41i4r4u9uolgz.js","/creators-assets/_next/static/immutable/chunks/02ciyo_cdpkrz.js","/creators-assets/_next/static/immutable/chunks/3e73rezw4k1a2.js","/creators-assets/_next/static/immutable/chunks/15q00pdqk0br3.js","/creators-assets/_next/static/immutable/chunks/293prjxu_wz0c.js","/creators-assets/_next/static/immutable/chunks/0l9v835j421-s.js","/creators-assets/_next/static/immutable/chunks/40oma2w708rd-.js","/creators-assets/_next/static/immutable/chunks/2x7-2b3jcc9x7.js","/creators-assets/_next/static/immutable/chunks/3_pg4jxj9aiiw.js","/creators-assets/_next/static/immutable/chunks/3k6sa9ujkqb5c.js","/creators-assets/_next/static/immutable/chunks/3l2h8slpbzxqo.js","/creators-assets/_next/static/immutable/chunks/2xgtw4s-tlhet.js","/creators-assets/_next/static/immutable/chunks/3b306xa-3tb7g.js","/creators-assets/_next/static/immutable/chunks/2fvzgkzqkig_w.js","/creators-assets/_next/static/immutable/chunks/3g6klxxyg4m8-.js","/creators-assets/_next/static/immutable/chunks/0qx5rzvbsd7bx.js","/creators-assets/_next/static/immutable/chunks/1cphzzg2t2qo2.js"],"PostDetailCard"] 5e:Tf17,

How the Table of Contents Component Works

Description:

Drop this component on any long-form page and it builds a working table of contents from your actual headings, no selectors to type, no CMS fields to wire up, no manual anchor links. It reads H2, H3, and H4 from the live DOM the moment the page loads and stays in sync as your content changes.

Two layouts, one component

On desktop it renders as a clean card, designed to sit in a sticky sidebar column. On mobile, below your chosen breakpoint, the sidebar disappears and a floating pill button appears fixed at the bottom center of the screen. The pill always shows the name of the section the reader is currently in. Tapping it opens a smooth bottom drawer with the full heading list. Tap any item, it scrolls there and closes the drawer. No extra setup for mobile, it just works.

Everything is customizable from the Properties panel

Background, border, and all text colors
Active text color and indicator bar color
Hover background for desktop
Title label, title size, and font (any Google Font by name, auto-loaded)
Scroll offset to account for your navbar height
Smooth scroll toggle
H2, H3, and H4 each have their own size, weight, indent, and inactive color
Mobile breakpoint, pill background color, and pill text color
The drawer automatically inherits desktop colors, nothing to set twice

Setup (30 seconds):

Drop this component anywhere on your page.
Select the Frame that wraps your article content (H2/H3/H4s, paragraphs, images).
Open Accessibility → set Tag to main, article, or section.
Publish.

Why $5

Every other TOC component on the marketplace is either free (no mobile behavior) or $7 to $15 (with configurations that require pointing at selectors or connecting CMS fields). This one does more out of the box and costs less than any of the paid alternatives. The price is low because the goal is volume, more designers using it means more feedback, better updates, and a better component for everyone over time.

What you get

Full source code, copy to any Framer project
Desktop sticky sidebar
Mobile floating pill and bottom drawer
Per-heading-level controls for H2, H3, H4
Any Google Font supported
Smooth scroll with configurable offset
Informative editor placeholder so you always know what to expect in Preview
Future updates included

Best for: Blogs, Articles, UX case study portfolios, documentation pages, changelogs, and any page where a reader benefits from knowing where they are.

5a:[["$","$L5d",null,{"post":{"id":"019df8a4-3674-7993-8c7a-68c53d4eee7a","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"0ae2481a-d862-4f17-86a7-d8b9373e7666","name":"ARUNVIKRAM S","slug":"arunvikram-s","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/40464/avatar-PjkCmAobqyQiSDQiBWYhH0I8Yo4unx.jpg","followed":false,"followsYou":false},"media":[],"resources":[{"id":"xyiLIvKuKu2qLe1zKbB9","resolved":true,"title":"Smart TOC Component","body":"$5e","bodyJson":null,"introduction":"Auto-reads headings. Mobile pill+drawer","slug":"smart-toc-component","author":{"framerUserId":"0ae2481a-d862-4f17-86a7-d8b9373e7666","name":"ARUNVIKRAM S","slug":"arunvikram-s","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/40464/avatar-PjkCmAobqyQiSDQiBWYhH0I8Yo4unx.jpg","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/xyiLIvKuKu2qLe1zKbB9/smart-toc-component-mWEYxngDKhDx63EikRUkZWgy1ljl0M","metadata":{"tint":{"h":0,"s":0,"l":57},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-04-11T08:18:58.462Z","updatedAt":"2026-05-09T05:52:32.569Z","publishedAt":"2026-05-05T14:56:44.660Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://tableofcontent.framer.website/toc-component","price":"5","paymentUrl":"https://buy.polar.sh/polar_cl_JDiyQs6MZDFX7CxB0x6ondec8BRh7FI86Midi225Jo2","workshop":false,"categories":[{"id":"4c691677-c621-4041-a908-cbc2d3272658","name":"Navigation","slug":"navigation"}],"lastSaveId":"WjOMKJlCJJEaTrAHGeEq","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":4,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-05-05T14:56:44.660Z","updatedAt":"2026-05-05T14:56:44.660Z","reported":false}}],"$L5f"]

Suggested for you