Svelte ToC

Collapse Subheadings Demo

This demo shows the collapseSubheadings feature. Select different modes to see how the TOC collapses and expands based on the active heading. Scroll through the page to watch child headings appear and disappear in the TOC as you navigate.

Getting Started

Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.

Installation

This is sample content to demonstrate scrolling behavior. This is sample content to demonstrate scrolling behavior. This is sample content to demonstrate scrolling behavior. This is sample content to demonstrate scrolling behavior.

NPM Setup

Run npm install svelte-toc to add the package to your project. This is sample content to demonstrate scrolling behavior. This is sample content to demonstrate scrolling behavior. This is sample content to demonstrate scrolling behavior. This is sample content to demonstrate scrolling behavior.

PNPM Setup

Run pnpm add svelte-toc for pnpm users. This is sample content to demonstrate scrolling behavior. This is sample content to demonstrate scrolling behavior. This is sample content to demonstrate scrolling behavior. This is sample content to demonstrate scrolling behavior.

Workspace Configuration

For monorepo setups, ensure proper hoisting. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.

Basic Usage

Importing the Component

Import the Toc component from the package. This is sample content to demonstrate scrolling behavior. This is sample content to demonstrate scrolling behavior. This is sample content to demonstrate scrolling behavior. This is sample content to demonstrate scrolling behavior.

Minimal Example

Just add <Toc /> to your page. This is sample content to demonstrate scrolling behavior. This is sample content to demonstrate scrolling behavior. This is sample content to demonstrate scrolling behavior. This is sample content to demonstrate scrolling behavior.

Configuration

Styling Options

Customize the appearance of your table of contents. This is sample content to demonstrate scrolling behavior. This is sample content to demonstrate scrolling behavior. This is sample content to demonstrate scrolling behavior. This is sample content to demonstrate scrolling behavior.

CSS Variables

Override default styles using CSS custom properties. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.

Color Scheme

Set --toc-active-color and related variables. This is sample content to demonstrate scrolling behavior. This is sample content to demonstrate scrolling behavior. This is sample content to demonstrate scrolling behavior. This is sample content to demonstrate scrolling behavior.

Typography

Adjust font sizes and weights for different heading levels. This is sample content to demonstrate scrolling behavior. This is sample content to demonstrate scrolling behavior. This is sample content to demonstrate scrolling behavior. This is sample content to demonstrate scrolling behavior.

Custom Classes

Apply your own CSS classes for full control. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.

Behavior Props

Configure how the TOC responds to page scrolling. This is sample content to demonstrate scrolling behavior. This is sample content to demonstrate scrolling behavior. This is sample content to demonstrate scrolling behavior. This is sample content to demonstrate scrolling behavior.

Scroll Offset

Adjust the offset used when scrolling to headings. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.

Active Heading Detection

Fine-tune how the currently active heading is determined. This is sample content to demonstrate scrolling behavior. This is sample content to demonstrate scrolling behavior. This is sample content to demonstrate scrolling behavior. This is sample content to demonstrate scrolling behavior.

Intersection Observer

The component uses IntersectionObserver for efficient detection. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.

Threshold Tuning

Adjust visibility thresholds for edge cases. This is sample content to demonstrate scrolling behavior. This is sample content to demonstrate scrolling behavior. This is sample content to demonstrate scrolling behavior. This is sample content to demonstrate scrolling behavior.

Advanced Features

Collapsible Subheadings

The feature you're testing right now! Subheadings can be collapsed based on context. This is sample content to demonstrate scrolling behavior. This is sample content to demonstrate scrolling behavior. This is sample content to demonstrate scrolling behavior. This is sample content to demonstrate scrolling behavior.

Collapse Modes

Choose between full collapse and threshold-based collapse. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.

Full Collapse Mode

Only show immediate children of the active heading. This is sample content to demonstrate scrolling behavior. This is sample content to demonstrate scrolling behavior. This is sample content to demonstrate scrolling behavior. This is sample content to demonstrate scrolling behavior.

Threshold Collapse

Collapse only headings below a certain level. This is sample content to demonstrate scrolling behavior. This is sample content to demonstrate scrolling behavior. This is sample content to demonstrate scrolling behavior. This is sample content to demonstrate scrolling behavior.

Animation

Smooth transitions when headings expand and collapse. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.

Dynamic Content

Handle pages where headings change dynamically. This is sample content to demonstrate scrolling behavior. This is sample content to demonstrate scrolling behavior. This is sample content to demonstrate scrolling behavior. This is sample content to demonstrate scrolling behavior.

Mutation Observer

Automatically detects new headings added to the page. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.

Manual Refresh

Trigger a TOC update programmatically when needed. This is sample content to demonstrate scrolling behavior. This is sample content to demonstrate scrolling behavior. This is sample content to demonstrate scrolling behavior. This is sample content to demonstrate scrolling behavior.

API Reference

Props

All available component properties. This is sample content to demonstrate scrolling behavior. This is sample content to demonstrate scrolling behavior. This is sample content to demonstrate scrolling behavior. This is sample content to demonstrate scrolling behavior.

Required Props

None! The component works with sensible defaults. This is sample content to demonstrate scrolling behavior. This is sample content to demonstrate scrolling behavior. This is sample content to demonstrate scrolling behavior. This is sample content to demonstrate scrolling behavior.

Optional Props

Extensive customization through optional properties. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.

Events

React to TOC interactions and state changes. This is sample content to demonstrate scrolling behavior. This is sample content to demonstrate scrolling behavior. This is sample content to demonstrate scrolling behavior. This is sample content to demonstrate scrolling behavior.

Click Events

Fired when users click on TOC items. This is sample content to demonstrate scrolling behavior. This is sample content to demonstrate scrolling behavior. This is sample content to demonstrate scrolling behavior. This is sample content to demonstrate scrolling behavior.

Scroll Events

Fired when the active heading changes. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.

Slots

Customize the rendering of TOC elements. This is sample content to demonstrate scrolling behavior. This is sample content to demonstrate scrolling behavior. This is sample content to demonstrate scrolling behavior. This is sample content to demonstrate scrolling behavior.

Troubleshooting

Common Issues

Solutions to frequently encountered problems. This is sample content to demonstrate scrolling behavior. This is sample content to demonstrate scrolling behavior. This is sample content to demonstrate scrolling behavior. This is sample content to demonstrate scrolling behavior.

Missing Headings

Check your heading selector if some headings don't appear. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.

Scroll Not Working

Ensure headings have proper IDs assigned. This is sample content to demonstrate scrolling behavior. This is sample content to demonstrate scrolling behavior. This is sample content to demonstrate scrolling behavior. This is sample content to demonstrate scrolling behavior.

FAQ

Answers to common questions. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet.