Table of Contents - Nested

Generate a nested, multi-level table of contents from the headings on the page.

Usage

Include the <kelp-toc-nested> element in your HTML.

It generates an unordered list (<ul>) of anchor links from the h2, h3, h4, h5, and h6 headings on the page. If a heading does not have an ID, the component dynamically creates one.

<kelp-toc-nested></kelp-toc-nested>

Options

Use custom attributes to configure component settings.

• [levels] - The heading levels to target (default: h2, h3, h4, h5, h6).
• [heading] - A label to use before the list items (default: Table of Contents).
• [heading-level] - The heading level to use for the table of contents heading (default: h2).
• [target] - A selector string for the element to generate links for (default: document).
• [list-class] - A list of classes to use on the list (default: none).
• [list-type] - The type of list element to use (ul or ol, default: ul).

<kelp-toc-nested
	levels="h2, h3, h4"
	heading="On This Page"
	target="#content"
	list-class="stack margin-start-4xs gap-4xs"
	list-type="ol"
></kelp-toc-nested>

Events

The <kelp-toc-nested> element emits a kelp-toc-nested-ready event once the table of contents has been rendered into the DOM.

• Element: kelp-toc-nested
• Bubbles: true
• Cancellable: false

document.addEventListener('kelp-toc-nested-ready', (event) => {
	console.log('ready:', event.target);
});

Install

The <kelp-toc-nested> component is included in kelp.js.

If you’re installing components individually, load the /js/components/kelp-toc-nested.js file.

<script src="https://cdn.jsdelivr.net/npm/kelpui@0/js/components/kelp-toc-nested.js"></script>