Table of Contents

Navigation

Auto-generated navigation built from page headings.

stableEnhancer: enhanceTocBuilt on <nav>hydrateless/toc.css

Auto-generated navigation built from the headings on the page, with optional scroll-spy highlighting of the current section. Add an empty <nav data-hl-toc> and the enhancer fills it in and keeps it current: headings added, removed, or renamed later rebuild the list automatically, and the heading in view is the component's value.

The empty nav is filled from the sample content beside it, or below it on narrow screens. Toggle JS off to see the unenhanced state.

Introduction

A short overview of the project.

Installation

Package managers

Install with your tool of choice.

Usage

Import a component and render it.

JavaScript

This component ships an optional enhancer. With auto-init it loads automatically; to wire it yourself, import it directly:

import { enhanceToc } from '@hydrateless/enhancers/toc';

const handle = enhanceToc(document);
// handle.api  -> imperative controls
// handle.destroy()  -> tear everything down

Props

The framework bindings expose these props (and forward the rest to the root element).

Prop	Type	Default	Description
`headings`	`string`	`'h2,h3'`	Which headings to include.
`scrollSpy`	`boolean`	`true`	Highlight the section currently in view.
`contentSelector`	`string`	`'main, article'`	Root element to scan for headings; rendered as `data-hl-content-selector`.

Events and callbacks

Event / Callback	Payload	Description
`hl:change`	`{ value: string \| null }`	Fires as the reader scrolls, with the id of the heading in view (also the `onValueChange` enhancer callback).

CSS variables

Override these on any ancestor to theme the component. See the theme studio to preview changes live.

CSS variable	Used for
`--hl-border`	Outline of the nav.
`--hl-surface-2`	Active link background.
`--hl-radius-lg`	Corner radius.