56:I[473921,["/creators-assets/_next/static/immutable/chunks/456dxp3afc8vw.js","/creators-assets/_next/static/immutable/chunks/2bxtessbrg0z1.js","/creators-assets/_next/static/immutable/chunks/0bntpu9zyiup3.js","/creators-assets/_next/static/immutable/chunks/3283ev4bymz-y.js","/creators-assets/_next/static/immutable/chunks/0_p7_rfyih3ce.js","/creators-assets/_next/static/immutable/chunks/24bk4ojcoor5n.js","/creators-assets/_next/static/immutable/chunks/3x7cofmdt-u_a.js","/creators-assets/_next/static/immutable/chunks/18e_sauhpyyit.js","/creators-assets/_next/static/immutable/chunks/13xqrk3e5k8yu.js","/creators-assets/_next/static/immutable/chunks/00hohn9l3ocx9.js","/creators-assets/_next/static/immutable/chunks/3oybmd01gs-b6.js","/creators-assets/_next/static/immutable/chunks/0vxt9zvn936s0.js","/creators-assets/_next/static/immutable/chunks/1yn3k6g09tq32.js","/creators-assets/_next/static/immutable/chunks/3ly-i84yiij4i.js","/creators-assets/_next/static/immutable/chunks/1cey7skpirawe.js","/creators-assets/_next/static/immutable/chunks/3fujn21cf_mt1.js","/creators-assets/_next/static/immutable/chunks/2n9qmawfhavju.js","/creators-assets/_next/static/immutable/chunks/0m8lhf01xskqj.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/3uo-268z2xnq9.js","/creators-assets/_next/static/immutable/chunks/3q5wansxm4vp6.js","/creators-assets/_next/static/immutable/chunks/2lxef2-u417vc.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/0mgwzh6o644jl.js","/creators-assets/_next/static/immutable/chunks/439i_r5_4eszl.js","/creators-assets/_next/static/immutable/chunks/2ch5kewqiwntv.js","/creators-assets/_next/static/immutable/chunks/3e73rezw4k1a2.js","/creators-assets/_next/static/immutable/chunks/3xmobvbzj3637.js","/creators-assets/_next/static/immutable/chunks/26fs9mkd8gzie.js","/creators-assets/_next/static/immutable/chunks/0toe1wcov_38e.js","/creators-assets/_next/static/immutable/chunks/110hzb6dmcbdr.js","/creators-assets/_next/static/immutable/chunks/2eiu9v0ook5ln.js","/creators-assets/_next/static/immutable/chunks/1zt764sfv2wd7.js","/creators-assets/_next/static/immutable/chunks/0l9v835j421-s.js","/creators-assets/_next/static/immutable/chunks/3k6sa9ujkqb5c.js","/creators-assets/_next/static/immutable/chunks/3nd1mzwm7q_f7.js","/creators-assets/_next/static/immutable/chunks/3gx0_q52o4oil.js","/creators-assets/_next/static/immutable/chunks/0u_jiik6ovv_e.js","/creators-assets/_next/static/immutable/chunks/2warb3xv9rce7.js","/creators-assets/_next/static/immutable/chunks/1tvhyiuh-gmez.js"],"PostDetailCard"] 57:T8d1,

Dynamic Table of Contents — Details

A plug‑and‑play Table of Contents that automatically builds a nested navigation from the headings in any article or blog post. It adapts to your content, highlights the active section as you scroll, supports deep links, and offers full styling control so it matches your site design.

Key features

Automatic detection of semantic headings (H1–H6) and generation of a nested TOC.
Live active-section highlighting as the reader scrolls (configurable offset).
Smooth scrolling to anchors and optional URL hash updates for deep linking/back-button behavior.
Responsive behavior: sticky sidebar on desktop.
Customizable appearance: colors, fonts, spacing.
Settings to choose heading levels, scroll offset, and more.
Works with static and dynamically loaded content.
Accessibility-minded markup (nav/list structure, aria-current, keyboard navigation).

Quick setup

Place the component where you want the TOC (sidebar or inline).
In the component settings, point the TOC at your content container by entering its selector (example: #1).
Select which heading levels to include and set the Scroll Offset (use your header height or a percent — e.g., 35%).

Tips & notes

If your site has a fixed header, set Scroll Offset to the header height so the active state updates at the right moment.
The TOC relies on semantic headings — ensure content uses proper h1–h6 tags for best results.

What’s included

The TOC component with full settings panel
Demo article to preview behavior
Quick-start instructions and documentation
Ongoing updates and priority support for paid purchasers

53:[["$","$L56",null,{"post":{"id":"019ada44-9ec9-75c6-a2bd-48c623ed6f12","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"69815f2d-2abf-4fc5-9c45-be70e63f2c32","name":"Vladyslav Romaniuk","slug":"vladyslav-romaniuk","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/82584/avatar-crL6Ai5ynM6TOGXDDtLXYMlOl1UYK4.jpg","followed":false,"followsYou":false},"media":[],"resources":[{"id":"7ZYfFjS7rM1aSCRTUN86","resolved":true,"title":"TableOfContent_v1","body":"$57","bodyJson":null,"introduction":"","slug":"tableofcontent-v1","author":{"framerUserId":"69815f2d-2abf-4fc5-9c45-be70e63f2c32","name":"Vladyslav Romaniuk","slug":"vladyslav-romaniuk","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/82584/avatar-crL6Ai5ynM6TOGXDDtLXYMlOl1UYK4.jpg","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/7ZYfFjS7rM1aSCRTUN86/content-toc-v1-E2vgbYpZeDrw7sLPKhClggzZosbuE4","metadata":{"tint":{"h":0,"s":0,"l":57},"width":1600,"height":1200}}],"post":null,"createdAt":"2025-11-20T21:48:50.782Z","updatedAt":"2026-01-06T21:46:00.133Z","publishedAt":"2025-12-01T14:15:21.545Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://personal-happen-394149.framer.app/","price":"7","paymentUrl":"https://www.patreon.com/posts/table-of-dynamic-144038220?utm_medium=clipboard_copy&utm_source=copyLink&utm_campaign=postshare_creator&utm_content=join_link","workshop":false,"categories":[{"id":"4c691677-c621-4041-a908-cbc2d3272658","name":"Navigation","slug":"navigation"}],"lastSaveId":"BEerOncDBeHICvpUz4Kj","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":"2025-12-01T14:15:21.545Z","updatedAt":"2025-12-01T14:15:21.545Z","reported":false,"type":"post"}}],"$L58"]

Suggested for you