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:Ta82,

Simply add this vertical Side Nav component to your website to instantly see a Dynamic Table of Contents that live updates based on the content on your site (even works for CMS content).

Choose from three different modes:

Click Menu - NEW (inspired by Substack)

Hover over the menu to reveal a background change, then click to open/close the popover.

Popover (inspired by Notion)

When you need to display extensive navigation in a clean, organized way, popover mode reveals a beautiful menu overlay on hover. Perfect for long-form content, documentation, or any situation where you want to show the complete content structure without cluttering your design.

Animated Lines (inspired by Stripe).

Perfect for minimal, focused navigation experiences. When users hover over navigation elements, lines dynamically scale based on proximity to their cursor, creating an elegant visual hierarchy that feels both sophisticated and intuitive.

Advanced Features:

Custom Heading Range - Target exactly which headings to track (e.g., H2-H4 only). Skip your H1 title and avoid footer clutter.
Exclude Selectors - Hide headings inside specific containers (like .no-toc or .footer-nav) from appearing in the TOC.
CMS-Bindable Labels - Override any TOC item with custom text, and bind each label to CMS variables for per-article control.

You have complete flexibility to choose what is shown inside the component and even create custom labels overrides too!

View the full demo here

Feel free to check out my other Scroll Indicator / TOC component here

Framer Side Navigation Demo

5a:[["$","$L5d",null,{"post":{"id":"01987eca-8fed-7146-8269-164d4dc81e45","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"819018d8-b8c8-4378-b063-47f1b74d7585","name":"Dan Marek","slug":"dan-marek","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/28940/6d0MJdcJf21RQ6wMHwqlIhnIjvc-S4CurXlBHerBb9gilLBCgkpxiqogUC.png","followed":false,"followsYou":false},"media":[],"resources":[{"id":"nVEu7ErMudPMgy0Vn7GS","resolved":true,"title":"Blog Side Nav - TOC","body":"$5e","bodyJson":null,"introduction":"Table of Contents - Compatible with CMS","slug":"blog-side-nav-cms","author":{"framerUserId":"819018d8-b8c8-4378-b063-47f1b74d7585","name":"Dan Marek","slug":"dan-marek","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/28940/6d0MJdcJf21RQ6wMHwqlIhnIjvc-S4CurXlBHerBb9gilLBCgkpxiqogUC.png","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/nVEu7ErMudPMgy0Vn7GS/blog-side-nav-cms-bHiiVx9LbpJ46KCuiLqM8aytcyWOMB","metadata":{"tint":{"h":0,"s":0,"l":57},"width":1600,"height":1200}}],"post":null,"createdAt":"2025-08-01T12:20:03.074Z","updatedAt":"2026-02-06T11:43:58.173Z","publishedAt":"2025-08-06T09:51:01.101Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://framer-toc-side-navigation.framer.website/dynamic-side-navigation-table-of-contents-component","price":"8","paymentUrl":"https://marek-design.lemonsqueezy.com/checkout/buy/0facfc32-dfbd-447a-8c22-c089a60086fb","workshop":false,"categories":[{"id":"4c691677-c621-4041-a908-cbc2d3272658","name":"Navigation","slug":"navigation"}],"lastSaveId":"z0jGwMQ19hRWScrr8gSP","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":6,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2025-08-06T09:51:01.101Z","updatedAt":"2025-08-06T09:51:01.101Z","reported":false}}],"$L5f"]

Suggested for you