How to use Table Of Contents Widget of Sky Addons for Elementor

The Table Of Contents widget for Elementor by Sky Addons automatically scans your page headings and builds a clickable, auto-highlighting navigation — ideal for long articles, documentation, and tutorials. Choose between Minimal, Accordion, and Timeline styles, fine-tune smooth scrolling and active-link detection, make the TOC sticky per device, and exclude any headings you don’t want listed. As visitors scroll, the current section is highlighted and nested items can expand automatically. This documentation will guide you through the process of using the Table Of Contents widget to improve navigation and time-on-page across your website.

Features:

1. Automatic Heading Detection: Builds the TOC from your page’s H2–H4 headings (configurable to any tags).
2. Three Styles: Minimal (left-bar), Accordion (collapsible with chevrons), and Timeline (track with dots).
3. Active Link Highlighting: The current section stays highlighted as the reader scrolls.
4. Smooth Scroll: Animated scrolling with adjustable duration and offset for fixed headers.
5. Sticky Mode: Pin the TOC on desktop, tablet, and/or mobile with a custom top offset and z-index.
6. Fine Control: Ignore selectors, collapse depth, URL hash updates, ordered lists, markers, and more.

Insert Table Of Contents Widget

1. Open Elementor Editor. In the Elementor panel, search for “Table Of Contents” under Sky Addons.
2. Drag and Drop the Widget to the desired location on your page / editor — typically a sidebar column next to your article.

Configure Content

1. Style: Choose Minimal, Accordion, or Timeline as the layout.
2. Container Selector: The CSS class or ID of the area to scan for headings (default .elementor). Example: .elementor, #post.
3. Heading Tags: Select which heading levels to include — H2, H3, and H4 by default.
4. Ignore Selector: Headings matching this CSS selector are skipped (e.g. .js-toc-ignore).

Configure Behavior

1. Ordered List: Output numbered list markup instead of bullets.
2. Collapse Depth: How many heading levels stay expanded on scroll. 0 = all collapsed, 6 = everything visible, 1 = accordion-style auto-open.
3. Expand On Hover: Auto-expand parent items when the visitor hovers them.
4. Has Inner Containers: Keep enabled when headings live inside positioned containers — required for Elementor Flexbox Containers.
5. Include HTML: Carry the heading’s HTML markup into the TOC link instead of plain text.
6. Include Title Tags: Add a title attribute to each link matching the heading text.
7. Ignore Hidden Elements: Skip headings that are hidden in the DOM.

Configure Scroll

1. Smooth Scroll: Animate scrolling to the clicked heading, with a Duration (ms) setting (default 420).
2. Scroll Offset (px): Adjust the final scroll position — use negative values (e.g. −80) to compensate for fixed headers.
3. Headings Offset (px): The viewport-top offset used for active-link detection (default 100). Increase it if the active link switches too early; match it to your sticky header height.
4. Update URL Hash: Update the browser URL hash as the reader scrolls past each heading.
5. Scroll Handler: Auto, Debounce, or Throttle — tune how scroll events are processed.

Fixed Header Options

1. Fixed Element Selector: CSS selector for the element that receives the fixed-position class on scroll (e.g. .site-header).
2. Fixed Sidebar Offset: A pixel value or “auto” (uses the sidebar’s position on load).

Additional & Sticky Options

1. Show Marker: Add list markers next to TOC items with a Marker Style choice — disc, circle, square, decimal, alpha, or roman numerals.
2. Sticky on Desktop / Tablet / Mobile: Pin the TOC per device while scrolling.
3. Top Offset: Distance from the top of the viewport when stuck (px, em, or vh).
4. Z-Index: Control stacking so the TOC sits above or below other fixed elements.

Note: for sticky to work, the parent column or container must not have overflow set to hidden or auto. The TOC sticks within its parent’s height.

Style Your Table Of Contents

Customize the TOC to match your design aesthetics effortlessly. Each part has its own Style section:

1. Container:
   Background, padding, border, border radius, and box shadow of the TOC box.
2. Links:
   Typography, text shadow, padding, row gap, nested indent, and border — with separate Normal, Hover, and Active colors, backgrounds, and box shadows.
3. Minimal:
   Style the signature left bar — color and width in Normal, Hover, and Active states.
4. Accordion:
   Link alignment and gap, the nav container background/border/radius/shadow, nested row background, and chevron colors.
5. Timeline:
   The track background, dot background and border colors, and the active dot color.
6. Marker:
   Marker size, spacing, and color (when Show Marker is enabled).

Save and Preview

1. Once you’ve customized and styled your table of contents, click “Publish” or “Update” to save your changes.
2. Preview the page to ensure the widget looks and functions as desired — the TOC is built on the live page, so always verify on the frontend.

Best Practices

1. Consistency: Use a logical heading hierarchy (H2 → H3 → H4) in your content so the TOC nests cleanly.
2. Accessibility: Keep clear contrast between normal, hover, and active link states.
3. Match your header: Set Scroll Offset and Headings Offset to your fixed header height so clicks land precisely and highlighting feels accurate.
4. Testing: Verify sticky behavior and collapse depth on every breakpoint you enable.

Troubleshooting

1. TOC is empty: The Container Selector doesn’t match your content area, or the selected Heading Tags don’t exist inside it. Confirm the selector (e.g. .elementor) and your heading levels.
2. Sticky not sticking: A parent column/container has overflow hidden or auto — remove it. Also remember the TOC only sticks within its parent’s height.
3. Click lands under the fixed header: Set a negative Scroll Offset (e.g. −80) matching your header height.

Frequently Asked Questions

How do I add a table of contents to an Elementor page automatically?

Drop the Table Of Contents widget by Sky Addons anywhere on the page. It scans the container you specify (default .elementor) for H2–H4 headings and builds the linked list automatically — no manual anchors needed.

How do I exclude a specific heading from the table of contents?

Give that heading a class (for example js-toc-ignore) and enter the same selector in the Ignore Selector field. Any heading matching the selector is skipped.

Why does my TOC link scroll behind my sticky header?

Set Scroll Offset (px) to a negative value equal to your header height — for example −80 for an 80px header. Also set Headings Offset to a similar value so the active highlight switches at the right moment.

Can the table of contents stay visible while scrolling?

Yes. Enable Sticky on Desktop (and optionally Tablet/Mobile) in the Sticky section, then set the Top Offset and Z-Index. Make sure no parent container uses overflow hidden, or the sticky position won’t engage.

Does it work with Elementor Flexbox Containers?

Yes — keep the Has Inner Containers option enabled (it is on by default). It’s required when headings sit inside relative or absolute positioned containers, which includes Flexbox Containers.

Related Documentation

• Advanced Accordion Widget
• Smooth Scroll Extension
• Breadcrumbs Widget
• Step Flow Widget

Conclusion

The Table Of Contents Widget by Sky Addons for Elementor turns long content into an easy-to-navigate experience, with smart highlighting and three distinct styles. For further assistance, consult the Sky Addons support team or community forums. Enjoy guiding your readers!