How To Add a Sticky Sidebar Table of Contents with Kadence in 2026 (+ Free Templates)

Sick of the same old Table of Contents in your blog posts? Well, I’ve got great news for you!

The Kadence Table of Contents block can help you improve your website user experience without any code. You can add it to your website sidebar and make it sticky, even without Kadence Pro.

Curious to learn how? Keep reading!

In this step-by-step guide, I’ll teach you how to:

• Put a Kadence Table of Contents in your sidebar effortlessly.
• Make sure it stays there as your readers scroll for a smooth reading experience.
• Hide the sidebar Table of Contents on mobile screens — just the way you want it.

And as a little extra, I’ll also share free templates that you can use on your website!

Let’s get started!

How to add the Kadence Table of Contents in the sidebar?

Follow these steps to set up a Kadence Table of Contents in the sidebar.

1. Install Kadence Blocks

Make sure you have the Gutenberg Blocks by Kadence Blocks plugin installed on your WordPress website.

If you don’t, just follow these steps to install the Kadence Blocks plugin:

Log in to your WordPress admin panel and navigate to Plugins > Add New.

In the search box, type Kadence Blocks.

The first search result, “Gutenberg Blocks by Kadence Blocks – Page Builder Features,” is the plugin you need.

Click Install Now in the plugin box. Once the plugin is installed, select Activate Plugin to complete the installation.

That’s it! You’ve now successfully installed and activated Kadence Blocks on your website.

If you’d like to learn more about using Kadence Blocks, check out this detailed beginner’s guide on using Kadence Blocks that explains all its features and how to use them correctly.

2. Change the layout of your WordPress blog post

Now, before we add a Table of Contents block, we need to change the layout of the WordPress blog post to use a sidebar. Here’s how to do it.

Go to Appearance > Customize from your WordPress dashboard.

You’ll see a sidebar menu appear. This is the WordPress customizer that lets you control the appearance of your website.

Click on Posts/Pages Layout, and then select Single Post Layout.

Scroll down to Default Post Layout and select Left Sidebar or Right Sidebar.

You should immediately see a “Search” bar and “Recent Posts” in the sidebar.

Click the Publish button on the top left side of your screen to save the changes. Then, close the Customizer by clicking the “x” icon.

3. Add a Kadence Table of Contents block

Now, let’s add a Kadence Table of Contents block to the sidebar of your WordPress posts.

The steps are a bit different than how you would add a regular ToC into a blog post.

Start by going to Appearance > Widgets inside your WordPress dashboard.

Before we get into how to add a Table of Contents block, let me explain widgets quickly.

In a nutshell, widgets in WordPress are blocks or elements that you can place in specific areas of your website.

For example, we’ll add a Table of Contents block to the sidebar. But you can also put an image or an affiliate disclaimer in the sidebar, and these are all widgets.

Now, on the “Widgets” page, you’ll see various areas of your website, such as sidebars and footers.

The Sidebar 1 widget area will be open by default, and you’ll notice some blocks like the “Search” bar and “Recent Posts” blocks in it. These are the default widgets included with all WordPress installations.

Feel free to keep them or delete them according to your preference. In my example, I’ll remove the blocks to make my sidebar look cleaner.

Next, click on the + sign and search for “Table of Contents” in the search bar. When you find it, click on the blue Table of Contents icon to add it.

Now that we’ve added the Kadence Table of Contents block to the sidebar, let’s personalize it.

4. Style the Kadence Table of Contents block

I’ve covered all the steps on how to style and configure the Kadence Table of Contents block in my detailed Kadence ToC tutorial. Give that a read if you want to customize your ToC block.

There are some additional tips to keep in mind when setting up a sidebar Kadence Table of Contents block:

• Keep only the h2 and h3 headers toggle turned on. This is because there is limited space in the sidebar and too many headings will make the sidebar overcrowded.
• Reduce the font size by 1 or 2 px to prevent the Table of Contents from becoming too long.
• Change the size of the container in the Advanced settings. Set a Max Width of 300 or 400 px to optimize the ToC appearance.
• To enhance the user experience, enable smooth scroll in Scroll Settings. This ensures that instead of abruptly jumping to a heading, the page smoothly scrolls down, providing a more pleasant reading experience.

Remember to click Update to save any new settings you have configured!

How to make the sidebar Kadence Table of Contents sticky?

You might have noticed that the sidebar Kadence Table of Contents disappears as you scroll down the blog post.

So how do you make the ToC stay in the sidebar, even when the reader is in the middle or at the bottom of the post?

Here’s how!

Once again, go to Appearance > Customize from your WordPress dashboard.

Then head over to General > Sidebar.

Here, you’ll find the Enable Sticky Sidebar toggle. Click on it to enable this feature.

The Only Stick Last Widget toggle will appear. This is the setting that makes only the last widget in the sidebar remain sticky.

Activate the toggle and click the Publish button on the top left side of your screen to save these changes.

Now, you can test out this feature on your blog and enjoy a sticky sidebar Kadence Table of Contents that stays with your readers throughout their reading journey!

This is how my sidebar Kadence Table of Contents looks like on the front end:

The issue with having a Table of Contents in the sidebar

Now that you’ve successfully added a Table of Contents to the sidebar (and made it sticky), there’s one important downside you should be aware of when using a sidebar ToC

The Table of Contents block doesn’t appear in the sidebar on a mobile or tablet device since there’s less space available.

Instead, the ToC appears at the bottom of the blog post by default when you add a sidebar ToC for your site.

Unfortunately, that isn’t helpful for mobile readers.

That’s why, I recommend keeping a sidebar Table of Contents exclusively for desktop users. As for mobile and tablet users, it’s best to place the Table of Contents block before the H2 headings in the standard layout.

This approach ensures a more user-friendly experience across different devices. 

Here’s how you can set it up in two simple steps.

1. Hide the sidebar Kadence Table of Contents on mobile and tablet

Go to Appearance > Widgets from your WordPress dashboard.

Click on the + sign and search for “Section.” Click the Section block to add it.

Now, take the ToC that we’ve already created and place it inside the Section block. You can easily drag and drop it using the drag icon from the block toolbar.

Next, click on the Section block, and go to its Advanced settings. Within the “Visibility Settings,” activate the Hide on Tablet and Hide on Mobile toggles.

Now, with these adjustments, the sidebar Kadence Table of Contents won’t appear at the bottom of the blog post.

2. Create a Kadence Table of Contents for mobile and tablet users

Adding a Kadence Table of Contents for mobile and tablet users is quite simple.

Here’s what you need to do:

Go to a blog post and add your Kadence Table of Contents to the post. 

The only additional step is to insert the Table of Contents inside a Section block, similar to what we did in the previous step.

Once the Table of Contents is inside the Section block, click on the Section and access its Advanced settings. Within “Visibility Settings,” click the Hide on Desktop toggle.

This way the standard ToC will remain hidden for desktop users while remaining visible to mobile and tablet users.

Here’s how the blog post will look on a desktop with those settings in place:

And when you view the post on a mobile device, here’s how the table of contents will look inside the blog post:

That’s how easy it is to set up the Kadence Table of Contents to show up in different places on different devices.

Final thoughts: Setting up a sticky sidebar table of contents with Kadence

I’ve explained how to set up a sidebar Table of Contents using Kadence and also shown you how to make it sticky.

The only drawback of this method is that you’ll need to copy and paste the section containing the ToC block to each blog post. Plus, you need to verify that the visibility settings are configured correctly.

To cut down on the amount of work involved, you can also save your Table of Contents block as a pattern and then add it to each blog post you create.

And if you don’t want to do it manually for each blog post, get Kadence Theme Pro and use Element Hooks to insert a Table of Contents block in all posts automatically!

Ready to make your website better with a sidebar Kadence Table of Contents? Grab our free Kadence sidebar Table of Contents templates for your website.

Have more questions about adding a sticky sidebar table of contents with Kadence? Get in touch with me.