Table of Contents
kumo-svelte

Table of Contents

Presentational compound component for section navigation with an active indicator bar.

Installation

Barrel

import { TableOfContents } from 'kumo-svelte';

Granular

import { TableOfContents } from 'kumo-svelte/components/table-of-contents';

Usage

<script lang="ts">import { TableOfContents } from "kumo-svelte";</script>    <TableOfContents>      <TableOfContents.Title>On this page</TableOfContents.Title>      <TableOfContents.List>        <TableOfContents.Item href="#intro" active>          Introduction        </TableOfContents.Item>        <TableOfContents.Item href="#api">API Reference</TableOfContents.Item>      </TableOfContents.List>    </TableOfContents>

This component is purely presentational. All interaction logic — scroll tracking, IntersectionObserver, active state management — is left to the consumer.

Examples

Interactive

Click an item to set it as active. The consumer controls state via active and onclick.

No active item

When no item has active set, all items show the default subtle text style with a hover indicator.

Groups

Use TableOfContents.Group to organize items into labeled sections with indented children. Groups support two modes: pass an href to make the group label a clickable link (like "Examples" and "API" below), or omit it for a plain non-interactive title (like "Getting Started").

Without title

The title sub-component is optional — use TableOfContents.List directly if you don't need a heading.

Custom element

Use the render prop to swap the default anchor for a button, router link, or any element.

SvelteKit

<TableOfContents.Item render={<Link to="/intro" />} active>  Introduction</TableOfContents.Item>

Next.js

import Link from "next/link";<TableOfContents.Item render={<Link href="/intro" />} active>  Introduction</TableOfContents.Item>;

Button (no navigation)

<TableOfContents.Item render={<button type="button" />} onclick={handleClick}>  Introduction</TableOfContents.Item>

API Reference

TableOfContents

Root nav container with a default aria-label of "Table of contents".

PropTypeDefaultDescription
class string-Additional classes merged onto the nav element.
children Snippet-TableOfContents.Title and TableOfContents.List children.
aria-label string"Table of contents"Accessible label for the nav landmark.

TableOfContents.Title

Optional uppercase heading displayed above the list (renders a <p>).

PropTypeDefaultDescription
No component-specific props. Accepts standard HTML attributes.

TableOfContents.List

List container with a left border rail.

PropTypeDefaultDescription
No component-specific props. Accepts standard HTML attributes.

TableOfContents.Item

Individual navigation link. Set active for the current section. Use the render prop to swap the anchor for a router link or button.

PropTypeDefaultDescription
active booleanfalseWhether this item represents the currently active section.
href string-Destination URL.
as 'a' | 'button'"a"Svelte replacement for React's render prop when rendering a button item.

TableOfContents.Group

Groups items under a labeled section with indented children. Pass href to make the label a clickable link, or omit for a plain title.

PropTypeDefaultDescription
label *string-Label displayed above the group's items.
href string-URL the group label links to. When provided, the label renders as a clickable link.
active booleanfalseWhether this group's label represents the currently active section. Only applies when href is provided.