Table Of Contents

Automatically generate a beautifully formatted table of contents from your page headings with this intelligent navigation block. This powerful tool scans your content and creates a structured, clickable outline that helps visitors navigate long-form content effortlessly while improving SEO and user experience.

Perfect for blog posts, documentation, guides, and any lengthy content, this block transforms complex articles into easily digestible, navigable resources. From simple bullet-point lists to sophisticated collapsible navigation with smooth scrolling, create professional table of contents that enhance both usability and search engine optimization.

Key Features:
Intelligent Content Scanning – Automatically detects and indexes H2, H3, and H4 headings with customizable depth control (1-6 levels) for perfect content organization
Flexible Heading Selection – Choose to include H2 only, H2+H3, or H2+H3+H4 headings based on your content structure and navigation needs
Smart Anchor Generation – Automatically creates clean, SEO-friendly anchor links for headings without existing IDs, enabling direct section linking
Advanced Collapsible Interface – Toggle between expanded and collapsed states with customizable show/hide button text and minimize box design options
Smooth Scrolling Navigation – Enhanced user experience with smooth scrolling to sections plus adjustable offset controls for sticky headers (0-200px)
SEO-Optimized Structure – Built-in schema.org markup support for improved search engine understanding and content indexing
Flexible List Formatting – Choose between ordered (numbered) or unordered (bulleted) list styles with hierarchical indentation for sub-headings
Comprehensive Styling System – Independent color controls for background, title, text, links, borders with hover states for professional customization
Advanced Typography Controls – Separate font customization for titles and content including family, size, weight, style, transform, and spacing
Professional Border & Shadow – Multiple border styles (solid, dashed, dotted, double) with responsive width, radius, and shadow effects including hover variations
Responsive Dimensions – Device-specific width, max-width, and alignment controls ensuring perfect display across all screen sizes
Smart Spacing Controls – Precise padding, margin, and list item spacing with responsive controls for optimal visual hierarchy
Live Content Preview – Real-time preview in the editor showing actual headings from your content or sample structure when none exist
Accessibility Compliant – Proper ARIA labels, keyboard navigation support, and screen reader optimization for inclusive navigation
Custom Title Options – Editable title with selectable heading tags (H2-H6, Div) or option to hide title completely for minimal design
Animation Integration – Built-in entrance animations with preview functionality to enhance user engagement and visual appeal
Device Visibility Controls – Granular show/hide options for desktop, tablet, and mobile devices to optimize user experience
Developer-Friendly Structure – Clean semantic markup with custom anchor support, CSS classes, and extensible architecture