Table Of Contents

Spectra allows you to automatically generate a Table of Contents (TOC) in the Gutenberg editor. After you add the block to the page or post, all your headings will be listed here.

A Table of Contents helps the reader with a clear picture or an overview of what to expect in any particular post or page.

This document will show you how to set up and use a Table of Contents block like the following:

Adding TOC to a Page

You can find the Table of Contents block just like any other block:

Updating your TOC

The next step would be to add content having relevant Heading tags from H1 to H6.

The table of contents will be updated automatically as you add headings to your page.

Common TOC Settings

Under General settings, you can choose heading tags to generate a table. We’ll explore some of them:

Editing TOC Title

By default, you will see the Title as a Table of Contents, you can update it to something else as per your requirement.

For example – “How to Setup your Website in 5 Easy Steps” or any other title based on the content on that page or post. Here’s how:

Under General > Content > Title Alignment, you can align the TOC title to the left, middle, or right.

You can also align the overall table of contents, title, list of headings, columns, and gap between the lists.

Displaying Bullets or Lists

Headings in your TOC can be arranged and displayed using either bullets or numbers. Adjust this under General > Content > Marker View. You can even remove these markers entirely.

Managing TOC Width

Enable “Custom Width” under General > Content and adjust the Width slider to resize the entire TOC width.

If you want to manage the gap between the individual TOC items, then adjust the “Gap Between Lists” slider.

Enable Smooth Scroll

When a reader clicks on any TOC item, the page smoothly redirects them to the clicked TOC heading. To achieve this, enable the “Smooth Scroll” option under General > Scroll.

Minimize Your TOC

A page with multiple headings may make your TOC look bigger and capture extra space at the start. To avoid this, enable the “Make Content Collapsible” option under General > Content.

When a reader clicks on this arrow, your TOC will be minimized.

Styling Your Table of Contents

Under the Style module, you can set the background color, and border to your table of contents.

You can also set the typography, and color for the title, and the list when it is normal and hovered.

That’s it!

You can do more with the extensive options available for Spectra’s Table of Contents block. For any questions, feel free to drop a comment below!