Private betav0.1.0
Docs
Format developer documentation

TableOfContents

A contents list the engine fills after layout, one entry per collected heading.

A TableOfContents is a contents list Format fills after layout. It lists one entry per heading the collect selector matches, kept flat with each entry carrying its outline depth rather than nested. Any children are leading content shown above the entries, once by default or repeated with the nav per page when repeatHead is set.

Fields

NameTypeDescription
collect
stringCSS selector for the headings to list. Defaults to h1, h2, h3.
leaderRequired
TocLeaderThe dot leader between each entry's title and its page number. The default, dots, draws it; none leaves the run between them blank.
repeatHead
booleanWhether the leading content repeats with the nav on every page the contents spans. Off by default: the head shows once, above the entries.

Example

A contents list that collects h1 and h2 headings, with a "Contents" heading shown once above the entries.

<TableOfContents collect="h1, h2">
  <h2>Contents</h2>
</TableOfContents>
<TableOfContents collect="h1, h2">
  <h2>Contents</h2>
</TableOfContents>
<template data-type="toc" data-collect="h1, h2">
  <h2>Contents</h2>
</template>

Usage

The contents is a flat <nav data-type="toc"> of <a data-type="toc-link"> anchors, one per collected heading. Each anchor holds a toc-number (wrapping a toc-number-text), a toc-row that pairs the toc-title with its toc-page, and an optional toc-description when the heading carries data-toc-description. It records its outline depth as data-depth, with 0 at the shallowest collected level, so depth is an attribute you match rather than a level of nesting. A long contents breaks between anchors. When the document uses <Numbering>, the nav carries data-variant="numbering".

Children are leading content shown once above the entries, which is where a "Contents" heading goes. Style the entries through their data-type hooks and the --toc-* custom properties, which set the overall size, the per-depth size and indent, the page-number size, the leader, and the vertical rhythm.

Several tables of contents partition the document: each lists the headings between its own position and the next, so a front-matter contents and a per-section contents do not repeat each other. A <TableOfContents> must sit in feed content, not in a Layout.

Was this page helpful?