Adding a table of contents

A table of contents lists the headings on a page and links to each one. Orbit builds the list from the headings already there, so you do not type the links. Use it on long pages such as guides and blog posts.

Considerations

• Table of Contents is in the Advance group. Basic mode hides that group, and search will not find it. Click Pro at the top of the page builder to switch modes.
• The list comes from the page's own headings. With none to find, the element reads "Table of contents will be generated from this page's headings."

Add the element

1. Open the page in the page builder.
2. In the toolbox on the far left, click Elements.
3. Open the Advance group and find Table of Contents, or search for it.
4. Drag it onto the canvas and drop it where you want it. The settings panel opens on Editing Table of Contents.

Choose which headings appear

1. With the element selected, open the Content tab.
2. Open Heading Levels and turn on the levels you want, from Include H2 down to Include H6.
3. Open Scope & Structure. Leave Scope Selector blank to scan the whole page, or type a CSS selector to scan one part of it.
4. Turn on Nested (indent by level) to indent lower headings under higher ones.
5. Set List Marker to Number, Bullet or None.

Content settings

• Show Title and Title: turn the heading above the list on or off, and set its wording.
• Heading Levels: which levels appear in the list.
• Scope Selector: the part of the page to scan.
• Smooth Scroll and Scroll Offset (px): the page glides to the heading instead of jumping, and stops the set distance above it.
• Sticky on Scroll, Sticky Top Offset (px) and Keep Sticky on Mobile: keep the list on screen as the customer reads. Sticky is off on mobile by default.
• Collapsible Toggle and Collapse Title: let customers fold the list away. Collapsed by Default (Desktop) and Collapsed by Default (Mobile) set its starting state.

Design settings

Open the Design tab to style the list. The groups are Typography, Colours, Layout, Divider, Sticky Sizing, Effects, Border and Spacing.

Related guides

• Adding a heading
• Adding a reading progress bar
• Adding and arranging elements
• Using the element settings panel