How to Use the Kadence Table of Contents Block (Full Guide)

In this Kadence Blocks Tutorial, I will be going over the Kadence Table of Contents block to teach you exactly how to use it to effortlessly create an attractive and lightweight Table of Contents automatically on your blog posts or pages.

Ready? Use the guide below to learn how to use the Table of Contents block from Kadence Blocks. In fact, this is the exact Table of Contents block that I’ll be teaching you how to use. 😉

1. Install Kadence Blocks

First and foremost, you need to make sure you have the Gutenberg Blocks by Kadence Blocks plugin installed within WordPress. Kadence Blocks is the most popular Gutenberg plugin that extends the functionality of Gutenberg and gives you access to a handful of extra Gutenberg blocks.

If you’re really looking to supercharge your Gutenberg block-building abilities, make sure to look into Kadence Blocks Pro which adds several more premium blocks to your Gutenberg palette to create killer websites.

Once you have the Kadence Blocks plugin installed, make sure to activate it and you will now have the ability to add a Table of Contents block to any of your blog posts or pages that are built with Gutenberg.

2. Add Kadence Table of Contents Block in WordPress

Now that you have Kadence Blocks installed and activated, it’s time to add a Table of Contents block to WordPress.

For this tutorial, I’ll be showing you how to create a Table of Contents block on a WordPress blog post built in the Gutenberg editor.

Say you want to place a Table of Contents near the beginning of your blog post to give readers an easy way to skip directly to whatever section they want to see.

There are two quick ways to add the Table of Contents block to Gutenberg using the block editor.

The first way is to click on the + button and then search for “Table of Contents” and choose the appropriate block.

Another quicker way that I use is that you can type /table and all blocks that start with “Table” will show up including the Table of Contents block from Kadence Blocks.

As soon as you add the Table of Contents block to your post, you will see the title “Table of Contents” along with a message saying “Start adding Heading blocks to create a table of contents.” if your post doesn’t have any headings yet.

However, one of the best features of the Kadence Table of Contents block is that it automatically reads in your post headings and adds them to the Table of Contents without you having to do anything.

In fact, give it a try. If your blog post doesn’t already have any headings on it, start by adding a Heading block. As soon as you begin typing your heading, you’ll see your Table of Contents dynamically read in the heading and add it. How neat is that?!

Once you have your Kadence Table of Contents block added to your post and your entire blog post is written, you’ll see all your headings correctly added to the block.

3. Configure Kadence Table of Contents Block Settings

Let’s go over each of the individual block settings for the Table of Contents to customize it and see how flexible this block can be.

General Settings

Before we get into the sidebar settings, let’s first go over the General Settings that show right above the Kadence Table of Contents block when you have the block selected.

For the first section labeled columns, you can choose whether you want your Table of Contents headings to be in a single column (1), two columns (2), or three columns (3).

For the vast amount of use cases, you’re probably going to want to use a single column which is what I use on this site. However, if you have a long list of items and want to break them down more, you can try two or three columns and see if it works for you.

Once you have chosen the number of columns, you now have to choose your list style.

The first list style (A) turns your TOC into a bulleted list. The second list style (B) turns your TOC into a numbered list. The third list style (C) removes any TOC numbers or bullets.

I personally like using the none list style (C) or the bulleted list (A) on this site.

Be careful using the numbered list (B) if your headings already have numbers in them because it will show two numbers which can be confusing.

Allowed Headers

Now that we have gone over the General Settings, let’s check out the first section of settings that shows up in the right sidebar.

The first area of settings that you’ll see in the sidebar when you have the Kadence Table of Contents block selected is Allowed Headers.

This setting is simple, yet powerful. Toggle the switches for whichever Heading elements that you want to show up in your Table of Contents.

Personally, I turn on h2, h3, and h4 (see image). My recommendation would be to do the same.

The reasoning for these selections is because the only h1 that you should have in your blog posts is the main title and that won’t even show up in your Table of Contents. Also, if you’re using h5 and h6, your post is probably not set up as well as it should be for SEO.

Using h2, h3, and h4 titles effectively can have a massive benefit for SEO.

Title Settings

Now that you have your Allowed Headers chosen, it’s time to go over your Title Settings.

There is an option to Enable Title. Enabling this will add the “Table of Contents” title above your listed headings. You can change this title to say whatever you want it to say.

You also get various options such as the ability to change your title color, font size, font family, and various other settings.

For my Table of Contents, I used the Text Transform setting to make it all uppercase so that the title reads TABLE OF CONTENTS.

You’ll see that you can specify a Title Border Width which adds a border only around the title itself along with Padding which gives some space between the title and the border.

One last interesting setting for your Title Settings is that you can choose a different Title Color for when your Table of Contents is expanded versus collapsed. This is only if you are using a collapsible Table of Contents which I will be covering next.

Collapsible Settings

The Collapsible Settings are a really nice feature for the Kadence Table of Contents block. There are only a few simple settings to cover here, but having a collapsible Table of Contents is one of the top features to make this the best Table of Contents block for WordPress.

If you are wondering how to make a collapsible Table of Contents in your WordPress posts, all you have to do is toggle the switch on for Enable Collapsible Content in your Kadence Table of Contents collapsible settings.

There is also a toggle for Start Collapsed. If you toggle this setting on, your Table of Contents will start off already collapsed (without showing all the headers on your page), and then the user will have to click or tap on the toggle button to show all of the contents. This is really nice if you want to use less room and make it look cleaner right off the bat.

Lastly, if Enable Collapsible Content is toggled on, then you can choose the Icon Style of your collapsible icons (collapsed and expanded).

This is the cherry on top of the collapsible settings and a big advantage of using the Table of Contents block from Kadence Blocks in WordPress over other block extension plugins such as Ultimate Addons for Gutenberg (UAG) created by the same team that makes Astra.

The Table of Contents block in UAG only allows you to choose a single icon for your collapsible settings and the icon doesn’t even flip when you toggle it.

Then again, it’s no surprise that Kadence Blocks is much better than UAG since the Kadence theme easily beat the Astra theme in all of my comparison tests.

List Settings

Let’s now go over the List Settings for your Kadence TOC block. The list settings affect all of the listed headings under your title.

The very first setting is for the List Item Gap. Personally, I like setting this to 2. What this does is it adds a bit of spacing between each of the listed headings and this helps make sure the user taps or clicks the correct heading they want to go to, especially on mobile.

You can even have a different List Item Gap on each screen size if you so choose (desktop, tablet, and mobile).

The next section is for the List Items Color. The default color is set to your normal text color, however, I prefer to set my list items to be the color of my normal links.

Therefore, I globally link my List Items Color to the first accent color in my Kadence global color palette. You’ll also notice there is a Hover tab. If you want your Table of Contents list items to be a different color on hover, choose a different Hover List Items Color. For the hover color, I chose the second accent color in my global color palette.

If you want a full tutorial on how to use the global color palette, check out How to Use the Kadence Global Color Palette to Supercharge Your Brand.

The next piece I’ll go over is the List Link Style. Here you have three different options: Underline (which I personally use), Underline on Hover which will underline your links as you hover over them on desktop, and No underline which completely removes the underline from all your TOC links.

The next few options have to do with the font of your list items. You can adjust the letter spacing between each of the letters, use text transform to show all of your list items as all uppercase, lowercase, etc. and then also choose your desired font family and font weight.

Lastly, the List Container Margin determines the amount of margin around your list items. You’ll see that there’s a default of 20 px of top padding applied to give some breathing room between the “Table of Contents” title and the list items. I personally leave this as the default, but you’re free to change paddings if you want more room.

Container Settings

The Container Settings section has some really nice options to really improve the aesthetics of the Kadence Table of Contents block and offers flexibility for sizing the block appropriately as well.

The first two settings I’ll go over are Container Background and Container Padding.

Choosing a container background will change the entire background of your Kadence Table of Contents to whichever color you choose.

By default, there is 20 px of padding applied to your entire Table of Contents container. This will be more noticeable if you add a border to your TOC which I’ll cover next.

The next two settings are Border Color and Content Border Width (px).

For the Kadence TOC in this blog post, you’ll see that I have a Content Border Width of 2 px set.

Once the border is set, you’ll now be able to notice the 20 px of Container Padding between the border and the content as I mentioned before.

You can change the Border Color to be any color you want.

Also, you can also add Border Radius to your Kadence TOC block to give the corners rounded edges.

After that, you will see a toggle for Box Shadow. I personally turn the box shadow ON because it gives the Table of Contents some depth and makes it pop out more.

You can set the box shadow color and other options to whatever suits you best.

The last two Container Setting options are Max Width and Container Margin. These can be used to your advantage depending on how you plan to use the Kadence Table of Contents block.

For example, I like setting a Max Width usually around 400 px. What this does is condense the TOC to make it more compact.

My main content area is usually around 800 px on desktop and I don’t like the TOC spanning the entire width of my content because my titles aren’t usually that long.

Using Max Width along with a Content Border Width and a Box Shadow, you are able to create a nice, attractive Table of Contents box that pops out.

Using the Container Margin would be beneficial if you plan to place your Table of Contents in your sidebar and need some space between your Table of Contents and the other widgets in your sidebar.

For example, you can use Kadence element hooks to automatically place a Table of Contents in the sidebar of every one of your blog posts.

I’ll be covering how to do this in a future tutorial.

If you want to master Kadence element hooks, check out my guide on How to Use Kadence Element Hooks for Endless Customization.

Scroll Settings

The last section of settings to cover for the Kadence Table of Contents block are the Scroll Settings.

Under the Scroll Settings, make sure to enable the toggle for Enable Smooth Scroll to ID.

What this does is smoothly scrolls your visitor’s page down to the appropriate title when they click on a link in your TOC.

After you enable this option, you’ll see a section show for Scroll Offset. This scroll offset is a very underrated feature that gives a huge advantage for Kadence Blocks vs UAG or other block plugins.

As you can see in this example, there is a Scroll Offset of 40 px. If you use any type of sticky header, Kadence should automatically calculate how tall your sticky header is and set that amount as the offset.

That way, when a user clicks on a title in your Table of Contents and the browser scrolls down, the heading title won’t be covered by your sticky header.

If you don’t have any sticky headers on your site, the Scroll Offset will be set to 0. You should probably just leave the Scroll Offset to whatever Kadence calculates unless you need to manually change it.

4. Publish and View Finished Kadence TOC block

After you have configured all of the Kadence Table of Contents block settings, you’re done!

Make sure that your post is published and then view your post. You will see your Table of Contents exactly as you configured it.

Here’s the final product of the TOC block I created.

---

Believe it or not, there’s even more that you can do with the Kadence Table of Contents block.

For example, using Kadence element hooks, you could automatically add a Table of Contents block to every single post of yours in a matter of minutes.

Yes, you heard that right. You don’t even need to manually go into every post and add a Table of Contents block to each one. Kadence element hooks can do it for you.

Or, say you want to automatically have a Table of Contents show in your WordPress sidebar and stay sticky as the user scrolls down the page?

I’ll teach you how to do all of that in my next tutorial. 🙂