Skip to content
  • There are no suggestions because the search field is empty.

How to use the Table of contents component

How to create a Table of contents

The Table of Content web part makes navigating long pages easy by generating an automatic outline of your content. Based on your page’s headings, this tool adds clickable anchor links so users can quickly jump to the section they need.

▶️ Follow the interactive tutorial below to configure your Table of Content web part.

What You’ll Learn

  • How to add the Table of Content web part

  • Which headings are supported

  • How to enable or disable numbering

  • How to float the Table of Content on your page

  • How to adjust positioning using offset values

Overview

This component scans your page for specific headings (H3, H4...) and creates a clickable navigation list. Ideal for longer news posts, detailed updates, or policy pages—your users won’t have to scroll endlessly to find what they need.

Instructions

Add the Web Part

  1. Go to the page where you'd like to add navigation.

  2. Click the “+” icon and select Table of Content from the list of components.

Configure the Component

  1. Click Edit properties to open the settings.

  2. The component will automatically detect headings like Heading 3 and Heading 4 on your page.

  3. Use meaningful section titles with proper heading structure to make the table useful.

Interaction

  1. Once active, users can click a heading in the table to jump directly to that section of the page.

  2. The page will automatically scroll to that content anchor.

Numbering Options

  1. You can choose whether to show numbered headings (e.g., 1. Introduction, 2. Details) or leave them as plain text.

Optional Settings

Collapsed by Default

  • Disable the “Expanded by default” setting if you want the table to start collapsed.

  • Users can then click to open the table manually.

Floating Table of Content

Want the Table of Content to float alongside your content?

  1. Click Edit and toggle Enable floating table of content.

  2. Adjust the Offset top and Offset left values to position it exactly where you want.

    • Example: Top offset = 150px, Left offset = 150px

  3. Try positioning it just below the page title for optimal visibility.

  4. Click Update or Republish to save your changes.

Step-by-Step Screenshots

  1. Start tutorial

  2. Add the Table of Content web part

  3. ▶️ Video step: Add to page

  4. Component scans for Heading 3 and Heading 4

  5. ▶️ Video step: Heading detection

  6. Click on a heading to test navigation

  7. Enable or disable heading numbering

  8. Disable "Expanded by default" to collapse initially

  9. ▶️ Video step: Expanded state

  10. Enable the floating option in the settings

  11. Set offset values for ideal position

  12. ▶️ Video step: Floating positioning

  13. Save and Update news

  14. 🎉 Done! You now have a smart, scroll-friendly page

  15. Enjoyed the guided demo?

Styling Tips

You can further style the Table of Content using custom CSS via the Involv Script Editor.
Examples:

  • Adjust font size

  • Add background color

  • Change bullet or numbering style