Table of contents
The Table of contents element builds in-page navigation from the headings inside a Text element. Add it in the Site or Embed editor to let visitors jump to sections of a long page. The Document editor does not include it in its palette.
Add a table of contents
You need a Text element that holds the headings the links will point to.
In the Site or Embed editor, open the add-element panel and add the Table of contents element from the Static elements group.
With the element selected, choose a Text element in the Text component selector in the inspector. The list shows only Text elements, so a standalone Heading element cannot be the source.
Under Headings shown, turn on the heading levels to include: Heading 2 through Heading 6.
Set Scroll offset in pixels to control how much space stays above the heading after a visitor clicks a link.
Properties
The properties live in the inspector.
Property | What it does | Default |
|---|---|---|
Text component | The Text element whose headings become the links. Only Text elements appear in the list. | Empty, showing the placeholder "Select a Text component" |
Headings shown | Which heading levels become links, from Heading 2 through Heading 6 | Heading 2 on, Heading 3 through Heading 6 off |
Scroll offset | Space, in pixels, left above the heading after a visitor clicks a link | 80, with a minimum of 0 |
A Logic group controls when the element is visible.
Write the headings the links point to
The element scans the selected Text element for H2 to H6 headings and creates one link per matching, non-empty heading. In the Text element's Content field, start a line with two hash marks (##) for an H2 heading, three (###) for H3, and so on up to six for H6. Heading 1 is never included. See Text for the Content field and its other options.
How the links behave on your site
Clicking a link scrolls to its heading, updates the URL hash without reloading the page, and uses smooth scrolling. Visitors who prefer reduced motion do not get smooth scrolling.
A heading that already has an ID keeps it. A heading without an ID gets one generated from its text, and when two headings would get the same ID, the second and later ones get -2, -3, and so on appended.
The link for the heading currently in view is marked as active, so visitors can see where they are on the page.
Empty state
In the editor, the element shows a message when it has nothing to list:
"Select a Text component to show its headings." when no Text element is selected or the selected element no longer exists.
"No matching headings. Add one to the Text component or select another heading level." when the selected Text element has no heading at an enabled level.
On a preview or published site, an empty table of contents is hidden.
Styling
The Table of contents can be styled per state.
Style states: Default, Visible, Hover. Visible is the link for the heading currently in view, so the active entry can look different from the rest.
Named styles: Table of contents - border, Table of contents - plain.
Apply general styling from the Style tab: quick styles, style sets, and CSS overrides per state and per breakpoint. See the styling reference for the full system.
Related articles
UI Elements: overview of the elements.
Text: the element the table of contents reads its headings from.
Component stylesets: how style states work.