About Offset TOC
Offset TOC — Smart Table of Contents for Sticky Navbar Sites
A clean, customizable Table of Contents component that automatically detects H1–H6 headings inside a content section and scrolls with precise offset support for sticky navbars.
No spacer hacks. No broken anchor links. No layout workarounds.
Just smooth, accurate navigation that works beautifully with long-form content.
About this Component
Offset TOC generates a fully customizable table of contents from headings inside a target content container.
Simply assign an ID to your Rich Text or CMS content wrapper, then enter the same Section ID inside the component. Offset TOC will automatically detect all H1–H6 headings within that section and generate smooth-scrolling navigation links.
The component includes built-in offset support, helping headings land correctly below sticky or fixed navbars without requiring extra spacing or layout adjustments.
Existing heading IDs are preserved automatically. If a heading doesn’t already have an ID, the component safely generates a unique scoped ID internally to avoid conflicts.
Features
Automatically detects H1–H6 headings
Smooth scrolling navigation
Built-in sticky navbar offset support
Vertical and horizontal layouts
Active heading detection while scrolling
Full typography and color customization
Hover and active states
Optional numbering system
Clean underline interaction
Preserves existing heading IDs
Safe unique ID generation for missing headings
Why it’s Different
Most TOC components require manual spacing hacks or extra padding to prevent headings from hiding behind sticky navbars.
Offset TOC solves that directly with configurable offset support, keeping your layout clean while ensuring every heading scrolls into the correct position.
It’s designed specifically for modern Framer sites using blogs, CMS collections, documentation, and long-form content.
Setup
Select your Rich Text or CMS content wrapper
Add a Section ID (example: content)
Enter the same ID inside the Offset TOC component
The component will automatically detect all headings inside that section.
Perfect For
Blogs
Documentation
Knowledge bases
CMS-powered articles
Long-form landing pages
Educational content
Free to use.