Collapsible Table of Contents Framer Component

Collapsible TOC is a fully-featured, collapsible Table of Contents component for Framer that dynamically generates a navigation menu based on your page content. It is designed to improve content navigation for users and enhance the presentation of structured documents, blogs, or portfolio pages.

Key Features

1. Dynamic Heading Extraction

   • Automatically scans your connected Formatted Text CMS field for H2 and H3 headings.

   • Assigns unique IDs to headings if they don’t already exist.

   • Filters headings based on user preferences (showH2, showH3).

2. This is an H3

   • H2 headings act as parent items.

   • H3 headings are nested under their respective H2 parents.

   • Supports collapsible/expandable sections for a clean, structured view.

3. This is an H3

   • Each H2 heading with children has a toggle icon (customizable, e.g., + / × or Lucide icons).

   • Sections can start expanded or collapsed based on initialExpanded settings.

   • Smooth animation provides a visually appealing expand/collapse experience.

4. Main TOC Toggle

   • The entire Table of Contents can be collapsed or expanded via a title bar toggle.

   • Main toggle supports Plus / X or Lucide icons, customizable styling, and smooth transitions.

5. Active Section Highlighting

   • Automatically highlights the currently visible section using Intersection Observer.

   • Active items can have custom colors, background, and padding to stand out.

6. Smooth Scroll Navigation

   • Clicking a TOC link scrolls smoothly to the corresponding heading.

   • Scroll offset is configurable (scrollOffset) to account for sticky headers.

7. Customizable Styling

   • Full control over container padding, border radius, background color.

   • Link colors, hover states, and active states are configurable.

   • Font styles for H2 and H3 links can be adjusted separately.

   • Indentation for nested H3 items is adjustable for visual clarity.

8. Hover & Accessibility Features

   • Hover state highlights links for improved interactivity.

   • Keyboard accessibility for toggle actions using Enter/Space keys.

   • Aria attributes can be added for screen readers (expandable, active section).

9. No Content Feedback

   • Displays a placeholder message if the connected CMS field is empty or missing.

10. Performance Optimizations

    • Uses React’s startTransition to prevent blocking updates when headings or active states change.

    • Efficient Intersection Observer implementation ensures smooth tracking even on long pages.

Why Use Collapsible Table of contents?

• Makes long pages easier to navigate.

• Improves user experience with collapsible nested sections.

• Fully customizable to match any brand or website style.

• Ideal for portfolio sites, documentation, blogs, and rich content pages.