How to Use the Table of Contents Block

The Table of Contents block lists all of the Headings on your post or page, and allows users to jump straight to the specific section by clicking on them. This is because the block links directly to the headings of the current page. Each Heading on your post or page will show up as a list item in the block.

Using Stackable’s Table of Contents Block

First, add the Table of Contents block to your post or page.

If you added the ToC block in an empty page, you will see the following message:

If you start adding Heading blocks to your page, it will automatically be added to the Table of Contents block. 

Even changing the titles later on will dynamically adjust it. 

If you add the Table of Contents block to a page with existing Headings, then the headings will automatically be listed once the block has been added.

One nice thing about the block is that it uses the Title HTML tag to properly nest the items into headings and sub-headings. For example, an H2 will be nested under an H1, while an H3 will be nested under an H2. 

You also have the option to hide individual entries by clicking on the eye icon beside the entry. 

The Table of Contents block also uses the anchors of your Heading blocks. If you already have Heading blocks in your article and they don't have anchors yet, the block can generate any missing anchors in your headings.

You can style the block just like any Stackable block. You will find the same Layout, Style, and Advanced tabs in the inspector once you select the block.

You can add a block background and border settings to the block to make it easy to distinguish. You can also play around with the Typography settings in the Style tab.

If you navigate to the Style tab, you will find the Scrolling panel. Here you can toggle on the Use Smooth Scroll settings to allow better scrolling on your page.

You also have the option to adjust the Scroll Top Offset settings in order to add top paddings to the block’s anchor links.

In the Frontend

As mentioned earlier, the Table of Contents block lists all of the Headings on your post or page, and allows users to jump straight to the specific section by just clicking on them.

If you view your page in the frontend, you will see that clicking on the specific topic in the Table of Contents block will lead you to that section on your page.