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 just 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 as a list item in the block.
Using Stackable’s Table of Contents Block
The first thing you need to do is to add the Table of Contents block to your post or page by going to the block library or by typing in the shortcut.
If you added the ToC block in an empty page, you will see the following message:
Note that 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 added the block to a page with existing Headings, then they will automatically be listed once the block’s been added.
The 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 your headings may.
Designing the Table of Contents Block
You can style the block like you normally would with any Stackable block. You will find the same Block, Style, and Advanced tabs in the inspector once you select the block.
You can add a block background and some border settings to the block to make it easily distinguishable. You can also play around with the Typography settings to your liking under 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.