TableOfContents

The built-in tableofcontents tag — an on-page contents list that scrapes the current page's headings and highlights the one in view, on Mantine's TableOfContents.

A built-in tag for an on-page table of contents, built on Mantine’s TableOfContents. It scrapes the current page’s headings at runtime and highlights the one in view as you scroll (scroll-spy), so it always reflects wherever you drop it — there’s no list to maintain. The headings come from the live DOM, so the build-time prerender bakes an empty list and the client fills it in on load.

Use it as {% tableofcontents %} in Markdown, or call it from Python logic (loops, snippets) via component('aardvark', 'tableofcontents', …).

Default

With no attributes it tracks every h1–h3 inside the page’s content and indents each level. The entries below are this page’s own headings, and the active one updates as you scroll.

Preview

Depth and indentation

depth (1–6) caps which heading levels appear; depthOffset sets the pixels of indent added per level. Here we include h1–h2 only, with a wider indent.

Preview

Variant, color, size, and radius

variant switches the active-entry treatment (light, filled, none); color sets its accent; size and radius (xs–xl) scale the labels and the rounding. autoContrast picks a readable label color against color.

Preview

Custom selector

By default the contents tracks every h1–h{depth} inside the page’s content (.aardvark-content), so site chrome (nav and footer) is never picked up. Pass an explicit selector to track a different heading set — say only the h2s:

Preview

With other components

Because a table of contents is just another tag, you can drop it inside any block — for example pinned into an {% accordion %} section, or beside prose in a {% card %}. Here it sits in its own accordion section so it can be folded away.

Preview

Attributes

Omit any attribute to take its default.

CSS Selectors

The widget mounts inside an island wrapper carrying data-aardvark-island="TableOfContents"; Mantine’s Styles API exposes the list root and each heading link.

[data-aardvark-island="TableOfContents"]  /* the island wrapper */
.mantine-TableOfContents-root             /* the list of headings */
.mantine-TableOfContents-control          /* a single heading link */

Injecting Attributes

attr={…} forwards raw HTML attributes (including event handlers) onto the rendered widget.