# Table of contents

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](https://lovelyrender.com/documentation/add-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.

1. To remove a heading from the table of contents, turn off its toggle. Turn it back on to put it back. The preview follows.
2. 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.

![The top of the Table of contents settings on the Clos Vermeil home page: the Region name field, then the Headings panel with three headings of the page, each with its toggle on and its label field, the last two shifted under the first.](https://static.lovelyrender.com/uploads/2026/10/934-doc-blocs2-sommaire.png)

**Tip:** A heading you add has no stable identifier before the content is first saved: the panel shows “Save the content once for stable tracking”. Save before removing or renaming a new heading.

- 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](https://lovelyrender.com/documentation/accordion-block/) 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](https://lovelyrender.com/documentation/accordion-block/). 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.

1. In the preview, click any heading of the table of contents. The table of contents entry is selected.
2. Set it in the **Styles** tab. The other headings in the preview take on its styling as you go.
3. 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](https://lovelyrender.com/documentation/adopt-catalog-design/)). 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.

**Tip:** Place the table of contents of a long article in a column that stays on screen while reading: it always shows the section being read. To do this, set the column’s **Position** to **Sticky** ([Set size, borders and effects](https://lovelyrender.com/documentation/size-borders-effects/)).

## 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.

## See also

- [Heading](https://lovelyrender.com/documentation/heading-block/)
- [Accordion](https://lovelyrender.com/documentation/accordion-block/)
- [Breadcrumbs](https://lovelyrender.com/documentation/breadcrumb-block/)