Table of Contents

Table of Contents builds an automatic, linked index from the headings already on your page — no manual list to maintain. It scans the content, adds anchor links, and keeps the list in sync as you edit. On top of that it adds smooth scrolling, active-section highlighting, a sticky panel, a collapsible list, and a mobile dock bar.

How to add

Open the block inserter, switch to the Axiom Blocks category, and click Table of Contents. Place it wherever the index should appear — inline near the top of an article, or in a sidebar column. The editor previews the list live from your page's headings; on the front end the links and anchors are generated automatically.

Structure

Toggle which heading levels to include (H1–H6; H2–H4 by default). Only the levels you enable appear, and deeper levels are indented to show the hierarchy. Each included heading gets a stable id so its anchor link keeps working — existing anchors are preserved.

Set an Eyebrow label (defaults to On this page) and, optionally, Show title for a larger heading below it with its own Title tag. When the panel is collapsible you can also Show section count next to the eyebrow.

Behaviour

Everything here is progressive enhancement — with JavaScript off it degrades to plain anchor links.

• Smooth scroll, with a Scroll offset to clear a fixed header
• Highlight active section — scroll-spy marks the heading you're reading
• Reading-progress rail — a sliding accent rail follows the section in view
• Collapsible — a chevron folds the list to its header; optionally Start collapsed
• Sticky on scroll — pins the panel with a Sticky top offset. A long list scrolls inside the panel instead of running off-screen.
• Disable sticky on mobile — drops the pinning on small screens
• Mobile dock bar — opens the list as a bottom sheet, folding away after you jump
• Copy-link on each item, Footer back-to-top, and a Floating back-to-top button

List layout

• List marker — Numbered (sequential numbers in a mono typeface), Bullet (a small dot), or None (text only, aligned to the rail)
• Number prefix — text before each number, e.g. Step
• Nesting indent — how far each level indents
• Item spacing — vertical gap between entries

Color scheme

Color scheme picks Light or Dark as the starting point. This is not a preset layer that overrides your choices — it sets the shipped defaults that every color row in Styles starts from. Switch to Dark and the swatches update to the dark palette; anything you've set yourself is untouched.

The sidebar at a glance

The block sidebar is split into two tabs. Settings is what the index does; Styles is how it looks, organised by the parts you can see.

Styling

• Marker colors the numbers or bullets. Progress colors the reading-progress rail, and the row appears only while Reading-progress rail is on.
• Links is the stateful part. Active is the entry for the section currently in view, so setting Normal and Active gives you scroll-spy highlighting without writing CSS.

The block supports Wide and Full alignment from the toolbar and an HTML anchor.

HTML output

<nav class="ab-toc ab-toc--numbered ab-toc--sticky ab-toc--progress" aria-label="Table of contents">
  <div class="ab-toc__head">…eyebrow + optional title…</div>
  <div class="ab-toc__body">
    <ul class="ab-toc__list-ul"><!-- generated links --></ul>
  </div>
</nav>

The ab-toc--numbered|bullet|none, ab-toc--sticky, ab-toc--progress, and ab-toc--dark modifier classes drive markers, placement, the progress rail, and the color scheme. Colors and spacing are --ab-toc-* custom properties on the wrapper. Heading ids are injected into your content so the anchors resolve.