9 Best Framer Table of Contents Components in 2026

Blog Side Nav - TOC from Dan Marek is the most layout-flexible TOC on this list. Switch between Click Menu, Popover, and Animated Lines modes so the same component reads like Substack, Notion, or Stripe depending on the page. Custom heading ranges let you track H2 through H4 while skipping the article title and footer clutter, and exclude selectors hide headings inside .no-toc wrappers. CMS-bindable label overrides mean each article can rename TOC items without touching the component. At 8 USD it is the default pick when stakeholders want more than a plain sidebar list. Skip it if you only need a minimal inline TOC with no interaction modes.

TableOfContent_v1 from Vladyslav Romaniuk auto-detects semantic H1 through H6 tags inside any content container and builds a nested navigation tree with live active-section highlighting. Optional URL hash updates give readers deep links that survive the back button, and the markup uses nav/list structure with aria-current for keyboard users. Scroll offset controls account for fixed headers so the highlight state switches at the right scroll position. At 7 USD it beats hand-rolling Intersection Observer overrides for technical docs. The tradeoff is visual simplicity: you get structure and accessibility, not popover chrome or animated line effects.

Offset TOC from Abdullah Ahmed solves the most common TOC frustration in Framer: headings that scroll behind sticky navbars. Assign a Section ID to your CMS Rich Text wrapper, enter the same ID in the component, and it auto-generates links from every H1 through H6 with configurable offset so targets land in the visible viewport. Vertical and horizontal layouts, optional numbering, and active heading detection ship in the free package. Reach for it first on any sticky-header blog before you buy a premium TOC. It will not give you collapsible nested sections or CMS label overrides like Blog Side Nav.

CMS TOC Kit from Molly Hung targets teams that want a turnkey CMS blog sidebar, not just a component file. Purchase includes a remix link with the component pre-wired plus a step-by-step connection guide for CMS formatted text fields. Property controls cover left, center, or right alignment, menu width, heading level filters, optional section numbering, container borders, shadows, highlight radius, and scroll offset for sticky headers. At 19 USD it costs more than single-purpose TOCs, but the bundled tutorial saves billable setup time on client handoffs. Skip it if you already know how to bind Rich Text fields and only need a 7 USD auto-detect component.

Nabeel’s Table of Contents component connects directly to CMS Rich Text on detail pages without overrides. Paste it on the template, point it at the Rich Text layer (optionally scoped with a section ID), and it lists every heading on the page with separate font controls per heading level plus normal, hover, and active colors. Indentation, spacing, and y-offset tuning keep the sidebar aligned with your article column. Nabeel ships reliable CMS utilities across the marketplace, so this is a safe pick when you trust the creator more than a flashy interaction mode. It lacks collapsible nested menus and popover layouts found in Blog Side Nav or Collapsible TOC.

Collapsible TOC from Kai Studio organizes long pages into expandable sections. H2 headings act as parent items with toggle icons, H3 children nest underneath, and a main title bar collapses the entire TOC when readers need full-width content. Smooth scroll, configurable scroll offset, and customizable plus or Lucide toggle icons keep the interaction polished on docs and portfolio case studies. At 14 USD it is the right buy when flat sidebar lists become unreadable on 3,000-word guides. It assumes properly nested heading tags; flat H2-only articles will not benefit from the collapse logic.

Table of Content Pro from Kai Studio is the lighter sibling to Collapsible TOC. Drop it on a CMS detail page, connect a Formatted Text field, and it auto-detects H1 through H4 headings with smooth scroll and scroll offset for sticky nav. Layout, font, color, spacing, and indent controls live in the property panel without code. At 12 USD it suits teams that want Kai Studio polish without paying for collapsible nesting or a bundled remix tutorial. Choose Collapsible TOC or Blog Side Nav when the page hierarchy runs three or more levels deep.

Scroll Spy Nav from Minjoo Kim targets a different workflow than auto-detect TOCs. Add Scroll Section IDs to page frames, wire each menu item to a Target ID, set position sticky, and the component highlights the active section while smooth-scrolling clicked items to the center of the viewport instead of the top edge. Vertical sidebar and horizontal top-bar layouts ship with dot indicators and separate normal vs active styling. At 6 USD it is the budget pick for one-page marketing sites where sections are frames, not Rich Text headings. Skip it on CMS blog templates unless you are willing to maintain manual ID lists per article.

ToC CMS free from Jan Kadrnka is a minimalist auto-generated table of contents for CMS blog articles. Choose which heading levels to include, set the scroll position where active highlighting kicks in, and tune colors, fonts, padding, indicator shape, and animation speed from the property panel. It covers the essentials (detect headings, highlight on scroll, smooth anchor jumps) without popover modes, collapsible nesting, or CMS label overrides. Install it when Offset TOC feels too styled or you want a second free option to compare on the same template. Production docs sites with sticky nav offset headaches should still start with Offset TOC.