The Table of contents block lists the headings of the page and leads to each one in a click. It marks the one the visitor is reading. This page describes the choice of headings, the display of the list, the collapsible sections, the styling of the entry and reading tracking.
Add the block
The table of contents lists the Heading blocks of the page. Start by writing your headings, then insert the Table of contents block (Add a block), or type table of contents in the block search. The tree of your headings appears at once and follows every change of text or level.
On a page with no Heading block, the editor shows a notice. On the site, the table of contents is not displayed.
Headings that have subheadings become collapsible sections, with a symbol: the visitor opens them to see the subheadings. The others are simple links to their section.
Choose the headings
Select the Table of contents block, Settings tab, Headings panel. It arranges the headings like the table of contents: each subheading is shifted to the right under its heading.
- To remove a heading from the table of contents, turn off its toggle. Turn it back on to put it back. The preview follows.
- For a different label in the table of contents, write it in the field under the toggle, where the heading’s text is shown grayed out. The heading of the page does not change.
- A heading made invisible stays in the table of contents, unless you remove it.
- A heading that shows data from the content, such as the title repeated in a list card, does not enter the table of contents.
- The questions of an Accordion do not enter it: the table of contents lists only Heading blocks.
Set the display of the list
The List display panel sets the depth and the look of the list.
| Setting | Effect | Default value |
|---|---|---|
| Max heading level | Headings deeper than this level are left out. At H2, the table of contents keeps the H1 and H2 headings. | H2 |
| Indent (px) | The indent of nested levels, in pixels, 0 included. Empty, the browser’s own, 40 px. | Empty |
| List style per level | The bullet or numbering of each level: none, a disc, a circle, a square, numbers, letters or Roman numerals. For letters and Roman numerals, Case chooses lowercase or uppercase. | Default |
| Nested numbering | Numbers each item relative to its parent: 1, 1.1, 1.1.1. Offered when all levels are numbered. | Off |
With no setting, the table of contents reads as a list of links, with no bullet or number and no indent at the first level. A bullet chosen for a level is shown and gives the first level its indent back.
Set the collapsible sections
The Accordion settings panel sets the headings that have subheadings.
| Setting | Effect | Default value |
|---|---|---|
| Can’t be closed | All sections stay open and the visitor cannot collapse them. The other settings of the panel disappear. | Off |
| Opening mode | One at a time: opening a section collapses its neighbors at the same level. The section that contains it stays open. Multiple: several sections stay open. One at a time is grayed out with All open by default. | One at a time |
| All open by default | All sections are open on load. Requires the Multiple mode. | Off |
| Symbol style | The + that rotates to form a ×, the + that becomes −, the chevron that flips from ↓ to ↑ or the chevron that rotates from → to ↓. | The rotating + |
| Circle around symbol | Puts a circle around the symbol. | Off |
| Symbol position | Left or Right of the text. | Right |
The symbol stays displayed on headings that have subheadings: it is the only cue of a collapsible entry. With Cannot be closed, nothing collapses and the symbol disappears, as on the Accordion. A collapsed section does not open during scrolling: the visitor opens it themselves.
Style the entry
The table of contents contains a single Contents entry block, which styles each heading, at every level. A heading and its subheadings take the same styling and are told apart by the indent, the symbol and the bullet of their level.
- In the preview, click any heading of the table of contents. The table of contents entry is selected.
- Set it in the Styles tab. The other headings in the preview take on its styling as you go.
- To go back to the settings of the table of contents, select the Table of contents block, by its outline or in the document overview.
| State | Styles |
|---|---|
| Default | An entry of the table of contents. |
| Hover | The entry under the pointer. |
| Focus | The entry reached with the keyboard. |
| Active | The entry of the heading currently being read. The preview shows the entry in this state. |
The entry carries the saved style Contents entry: an underline on hover and focus, a little space around the text. The entry being read is in the main color and bold. Its Colors panel has no link color: the entry is itself a link.
The Table of contents part of the design catalog gives a look to the entries of every table of contents on the site: Simple, Rail or Pill (Adopt a design from the catalog). The Table of contents block itself has two states, Default and Hover. It has no Animations tab.
The heading currently being read
While the visitor scrolls the page, the table of contents marks the entry of the heading being read:
- the highest heading still visible on screen;
- in the middle of a long section, when no heading is on screen, the last heading passed;
- above the first heading, no entry.
A click on an entry marks it. It stays marked as long as its heading is on screen. A heading at the bottom of the page, which cannot move up to the top of the screen, keeps the mark.
On a phone
On a small screen, a long table of contents is shortened with Max heading level, or by keeping its sections collapsed on load.
Accessibility
- The table of contents is announced as a navigation region named Table of contents. The Region name field, at the top of the Settings tab, replaces this name, for example “On this page”. Empty, the table of contents keeps its own, shown grayed out.
- Each entry is a link to its heading’s anchor: a shared link leads to the right section.
- A screen reader announces the marked entry as the current location. Without JavaScript, the table of contents stays a list of links, with no marked entry.
- The collapsible sections are native browser elements: they open without a script, with the keyboard as with the mouse. Their state is not kept from one visit to the next.