Table of Contents

Generate a simple inline list of anchor links for the headings on the page.

Usage

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

It generates an unordered list (<ul>) of anchor links with the .list-inline class from the h2 headings on the page. If a heading does not have an ID, the component dynamically creates one.

<kelp-toc></kelp-toc>

Options

Use custom attributes to configure component settings.

• [level] - The heading level to target (default: h2).
• [heading] - A label to use before the list items (default: none).
• [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: list-inline).

<kelp-toc
	level="h3"
	heading="On this page..."
	target="#content"
	list-class="list-unstyled"
></kelp-toc>

Events

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

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

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

Install

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

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

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