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 plugin.
- Ultimate Blocks Pro, 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 #
- Open the post or page in the WordPress block editor.
- 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.
- Select the block. In the Settings tab of the block sidebar, open the Sticky panel.
- Turn on Sticky.
- 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.
- Optional: switch to the Styles tab and set the Sticky Button Icon Color.
- 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.
