---
title: How to Add a Sticky Table of Contents in WordPress
description: Turn on the Sticky option of the Ultimate Blocks Table of Contents block (Pro) to keep a floating table of contents button on screen while readers scroll.
url: "https://ultimateblocks.com/docs/how-to-add-a-sticky-table-of-contents/"
updated: "2026-11-07"
category: "How-To Guides"
---

# How to Add a Sticky Table of Contents in WordPress

To add a sticky table of contents in WordPress, turn on the **Sticky** option of the **Table of Contents** block in Ultimate Blocks. The Table of Contents block is free, and the Sticky panel is part of Ultimate Blocks Pro. Once readers scroll past your table of contents, a small floating button stays on screen, and clicking it opens the full table of contents so they can jump to any section.

## What you need

- The free [Ultimate Blocks](https://wordpress.org/plugins/ultimate-blocks/) plugin.
- [Ultimate Blocks Pro](https://ultimateblocks.com/pricing/), installed and activated alongside the free plugin.
- A post or page with headings (H2, H3 and so on).

## How to add a sticky table of contents

1. Open the post or page in the WordPress block editor.
2. Click the **+** (Block Inserter) button, search for **Table of Contents** and click the block to add it. Place it near the top of the post, after the introduction.
3. Select the block. In the **Settings** tab of the block sidebar, open the **Sticky** panel.
4. Turn on **Sticky**.
5. Adjust **Position (%)** and **Width (PX)**, and turn on **Hide On Mobile** if you don’t want the floating button on phones. Each setting is explained below.
6. Optional: switch to the **Styles** tab and set the **Sticky Button Icon Color**.
7. Click **Update** or **Publish**, then open the live page and scroll down to see it.

## How the sticky table of contents works

- The regular table of contents stays where you placed it in the post.
- When it scrolls out of view, a floating button appears on the screen. When you scroll back up to the table of contents, the button goes away.
- Clicking the button opens a floating copy of your table of contents. Readers click a link to jump to that section, or click the close icon to hide it again.
- The button uses the list icon you picked in **Current icon** (Pro, shown when the list type is bulleted). If you have not picked one, it shows a menu (bars) icon.

## Sticky settings explained

| Setting | What it does |
| --- | --- |
| **Sticky** | Turns the floating table of contents on or off for this block. |
| **Position (%)** | Sets where the button sits across the screen, from 0 to 100. Values below 50 place it on the left side, values above 50 place it on the right side, and 50 centers it. For example, 75 puts it on the right. |
| **Width (PX)** | Sets the width of the floating table of contents panel in pixels (0 to 1500). Around 300 to 400 works well for most posts. |
| **Hide On Mobile** | Hides the floating button on small screens (about 680 pixels wide or less). Readers on phones still see the regular table of contents in the post. |
| **Sticky Button Icon Color** | In the **Styles** tab. Sets the color of the button icon and its border. |

**Tip:** If your theme has a sticky header that covers headings after a click, open the **Scroll** panel and set **Scroll offset adjustment** to **Relative to first available fixed/sticky element**. This works for the sticky table of contents too.

## Tips for a better sticky table of contents

- **Keep it short:** in **Allowed Headings**, include only H2 and H3. A long list is hard to use in a small floating panel.
- **Shorten long entries:** use the pencil icon next to an entry to change its text in the table of contents without changing the heading.
- **Use it on long content:** sticky navigation helps most on guides, tutorials and documentation that need a lot of scrolling.
- **Test on a phone:** check that the button does not cover a chat widget or cookie banner. Move it with **Position (%)** or turn on **Hide On Mobile**.
- **Link to divider:** this option is ignored while Sticky is on, because readers can already reach the table of contents with the floating button.

## Common problems

- **I don’t see the Sticky panel:** make sure Ultimate Blocks Pro is installed, activated and has an active license, and that the free plugin is also active.
- **The button doesn’t appear:** it shows only after the table of contents has scrolled out of view. Also check **Hide On Mobile** if you are testing on a phone, and clear your page cache.
- **The panel is too narrow or too wide:** change **Width (PX)**.

## Frequently asked questions

**Is the sticky table of contents free?**

No. The Table of Contents block is free, but the Sticky option is part of Ultimate Blocks Pro.

**Does the sticky table of contents work with any theme?**

Yes. The floating button is added by the block itself, so it does not depend on a theme sidebar or widget area.

**Can I hide the sticky table of contents on mobile?**

Yes. Turn on Hide On Mobile in the Sticky panel. The regular table of contents still shows in the post.

**Can I place the sticky button on the left side?**

Yes. Set Position (%) to a value below 50 to place it on the left, or above 50 for the right.

**Can I change the sticky button icon?**

Yes. With a bulleted list, pick an icon in Current icon. You can change its color with Sticky Button Icon Color in the Styles tab.

## Related docs

- [Table of Contents block](https://ultimateblocks.com/docs/table-of-contents-block/)
- [How to add FAQ schema in WordPress (free)](https://ultimateblocks.com/docs/how-to-add-faq-schema-in-wordpress/)
- [How to add icons, images and links to tabs (Pro)](https://ultimateblocks.com/docs/how-to-add-icons-images-and-links-to-tabs/)
- [Ultimate Blocks free vs Pro](https://ultimateblocks.com/docs/ultimate-blocks-free-vs-pro/)