Skip to content

Table of contents

Stable Available in release assets

Provide an in-page map of real heading targets using an ordinary navigation landmark and fragment links.

Table of contents in context

Show code
<nav class="thin-table-of-contents" aria-labelledby="contents-heading">
  <h2 id="contents-heading">On this page</h2>
  <ol>
    <li><a href="#overview" aria-current="location">Overview</a></li>
    <li><a href="#delivery">Delivery and returns</a></li>
    <li><a href="#care">Care instructions with a deliberately long localized label</a></li>
  </ol>
</nav>

Each authored example uses the production assets and includes copyable markup.

Flat list

A single ordered list of fragment links maps directly to page headings.

Show code
<nav class="thin-table-of-contents" aria-labelledby="contents-heading">
  <h2 id="contents-heading">On this page</h2>
  <ol>
    <li><a href="#overview" aria-current="location">Overview</a></li>
    <li><a href="#delivery">Delivery and returns</a></li>
    <li><a href="#care">Care instructions with a deliberately long localized label</a></li>
  </ol>
</nav>

Nested section list

Nested ordered lists may mirror the document heading hierarchy without changing link semantics.

Show code
<nav class="thin-table-of-contents" aria-labelledby="nested-contents">
  <h2 id="nested-contents">On this page</h2>
  <ol>
    <li>
      <a href="#overview">Overview</a>
      <ol>
        <li><a href="#goals">Goals</a></li>
        <li><a href="#constraints">Constraints</a></li>
      </ol>
    </li>
    <li><a href="#summary">Summary</a></li>
  </ol>
</nav>

Current-location indicator

Use aria-current=location only when the authored current section is known.

Show code
<nav class="thin-table-of-contents" aria-label="Contents">
  <ol>
    <li><a href="#overview">Overview</a></li>
    <li><a href="#delivery" aria-current="location">Delivery and returns</a></li>
  </ol>
</nav>

Anatomy

  • Labelled nav landmark
  • Visible heading
  • Ordered list
  • Fragment links to unique heading IDs

Variants and sizes

  • Flat list — shown above
  • Nested section list — shown above
  • Current-location indicator — shown above

Rendered fixtures exercise authored content and constrained layouts with the same production assets.

Long and localized labels

Long destination labels wrap without clipping markers or breaking focus order.

Show code
<nav class="thin-table-of-contents" aria-labelledby="long-contents" style="max-inline-size: 18rem">
  <h2 id="long-contents">On this page</h2>
  <ol>
    <li><a href="#overview">Overview</a></li>
    <li><a href="#care">Care instructions with a deliberately long localized label that must wrap in narrow containers</a></li>
  </ol>
</nav>

Right-to-left content

Fragment links and list markers follow authored direction without reordering destinations.

Show code
<nav class="thin-table-of-contents" dir="rtl" aria-labelledby="rtl-contents">
  <h2 id="rtl-contents">في هذه الصفحة</h2>
  <ol>
    <li><a href="#overview">نظرة عامة</a></li>
    <li><a href="#delivery">التسليم والإرجاع</a></li>
  </ol>
</nav>
  • Default — documented, example pending
  • Current location — documented, example pending
  • Long and localized labels — shown above
  • Right-to-left content — shown above
  • Printed document — documented, example pending

Interaction and keyboard behavior

Native fragment links move focus or scroll position according to browser behavior. Thin-Sky does not infer headings or track scroll position.

Accessibility

Give each table of contents a unique accessible name, keep link text aligned with destination headings, and use aria-current=location only when the authored current section is known. Do not add landmark roles to non-navigation containers.

Contract
DISCLOSURE
Basis
Native labelled navigation, links, and disclosure; no menu/menuitem claim in the current authored markup
Evidence
  • tests/unit/library/content-navigation.test.ts
  • tests/unit/library/navigation-patterns.test.ts

API

Use nav.thin-table-of-contents with a visible heading referenced by aria-labelledby, then an ol of ordinary fragment links. Use aria-current=location on the current section link when it is known. Nested ol elements may mirror the document heading hierarchy.

Behavior tier: native

Structured host, property, and example tables are not authored for this item yet. Use the summary above and the primary example.

Fallback

The labelled list of fragment links remains navigable and printable without CSS or JavaScript.

Assets and dependencies

  • /components.css

Dependencies: None

Source: packages/ui/src/items/table-of-contents/style.ts

Stability evidence

  • Labelled navigation landmark, fragment links, current-location state, and no-JavaScript fixture: test:tests/unit/library/content-navigation.test.ts
  • Complete item-specific API, fallback, variant coverage, and difficult-state documentation: test:tests/unit/library/content-navigation.test.ts
  • Cross-theme, density, localized, narrow-container, zoom, and forced-colors fixture: review:site/src/pages/quality/index.astro#quality-review

Composition

Derived from the examples and style specs, not authored.

Used by