Svelte Component

Table of Contents

Allows you to quickly navigate the hierarchy of headings for the current page.

typescript 
import { TableOfContents, tocCrawler } from '@skeletonlabs/skeleton';
Source Page Source

Demo

How It Works

Heading IDs

Each heading on the page requires a unique ID that acts as the scroll target for inner-page navigation.

html 
<h2 class="h2" id="how-it-works">How it Works</h2>

Anchor Links

The Table of Contents list of links will point to each target ID as shown below. Note the use of #. When clicked, the browser will automatically scroll the page to this unique element ID on the page.

html 
<a href="#how-it-works">How It Works</a>

Settings

Automatic IDs

Set mode: generate for tocCrawler to automatically generate and set unique IDs based on the text content of the heading. If an ID has already been set manually, it will be used instead. If this setting is not enabled, then you are responsible for implementing all heading IDs.

html 
<div use:tocCrawler={{ mode: 'generate' }}>

Ignore Headings

To ignore a heading in the target region, simply append a data-toc-ignore attribute.

html 
<h2 class="h2" data-toc-ignore>Ignore Me</h2>

Append Headings

Use the Tailwind-provided Screen Reader .sr-only class to append an invisible heading.

html 
<h2 class="sr-only">Include Me!</h2>

Styling

Smooth Scrolling

Use Tailwind's scroll behavior styles to enable smooth scrolling on the scrollable element.

html 
<!-- If using the App Shell: -->
<AppShell regionPage="scroll-smooth"></AppShell>

<!-- If NOT using the App Shell: -->
<body class="scroll-smooth"></body>

Scroll Margin Offset

Use Tailwind's scroll margin if you need to offset and account for sticky headers

NOTE: this is not currently supported for Skeleton's App Shell.
html 
<body class="scroll-mt-4"></body>

Sticky Positioning

Use Tailwind's sticky positioning styles to keep the Table of Contents component visible while scrolling.

html 
<TableOfContents class="sticky top-10" />