How to Set Up a Table of Contents in Thrive Architect

In this article, you’ll learn how to set up a Table of Contents element in Thrive Architect. This element automatically generates a clickable list of headings from your page content, helping visitors navigate long articles, tutorials, and documentation pages with ease.

---

The Table of Contents element scans your page for heading elements (H1 through H6), builds a structured list, and provides smooth-scroll navigation to each section. You can also make it sticky so it stays visible as visitors scroll, and you can collapse it into a compact toggle for a cleaner layout.

Click here to accept Marketing cookies and load this content

Adding the Table of Contents Element

Follow these steps to add a Table of Contents element to your page:

1. Open your page or post in the Thrive Architect editor.
2. Click the green plus (+) icon in the right sidebar to open the element panel.
3. Type Table of Contents in the search field at the top of the panel.
   
   
4. Alternatively, scroll down to the Building Blocks section in the element list to find the Table of Contents element.
5. Drag the element from the panel and drop it onto your page canvas — typically near the top of your content area, below the introduction.

A default Table of Contents element will appear on the canvas with the CSS class .tve-toc, ready for configuration.

Tip: Add your content and headings first, then add the Table of Contents. That way you can see straight away which headings it picks up.

Choosing a Template

When you first add the Table of Contents element, a template selection screen appears. You can choose from several pre-designed templates with different visual styles, colors, and layouts. Select a template to use it as a starting point, then customize it further using the options in the left sidebar. You can also skip template selection to start with a default layout.

Important: If you want a different template, change it before you customize the element. Replacing the template later removes your content and changes. To swap it, click the Template field at the top of the left sidebar, pick a new one, and click Replace Template.

Editing the Table of Contents

After placing the element, you’ll see two important controls at the top of the left sidebar:

• Edit table of contents button — Opens Edit Mode, where you can select and style each part of the table on its own: the title, each heading level, and the numbers or icons. Click a heading to select every heading of that level at once (group styling). Click the orange Done button to leave Edit Mode.
• Update table sync link — Click this to re-scan the page and refresh the Table of Contents with any heading changes you’ve made since the last sync. Use this after adding, removing, or renaming headings on your page.

You can also click directly on the ToC title text on the canvas to edit it inline. By default, the title is “Table of Contents,” but you can change it to any text you like (e.g., “In This Article” or “Quick Navigation”).

Important: The Table of Contents does not auto-update in real time while you edit. Always click the Update table link after modifying headings to ensure the table reflects your current content.

Selecting Which Headings to Include

Control which heading levels appear in the Table of Contents:

1. Select the Table of Contents element. Its options appear under Main Options in the left sidebar.
2. In the Headings section, you’ll see checkboxes for each heading level: H1, H2, H3, H4, H5, and H6.
3. Check or uncheck each level to include or exclude it from the table.

Tip: For most blog posts and articles, including H2 and H3 headings provides a good balance of detail. Including all levels down to H6 can make the table overwhelming on pages with deeply nested headings.

Setting the Column Layout

The Columns option controls how the heading list is arranged:

• 1 — All headings display in a single column (default, best for sidebars or narrow layouts).
• 2 — Headings split into two columns.
• 3 — Headings split into three columns.

When using multiple columns, you can enable the Distribute evenly switch (enabled by default) to balance the number of items across columns. When disabled, items fill each column sequentially before wrapping to the next.

Configuring the Highlight Mode

The Highlight option controls how the currently visible section is indicated in the Table of Contents as visitors scroll through the page:

• Off — No highlighting. The Table of Contents remains static as visitors scroll.
• Current heading — Highlights only the heading that corresponds to the section currently in view.
• Current section — Highlights the heading and all sub-headings within the current section.
• Progressive — Highlights all headings from the top down to the current position, showing the visitor’s overall progress through the page.

Note: The highlight styling is controlled through the element’s design options. Select the highlighted state to customize its color, font weight, and other properties.

Item State Styling

The Table of Contents supports three styling states for list items:

• Normal — The default appearance of heading links.
• Hover — The appearance when a visitor moves their cursor over a heading link.
• Highlight — The appearance of the heading link that matches the section currently in view (works with the Highlight option above).

To switch states, open Edit Mode, select a heading level, then click State: Normal at the top of the left sidebar and pick the state you want to style. Each state has its own colors, typography, and other visual options.

Color Palette Presets

At the top of the left sidebar options, you’ll find color palette presets. Click on a palette to instantly apply a coordinated color scheme across the entire Table of Contents, including the title, heading links, background, borders, and active/hover states. This provides a quick way to theme the element to match your page design.

Setting the List Type and Numbering

The List type (also called Numbering) option controls how items are prefixed in the Table of Contents:

• None — No numbers or icons. Headings display as plain text links.
• Numbered at top level — Only the top-level headings receive sequential numbers (1, 2, 3, etc.). Sub-headings appear without numbers.
• Numbered at all levels — All heading levels receive hierarchical numbering (1, 1.1, 1.2, 2, 2.1, etc.).
• Icons at top level — Only the top-level headings display an icon prefix. Sub-headings appear without icons.
• Icons at all levels — All heading levels display an icon prefix.

When you select an icon-based option, you can choose the icon to display from the icon library.

Configuring Indent Size

The Indent size slider controls how much sub-headings are indented relative to their parent headings:

• Default: 30px
• Range: 0 to 200px

A larger indent makes the hierarchy clearer, while a smaller indent keeps the table compact. For tables with only two heading levels, 20-30px is usually sufficient.

Controlling Smooth Scroll Animation

By default, clicking a heading in the Table of Contents triggers a smooth scroll animation to that section on the page. You can disable this with the Disable smooth scroll animation switch.

Important: The tooltip for this option recommends disabling smooth scroll for pages with lazy-loaded content. Lazy loading changes the page height as images and other elements load in, which can cause the smooth scroll to land at the wrong position. If your page uses lazy loading, consider turning smooth scroll off.

Making the Table of Contents Collapsible

The Allow table to be collapsed switch (enabled by default) lets visitors expand and collapse the Table of Contents, keeping the page tidy:

1. Enable the Allow table to be collapsed switch in the left sidebar.
2. Configure the following sub-options that appear when collapsible is enabled:

Default State

• Collapsed — The Table of Contents starts closed, showing only the title. Visitors click to expand it. This is the default.
• Expanded — The Table of Contents starts fully open. Visitors can click to collapse it.

Dropdown Animation

Choose how the table expands and collapses:

• None — Instant show/hide with no animation.
• Slide — The table slides open and closed vertically.
• Fade — The table fades in and out.

Animation Speed

Control how fast the dropdown animation plays:

• Slow — A slower, more deliberate animation.
• Medium — A balanced animation speed (default).
• Fast — A quick animation for a snappier feel.

Tip: The Slide animation at Medium speed is a solid default choice. It provides a clear visual cue that the table is expanding without feeling sluggish.

Adjusting Text Size and Line Spacing

Text Size

The Text size slider controls the font size of the heading links in the table:

• Default: 16px
• Range: 1 to 100 (px or em units)

Line Spacing

The Line spacing control adjusts the vertical distance between heading items. Increase this for a more open, airy layout, or decrease it for a more compact table.

Modifying Headings

The Modify Headings section at the bottom of Main Options lets you rename or hide headings in the table:

1. In the left sidebar, expand Modify Headings. You’ll see a list of the headings detected on your page.
2. To rename a heading in the table, click the pencil icon next to it, type the new label, and click the check icon. This changes only the text in the Table of Contents. The heading on the page stays the same.
3. To hide a heading, click the eye icon (Toggle Visibility) next to it. Its subheadings are hidden too. Click the eye icon again to show it.
4. To undo your renames, click Sync. Each heading in the table goes back to the text it has on the page.

Note: Headings in the table always follow their order on the page. To change the order, move the headings on the page, then click Update table.

Using Group Editing

The Table of Contents element supports group editing for the following item types, allowing you to style multiple items at once:

• Heading levels 1, 2, 3 — Edit the styling (color, typography, spacing) of all headings at a specific level simultaneously.
• Icon levels 1, 2, 3 — Edit the icon styling for all entries at a specific depth when using icon-based list types.
• Number levels 1, 2, 3 — Edit the number styling for all entries at a specific depth when using numbered list types.
• Dividers — Edit the styling of divider lines between heading items.

To use group editing, click Edit table of contents, then click any heading on the canvas. Every heading at that level is selected, and the group’s name shows under Currently styling in the left sidebar. You can also pick a different group from that dropdown. Changes you make apply to every item in the group. To style a single item on its own, click Exit Group Styling. Click the orange Done button when you finish.

For each group you can change the font, color, text transform (capitalization), alignment, formatting (bold, italic, underline, strikethrough), font size, line height, and letter spacing. You can also set margins and padding, a background, borders and corners, and shadows.

Styling the Table of Contents Box

Besides Main Options, the left sidebar has the standard sections for styling the box that holds the table:

• Layout & Position — Set the width, alignment, margins and padding, and display type (inline or block).
• Background Style — Add a solid color, gradient, image, or pattern behind the table.
• Borders & Corners — Add a border on any side and round the corners.
• Shadow — Add an inner or outer shadow to the box, or a shadow to the title text.
• Responsive — Choose whether the table shows on desktop, tablet, and mobile.
• HTML Attributes — Add a CSS class or an ID to the table.

Making the Table of Contents Sticky

A sticky Table of Contents stays on screen as visitors scroll, so they can jump to any section at any time. You set this up in the Scroll Behavior section of the left sidebar.

Setting Up a Sticky Table of Contents

1. Select the Table of Contents element on the canvas.
2. In the left sidebar, expand Scroll Behavior.
3. Under Behavior on Scroll, select Sticky.
4. Under Visible on, choose the devices where the table should stick: desktop, tablet, mobile, or any mix.
5. Under Stick to screen, choose Top or Bottom.
6. Use the Distance from the top of the screen slider (or Distance from the bottom of the screen) to leave a gap between the table and the edge of the screen.
7. Under Sticky until, choose when the table stops following the visitor: End of page, End of parent container, or It reaches another element.

Stopping the Sticky Table at a Specific Element

To stop the table before it overlaps content further down, such as your footer or a “Related Resources” section, give that element an ID:

1. Select the element where the table should stop.
2. In the left sidebar, open HTML Attributes and type an ID in the ID field, for example toc-stop.
3. Select the Table of Contents again and open Scroll Behavior.
4. Set Sticky until to It reaches another element, then type the same ID in the Element ID field.
5. Save the page and preview it to check where the table stops.

Best Practices for Sticky Table of Contents Placement

• Use a sidebar layout — Place the Table of Contents in a sidebar column (using the Columns element) and make it sticky. The table stays visible next to your content without covering it.
• Leave room for a sticky header — If your site has a sticky header, set Distance from the top of the screen to at least the header height plus a small gap, so the table doesn’t hide behind the header.
• Keep it compact — A sticky table works best when it’s short. Use the collapsible option or include fewer heading levels.

Responsive Considerations for Sticky Table of Contents on Mobile

• Turn sticky off on mobile — On small screens, a sticky table can cover too much of the content. In Visible on, leave mobile unselected so the table scrolls normally on phones.
• Start collapsed on mobile — If you keep the table on mobile, set Default State to Collapsed so it takes little space until the visitor opens it.
• Test across breakpoints — Use the responsive preview in Thrive Architect to check the sticky table on tablet and mobile.

Frequently Asked Questions

Why Isn’t the Table of Contents Showing Any Headings?

The Table of Contents scans for heading elements (H1-H6) on the page. If no headings are detected, the table will appear empty. Make sure you have heading elements on the page (not just bold text) and click the Update table link to sync.

Can I Exclude a Specific Heading from the Table?

Yes. In the Modify Headings section, click the eye icon next to the heading. It disappears from the Table of Contents but stays on the page.

Does the Table of Contents Work with Thrive Theme Builder Templates?

Yes. You can add a Table of Contents element to a Thrive Theme Builder template (for example, a blog post template), and it will dynamically generate a heading list based on each post’s content.

Why Does Smooth Scroll Land at the Wrong Position?

This typically happens on pages with lazy-loaded content (images, videos, or iframes that load as you scroll). Because lazy loading changes the page height after the initial load, the scroll calculation can be off. Disable smooth scroll using the Disable smooth scroll animation switch to resolve this.

Related Resources

• Toggle Element: How to Use the Toggle Element — Collapsible sections for FAQ-style content
• Columns Element: How to Use the Columns Element — Create a sidebar layout to hold a sticky Table of Contents
• Content Box: How to Use the Content Box Element — Container element for wrapping the Table of Contents
• Getting Started: Getting Started with Thrive Architect — Overview of the editor and element panel
• Hyperlinks: How to Use Hyperlinks and Link Styling in Thrive Architect — Add jump links to other parts of the page outside the Table of Contents

That’s it! You’ve successfully learned how to set up a Table of Contents in Thrive Architect. With heading selection, column layouts, highlight modes, collapsible behavior, and sticky positioning, you can create a navigation aid that helps visitors find exactly what they need on long-form pages.