Table of Contents Block

The Table of Contents block automatically creates a navigational menu based on the headings used on a page. It is one of the easiest ways to improve navigation on longer pages and help visitors find information more quickly.

As headings are added, removed, or updated, the Table of Contents updates automatically. This makes it an ideal solution for pages containing large amounts of content, such as guides, policies, FAQs, and training materials.

You’ll notice that many pages throughout this training site use a Table of Contents to help readers jump directly to the sections they’re interested in.

When to Use a Table of Contents

A Table of Contents is most useful on pages that contain multiple sections or a significant amount of content.

Common examples include:

• Training modules
• Documentation pages
• Policies and procedures
• FAQ collections
• Resource guides
• Long-form content

For shorter pages with only one or two sections, a Table of Contents is usually unnecessary.

How the Table of Contents Works

The block automatically generates links based on the headings that appear below it on the page.

Typically:

• H2 headings become top-level items.
• H3 headings appear as sub-items beneath the relevant H2 heading.

For example:

Introduction (H2)
Getting Started (H2)
    Creating Content (H3)
    Publishing Content (H3)
Additional Resources (H2)

Would automatically generate a navigation menu based on that structure.

Because it relies on headings, using proper Heading blocks and heading hierarchy is important.

Adding a Table of Contents

To add a Table of Contents:

1. Click the + button and search for Table of Contents.
2. Select the Table of Contents block.
3. Place it where you want the navigation menu to appear.

That’s it!

The block will automatically build itself using the headings that follow it on the page.

Block Placement

The position of the Table of Contents matters.

The block will generate links based on the headings that appear below it in the page structure.

For this reason, it is usually placed:

• Near the top of the page
• Below the page introduction
• Before major content sections

This allows visitors to immediately see all available sections and navigate directly to them.

Heading Structure Matters

The quality of a Table of Contents depends on the quality of your heading structure.

Good Example:

H2 Admissions
    H3 Applying
    H3 Deadlines
H2 Tuition
    H3 Fees
    H3 Scholarships

Less Effective Example

H2 Admissions
    H4 Applying
H2 Tuition
    H5 Fees

Using proper heading levels creates a clearer and more accessible navigation experience.

Benefits of Using a Table of Contents

• Improved Navigation
  Visitors can jump directly to relevant sections without scrolling through the entire page.
• Better User Experience
  Large pages become easier to browse and understand.
• Automatic Updates
  As headings change, the Table of Contents updates automatically.
• Encourages Better Page Structure
  Using a Table of Contents reinforces the importance of clear heading hierarchy and accessible content organization.

Best Practices

Use on Longer Pages
A Table of Contents provides the greatest value on pages with several sections.

Use Descriptive Headings
Visitors should be able to understand what each section contains based on the heading alone.

Good Examples:

• Admission Requirements
• Contact Information
• Frequently Asked Questions

Avoid:

• Details
• More Information
• Section 1

Follow Heading Hierarchy

Use headings in a logical order: h2, h3, h4. This creates a cleaner navigation structure.

Place It Near the Top
Users should be able to see the Table of Contents before they begin scrolling through the page.

Try it Out

Practice using the Table of Contents block.

1. Create a page with several Heading blocks.
2. Add a Table of Contents block near the top of the page.
3. Preview the page.
4. Click the items in the Table of Contents to navigate between sections.
5. Add a new H2 or H3 heading and observe how the Table of Contents updates automatically.