How to Use the Table of Contents Block

The IndieTech Table of Contents block automatically generates a sticky sidebar navigation from the headings in your page content. As readers scroll, it highlights the section they’re currently reading, lets them jump to any section with a click, and on mobile it collapses into a slide-in drawer accessible from a reading bar at the top of the screen.

Adding the Block to a Page

Open any page or post in the WordPress block editor.
Click the + button to insert a new block and search for “IndieTech Table of Contents”.
Insert the block. You’ll see a two-column layout: a sidebar on the left and a content area on the right.
Click inside the content area and add your content there — headings, paragraphs, images, and any other blocks you’d normally use to build your page.

Important: All content that should appear in the table of contents must be placed inside the block’s content area. Headings outside the block are not detected.

How the Table of Contents Is Built

The block scans the headings inside its content area and builds the navigation automatically. You don’t need to manually add or update the menu — it updates as you write.

H2 headings become top-level items in the sidebar.
H3 headings (and deeper, if enabled) become nested items underneath their parent H2.
The sidebar reflects your heading structure in real time while you’re editing.

Block Settings

All settings are available in the Settings panel on the right side of the editor when the block is selected. There are four panels: Settings, Title, Mobile Menu, and Colors.

Settings Panel

Sidebar Position Controls whether the sidebar appears on the left or right side of the content. Default is Left.

Include Headings Determines which heading levels are included in the table of contents. Select a maximum level — the block always starts from H2 and includes every level up to and including the one you choose.

H2 — only top-level headings
H3 — H2 and H3 (default)
H4 — H2, H3, and H4
H5 — H2 through H5
H6 — all heading levels

Tip: For most articles, H3 is the sweet spot. Deeper levels can make the sidebar feel cluttered.

Title Panel

Controls the appearance of the sidebar label that sits above the navigation links.

Label The text displayed as the sidebar title. Default is “On this page”. You can change it to anything that fits your site’s voice — “Jump to section”, “Contents”, etc.

Font Size Choose a preset font size from your theme’s type scale, or enter a custom value. Leave blank to inherit from the surrounding text.

Appearance Set the font weight (Regular, Medium, Semi Bold, Bold) and font style (Normal, Italic) of the title independently.

Margin Top / Margin Bottom Add spacing above and below the title using your theme’s spacing scale. Drag the slider to a named preset (e.g. Small, Medium, Large) — the label above the slider shows the selected preset name. Use these to align the title visually with your content.

Mobile Menu Panel

These settings control how the table of contents appears on mobile devices, where the sidebar is replaced by a slide-in drawer.

Title Label The heading shown inside the mobile drawer when it opens. This is separate from the desktop sidebar label, so you can use something like “Menu” or “Sections” for mobile while keeping “On this page” on desktop. Default is “Menu”.

Colors Panel

Text & Link Color Sets the color of all navigation link text in the sidebar. Leave blank to inherit from your theme.

Accent Color The color used for the left border highlight and the +/− toggle button when an item is active. By default this inherits from the current text color. Use a brand color here to make the active section stand out clearly.

Mobile Drawer Background The background color of the mobile slide-in drawer. Leave blank to use white. Set this to match your theme’s surface color, or use a contrasting color to make the drawer feel distinct.

Tip: A soft off-white or a light tint of your brand color works well here — it signals to the reader that they’ve opened a navigation overlay.

How It Behaves on Desktop

The sidebar stays sticky — it follows the reader as they scroll down the page, always keeping the navigation in view.
The currently visible section is highlighted with a colored left border and bold text on its link.
Sections with nested headings show a + button. Clicking it expands or collapses the sub-items.
Hovering over any heading in the content area reveals a link icon. Clicking it copies a direct URL to that section to your clipboard, useful for sharing or linking to a specific part of a long article.
When a reader clicks a link in the sidebar, the page smooth-scrolls to the target heading and the URL updates to include an anchor (#section-name).

How It Behaves on Mobile

On screens narrower than 800px the sidebar is hidden and replaced by a lighter mobile experience.

Reading Bar Once the reader scrolls past the top of the block, a thin bar appears at the top of the screen. It shows “You’re reading:” and the title of the current section. The bar disappears when the reader scrolls back to the top of the block or past its end.

Opening the Drawer Tapping the reading bar slides in the full table of contents from the left as an overlay panel. All submenus are expanded by default so readers can see the full structure at a glance.

Closing the Drawer Tap the × button in the top-right corner of the drawer, or tap a link to jump to a section — both close the drawer automatically.

Heading IDs and Anchor Links

The block assigns each heading a URL-friendly ID based on its text (e.g. “Getting Started” becomes #getting-started). These IDs are used for:

Clicking a sidebar link scrolls to the matching heading.
The URL bar updates to #heading-id as you read, so the browser back button and shared links land on the right section.
Loading a page with a #hash in the URL automatically scrolls to and highlights that section.

Note: If two headings have identical text, their IDs will collide. Give each heading a unique name to ensure all anchor links work correctly.

Tips and Best Practices

Keep headings descriptive. The sidebar shows heading text verbatim. Short, clear headings like “Installation” or “Frequently Asked Questions” make for a much more useful table of contents than generic ones like “Section 3”.

Use H2 for main topics, H3 for subtopics. This gives the sidebar a clean two-level hierarchy. Going deeper than H4 rarely improves navigation and can make the sidebar harder to scan.

Match the sidebar to your theme. Use the Accent Color to pick up a brand color from your theme, and set the Mobile Drawer Background to match your theme’s card or panel surface color. A table of contents that looks native to the page is less distracting and more trusted by readers.

Don’t nest the block. The IndieTech Table of Contents is designed to wrap full-page content. Placing it inside another container block (like a Group or Columns) can affect its sticky positioning and responsive behavior.

Test on mobile. Resize your browser below 800px (or use a real device) to confirm the reading bar appears at the right scroll position and the drawer opens and closes correctly.