TableOfContents
List headings with links and page numbers.
A TableOfContents lists headings with links and final page numbers. Numbered headings also include their section numbers. Use collect to select headings. Children, such as a "Contents" heading, appear above the entries.
Set within to end a list at the next matching heading. Otherwise, the list stops at the next TableOfContents that also uses the default stopping point, or at the end of the document.
Fields
collectType stringCSS selector for the headings to list. Defaults to h1, h2, h3. Matches flowing content, excluding surrounding scaffolding. If <main> wraps the Flow, use h2, not main h2.leaderRequiredType TocLeaderLeader between each title and page number. Defaults to dots. Set to none to leave the space blank.repeatHeadType booleanRepeat the content above the entries on each contents page. Defaults to false, which shows it once.withinType stringCSS selector that ends the list at the next matching heading. For chapter contents, use h1 and place the TableOfContents after the chapter heading. The list is independent of other tables of contents: it neither ends their lists nor stops at them. Like collect, this selector matches flowing content, excluding surrounding scaffolding.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>Content
Children provide content above the entries, such as a title, introduction, or column labels. They appear once by default. Set repeatHead to repeat them on every contents page. Headings in this content are excluded from numbering and from all tables of contents.
Rendered structure
Format generates a <nav data-type="toc"> with one <a data-type="toc-entry"> per heading. Entries form a flat list, with data-depth="0" for the shallowest heading level. Each entry contains a title, page number, and section number when the heading is numbered. Documents with a Numbering element also set data-variant="numbering" on the nav.
Leading content renders before the nav by default. With repeatHead, it renders inside the nav on each contents page.
For heading selection, multiple contents lists, and styling examples, see the Table of contents guide. The DOM contract lists all styling attributes and custom properties.
Constraints
- Place it directly in the stream. Use a direct child of a bare Flow, or of the Stream in a scaffolded Flow. Wrapping it in other content, such as a
<section>, prevents it from rendering. In a Layout without a Flow, place it directly in the Layout. - Keep it out of Layout scaffolding. A table of contents needs a stream for pagination. Placing it in repeating Layout scaffolding returns
INVALID_LAYOUT.