Table of Contents Widget

Share This Post

🎯 Purpose

Automatically generates a clickable list of internal links based on the headings within your page or post. It enhances navigation, readability, and user experience—especially useful for long-form content.


➕ How to Add & Configure

  1. Insert Widget
    Drag and drop the Table of Contents widget into your desired position in the layout.

  2. Default Setup
    The widget scans for headings (H1–H6) and auto-generates a structured list of internal anchor links.

  3. Customize Title
    Set a custom heading above the list and choose the HTML tag (H2–H6 or div).

  4. Select Which Headings to Include

    • Tags: Choose which heading levels (e.g., H2 and H3) to include.

    • Container: Limit the scan to a specific section or container, if needed.

  5. Exclude Specific Elements
    Use CSS selectors to omit headings or areas you don’t want included (e.g., by adding a specific class).


📐 Display Options

  • Marker Style: Choose numbered or bulleted list styles; if using bullets, select an icon.

  • Word Wrap: Wrap long text within TOC items for clarity.

  • Minimize/Expand Box: Allow the TOC box to be collapsed, with configurable expand/collapse icons.

  • Responsive Minimize: Choose devices (desktop/tablet/mobile) where the TOC starts collapsed.

  • Hierarchical View: Indent items based on heading levels; can optionally collapse sub-items when nested.


🎨 Styling Controls

Box Styles

  • Set background color, border style, width, radius, and shadow.

  • Configure internal padding and minimum height.

Header Styling

  • Align header text (start/center/end), style typography and color, and color for collapse/expand icons.

List Styling

  • Adjust list container max-height and overall text typography.

  • Set indentation for nested items, as well as text color (normal, hover, active).

  • Optionally underline list items on hover.

  • Customize marker (bullet/number) appearance: color and size.


🛠️ Advanced Usage & Tips

  • Ensure a container is selected if you want the TOC to apply only to part of the content (e.g., a blog post within a template).

  • Use CSS selectors or classes on headings to exclude them from the TOC.

  • Enable hierarchical structure and optional collapse when space is limited.

  • For very long content, allow readers to minimize the TOC and expand it as needed.

  • Fit the TOC within responsive layouts—configure minimize settings based on device type.


✅ Best Practices

  • Ideal for long tutorials, guides, or documentation pages to improve navigation.

  • Use specific heading levels to keep the TOC concise and focused.

  • Hide non-content headings (like widget titles) via classes to keep the list clean.

  • Use responsive behavior to customize the presence and display on different screen sizes.

  • Style marker and indent settings to visually match your site’s design.


The Table of Contents widget helps streamline navigation and create a polished, user-friendly layout—automatically organizing headings into a styled, interactive list.

Subscribe To Our Newsletter

Get updates and learn from the best

More To Explore

Do You Want To Boost Your Business?

drop us a line and keep in touch

Learn how we helped 100 top brands gain success.

Let's have a chat

Have a Question? Ask us anything.

The right website makes everything else easier — sales, trust, growth.