Components

Table of contents (TOC)

Empty nav#toc (or container with that id): wckdToc in wckd-ui.js fills it from headings inside main#main, skipping .toc-exclude.

Jump to:

Download & setup

Download WCKD UI Style guide

Load the kit from Get Started; use the style guide for utilities and tokens while wiring this component.

Default implementation

Layout contract

One main#main and one empty nav#toc; wckdToc replaces #toc on load.

In your template

Place an empty nav (or div) with id="toc" in a column or rail. wckdToc appends a nested ol and wire scroll/intersection for .active on the matching link.

Illustrative output

Structure only, real pages get live links to heading ids.

Markup

<main id="main">
  <h2 id="intro">Introduction</h2>
  <p>...</p>
</main>
<nav id="toc" aria-label="On this page"></nav>

Configuration options

Each variant keeps the same markup contract as the default; add only the classes or attributes named in the heading.

Excluding regions

Headings inside <code>.toc-exclude</code> are skipped (demo labels, ads, repeated component titles).

Add class="toc-exclude" to a wrapper around content whose headings should not appear in the rail. The script still runs against the same #main tree; only matching headings are skipped.

<div class="toc-exclude">
  <h3>Demo only</h3>
</div>

Markup

<div class="toc-exclude">
  <h3>Not listed in TOC</h3>
</div>

When to use

  • Policy, API, and help-centre pages with long scroll and many subsections.
  • Side-by-side layout: article in main, TOC in a narrow column; match your grid with utilities from the style guide.

Implementation notes

  • Only one id="toc" is valid in HTML; duplicate IDs will break getElementById behaviour in the initialiser.
  • H2 links in the generated list receive text-l and text-bold for visual hierarchy; adjust in wckdToc if your design system needs different classes.
  • The script sets unique id attributes on headings that are missing them, derived from their text, ensure final heading text is stable before release.

Developer checklist

  • Keep wckdToc in the bootstrap for pages that include #toc; remove it for microsites that do not use the pattern to avoid a no-op query.
  • Test with real content: duplicate heading text can produce non-unique ids, assign explicit ids on important anchors when needed.

← All components