Table of Contents
Give your readers a clear roadmap through your long-form content with this dynamic Table of Contents element. It automatically scans your page for headings and builds a clickable index, making it super easy for visitors to jump to the section they need. You can choose stylish list icons, make the whole thing collapsible to save space, and even add a handy “scroll to top” button. With full control over colors, spacing, and typography for every part, you can design a TOC that looks like it was custom-coded for your site, all while improving user experience and time-on-page.
Smart, Automated Heading Collection
The element intelligently detects the heading structure (H1, H2, H3, etc.) on your page and generates the table of contents automatically, saving you from manually creating and updating links.
- Instantly create an accurate contents list for articles, documentation, or landing pages.
- Saves significant time compared to building a manual list of anchor links.
- Ensures the TOC always matches your page’s current structure if you edit headings later.
Interactive & Space-Saving Design
Make your table of contents collapsible so users can expand or hide it with a click. You can set it to start collapsed to keep the page layout clean and control the toggle icon’s size and color.
- Improve page aesthetics by hiding the TOC until a user wants to use it.
- Perfect for mobile screens where space is limited.
- Provides a modern, interactive feel that enhances user engagement.
Enhanced Navigation with Scroll Tools
Includes a dedicated “Scroll to Top” button that appears as users scroll down. You can customize its position, size, colors, and enable smooth scrolling with a customizable animation delay for a polished experience.
- Greatly improves navigation on long pages, saving users from manual scrolling.
- The smooth scroll effect adds a professional, seamless feel to page jumps.
- Allows fine-tuning of the scroll offset to account for fixed headers or other layout elements.
Frequently Asked Questions For Table of Contents
Can I exclude specific headings from the table of contents?
Yes. You can exclude headings globally by tag type (like all H4s) in the settings. To exclude a single specific heading, you add a custom CSS class to that particular heading element’s Advanced tab in Elementor.
Does it work with all heading tags (H1, H2, H3, etc.)?
Yes. The element is designed to recognize the standard hierarchy of HTML heading tags from H1 through H6. You can typically choose which levels to include in the content settings.
How do I style the currently active section in the list?
There are dedicated color controls for the “Active Title” and “Active Border.” These allow you to change the appearance of the TOC item that corresponds to the section the user is currently viewing on the page.
Will the "Scroll to Top" button appear on every page?
The button is part of this specific element instance. It will only appear on the pages where you place and configure this Table of Contents widget. It is not a global site-wide button unless you add the widget to a site-wide template.
Can I use custom icons for the list style?
The screenshots show predefined list style options (like numbers and icons). While you can choose from available styles and color them, creating completely custom icons would likely require additional CSS unless the plugin offers a direct icon library picker.
Trending Elementor Widgets & Extensions
Build sophisticated websites in less time.
Glassmorphism
Container Extras
Patterns
Post/Page Duplicator
