Complete Component Documentation

Product Overview

The Right-Side Hover Table of Contents is a dynamic, zero-maintenance navigation component designed for long-form content, developer documentation, and Framer CMS templates. By automatically scanning the document's DOM hierarchy, it constructs an interactive layout outline without requiring manual anchor links or static text inputs.

Technical Architecture & Core Mechanism

1. Dynamic DOM Discovery

Selector Parsing: Scans the page DOM for target elements specified in the configuration (e.g., h1, h2, h3).
Anchor Generation: Automatically assigns unique fallback IDs (toc-0, toc-1) to any target heading missing an explicit element ID.
Mutation Observer Integration: Continuously monitors DOM changes to ensure dynamically loaded content—such as CMS blog posts, tab switches, or lazy-loaded articles—updates the outline in real time.

2. Scroll Tracking & Observer System

IntersectionObserver Engine: Tracks heading visibility within the active viewport threshold using configurable top and bottom margins.
Manual Scroll Locking: Temporarily suspends intersection tracking during programmatically triggered smooth scrolls to prevent outline jitter when jumping between sections.

Key Features

Scroll Spy Precision

Automatically highlights the heading nearest to the user's focus point.
Supports customizable pixel offsets to accommodate sticky navigation headers or top banners.

Light & Dark Theme Adaptation

Uses a pure grayscale color palette (#09090b and #fafafa base tokens).
Detects system color preferences (prefers-color-scheme) automatically without external CSS dependencies or color overrides.

Collapsed & Expanded Hover States

Collapsed View: Displays a subtle, minimalist set of horizontal lines on the edge of the viewport.
Expanded Panel: Smoothly animates into a readable navigation card with a blurred backdrop when hovered.

Configuration & Property Controls

Property	Type	Default	Description
Title	String	`"Table of contents"`	Heading label displayed at the top of the expanded navigation panel.
Headings	String	`"h1, h2, h3"`	CSS selector string determining which DOM elements are included.
Scroll Offset	Number	`120`	Pixel clearance added to the top of the viewport when clicking links.
Compact Padding	Boolean	`false`	Toggles reduced vertical padding for denser document outlines.
Indicator	Enum	`"none"`	Option to render vertical accent bars (`left`, `right`, or `none`).

Step-by-Step Implementation Guide

Add Component Code: Create a new code component in Framer and paste the component source.
Placement on Canvas: Drag the component onto your page layout or Framer CMS template.
Configure Heading Selectors: Ensure your text layers are set to output standard HTML tags (h1, h2, h3) in Framer's text settings panel.
Publish & Verify: Preview or publish the project—the component will automatically build and track the page outline.