Table Of Contents — Cronus UI

Menus & Navigation

Scrollspy on-this-page nav with an animated active indicator.

Import

tsx

import { TableOfContents } from "@cronus-ui/ui";

bash

npx cronus-ui add table-of-contents

Examples

Scrollspy article

An IntersectionObserver tracks the section being read — the active link gains aria-current and the indicator bar glides to its row. Clicking a link smooth-scrolls the container (instant under reduced motion).

Overview

A scrollspy table of contents keeps the link for the section you are reading highlighted, with an indicator bar that glides to the active row.

Installation

Install the package from npm, or copy the component straight into your project with the CLI.

With the CLI

npx cronus-ui add table-of-contents drops the source file into your components directory.

Manual setup

Prefer vendoring? Copy the file and keep full ownership — it has zero extra dependencies.

Theming

Every color flows from semantic tokens, so the nav follows your theme in light and dark mode.

API reference

Pass items for full control, or point selector and containerId at your article to auto-discover headings.

tsx

const sections = [
  { id: "overview", label: "Overview" },
  { id: "install", label: "Installation" },
  { id: "cli", label: "With the CLI", depth: 1 },
  { id: "manual", label: "Manual setup", depth: 1 },
  { id: "theming", label: "Theming" },
  { id: "api", label: "API reference" },
];

<div className="flex gap-6">
  <TableOfContents
    items={sections}
    containerId="article"
    offset={12}
    className="w-44 shrink-0 self-start"
  />
  <section
    id="article"
    aria-label="Article content"
    tabIndex={0}
    className="h-64 flex-1 overflow-y-auto rounded-xl border border-border p-5"
  >
    {sections.map((section) => (
      <section key={section.id} className="mb-6 last:mb-0 last:min-h-56">
        <h3 id={section.id} className="text-sm font-semibold text-fg">
          {section.label}
        </h3>
        <p className="mt-1.5 text-sm leading-relaxed text-fg-secondary">…</p>
      </section>
    ))}
  </section>
</div>

.cronus

The same component declared in Cronus. Emitted at build time from the audit fixtures — the kernel renders it as HTML with no React.

PortedParity: MatchGeometry 1/1Pixel diff 0 pxLogic 1/1Parity scoreboard

default.cronus

app "audit-fixtures" {
  port 5176
}

style {
  preset aurora
  theme dark
}

component TableOfContentsDefault layout:inline style:table-of-contents {
  aria-label:"On this page"
  label "On this page"
  text "Overview"
  text "Usage"
}

page "/audit/table-of-contents/default" type:custom {
  use TableOfContentsDefault
}

API Reference

Generated from the component's exported types.

TableOfContentsProps

Extends Omit<HTMLAttributes<HTMLElement>, "children">

Prop	Type	Default	Description
`items`	`TableOfContentsItem[]`	—	The entries to render, in document order. When omitted, headings are auto-discovered from the DOM via .
`selector`	`string`	`DEFAULT_SELECTOR`	CSS selector used to auto-discover headings when is omitted. Only elements with an `id` participate; depth is derived from the heading level (the shallowest level found becomes depth 0). Defaults to `"h2, h3"`.
`containerId`	`string`	—	`id` of the element that scopes heading discovery. When that element is itself a scroll container (`overflow-y: auto \| scroll`), it also becomes the scrollspy root and the target of click-to-scroll — otherwise the window scrolls. Defaults to the whole document.
`offset`	`number`	`0`	Pixels between the top of the scroll root and the activation line — match your sticky-header height. Also subtracted when scrolling to a section on click. Defaults to `0`.
`className`	`string`	—	Additional class names merged onto the root.
`id`	`string`	—	DOM id of the root element.