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.

The empty nav on the left is filled from the sample content on the right. 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, { headings, scrollSpy, contentSelector });
// 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'`	Root element to scan for headings.

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.