{% load wdj %}
{% wdj_component "wdj/components/table_of_contents.html" title="Custom links" %}<li class="-ml-0.5"><a data-wdj-toc-item class="wdj-toc-item block w-full border-l-2 border-transparent py-0.5 pl-4 text-left text-base leading-5 text-kumo-subtle no-underline hover:border-kumo-line hover:text-kumo-default hover:font-medium" href="#custom-links">Introduction</a></li>{% endwdj_component %}

Without title

Show template

{% load wdj %}
<div class="w-48 max-w-full">{% include "wdj/components/table_of_contents.html" with hide_title=True items=audit_toc_short only %}</div>

Live scroll tracking

Overview

Build server-rendered interfaces with semantic components. Reuse the documented tokens, layouts and interaction patterns. Keep native controls and meaningful links throughout your application.

Installation

Install the package and serve the bundled assets. Load the template tags and choose components that match the task. Review the installation guide for the complete Django setup.

Usage

Pass context explicitly and use HTML slots for rich content. Use HTMX for server-owned actions and Alpine for local state. Verify keyboard navigation and narrow layouts before sharing a screen.

API

Each component page lists the supported template parameters. Copy a working example and supply your own data. Labels and native form values remain available to the application.

Show template

{% load wdj %}
<div class="grid w-full max-w-xl grid-cols-1 gap-6 sm:grid-cols-[10rem_minmax(0,1fr)]">
  {% include 'wdj/components/table_of_contents.html' with items=audit_toc_scroll_items scrollspy=True scroll_root='#toc-scroll-content' scroll_offset=8 track_hash=False only %}
  <div id="toc-scroll-content" tabindex="0" role="region" aria-label="Scrollable guide" class="h-64 min-w-0 overflow-y-auto rounded-lg border border-kumo-hairline p-4">
    <section id="toc-scroll-overview" class="mb-6"><h3 class="mb-2 text-base font-semibold">Overview</h3><p class="text-base text-kumo-subtle">Build server-rendered interfaces with semantic components. Reuse the documented tokens, layouts and interaction patterns. Keep native controls and meaningful links throughout your application.</p></section>
    <section id="toc-scroll-install" class="mb-6"><h3 class="mb-2 text-base font-semibold">Installation</h3><p class="text-base text-kumo-subtle">Install the package and serve the bundled assets. Load the template tags and choose components that match the task. Review the installation guide for the complete Django setup.</p></section>
    <section id="toc-scroll-usage" class="mb-6"><h3 class="mb-2 text-base font-semibold">Usage</h3><p class="text-base text-kumo-subtle">Pass context explicitly and use HTML slots for rich content. Use HTMX for server-owned actions and Alpine for local state. Verify keyboard navigation and narrow layouts before sharing a screen.</p></section>
    <section id="toc-scroll-api" class="mb-6"><h3 class="mb-2 text-base font-semibold">API</h3><p class="text-base text-kumo-subtle">Each component page lists the supported template parameters. Copy a working example and supply your own data. Labels and native form values remain available to the application.</p></section>
    <div class="h-40" aria-hidden="true"></div>
  </div>
</div>

API Reference

Prop	Type	Default	Description
title	string	unset	Title; pass the documented value shown in the examples.
hide_title	bool	False	Hide title; pass the documented value shown in the examples.
items	list[dict]	[]	title (or label), optional href/active/children. Groups without href have plain labels; leaves without href render keyboard-accessible buttons. Children support the same recursive contract.
slot	string / HTML slot	unset	Rich HTML supplied by the wdj_component block tag, rendered in an isolated context.
scrollspy	bool	False	TableOfContents: track sections within this navigation only; disabled by default for presentational examples.
scroll_root	string	unset	Optional CSS selector for the scroll container. Omit to track the viewport.
scroll_offset	number	0	Activation and scrolling offset in pixels, default 0. Match a fixed header or scroll-container padding.
track_hash	bool	True	Read the initial hash/hashchange and update the fragment on navigation; default True. Set False for an isolated scroll example.
attrs	dict	{}	Dictionary of escaped native, HTMX or Alpine attributes. Literal Tailwind classes only.
class	string	""	Class; pass the documented value shown in the examples.

Accessibility notes

Every interactive component keeps real semantics and keyboard support: native controls where possible, ARIA only where necessary, and a visible focus ring. See the Accessibility page for the shared contract.

Read the accessibility contract

Table of contents

Basic

Interactive

Groups

Nested sections

Custom title

Flat sections

Active section

Long titles

Compact panel

Custom links