Free Elementor Table of Contents Widget
Elementor’s own Table of Contents widget comes with Elementor Pro. The Table of Contents widget in Master Addons is free. Drop it on a post or page and it reads the headings there, then builds a linked list from them in heading order. A click on any item scrolls the reader to that section. You pick which heading tags to include and whether the list shows bullets or numbers. You can let readers fold the box away and add a back to top arrow, and the title, separator and links each have their own style controls.
How to Add a Table of Contents in Elementor
You need Elementor and the free Master Addons plugin, nothing else. The page also needs real heading tags (H2, H3 and so on), because the list is built from them.
- Install and activate Master Addons from WordPress.org, and check that Table of Contents is enabled in the Master Addons dashboard.
- Open your post or page with Elementor and search the widgets panel for Table of Contents.
- Drag it where the list should sit, usually above the first section or into a sidebar column.
- In Content, set the title, pick a List Style and choose the Heading Tags to include.
- Open Collapsible and Scroll to add the toggle, the back to top arrow and a scroll offset for your header.
- Style the title, separator and links in the Style tab, then preview the page and click a few items to test the jumps.
Every setting is covered in the Table of Contents widget settings guide.
Builds the List from Your Headings
Choose the levels in Heading Tags. H2, H3 and H4 are selected by default, and any of H1 to H6 can be added. When the page loads, the widget finds those headings, gives each one an ID if it has none, and nests the list by heading level. Rename or add a heading and the list picks it up on the next load, so there are no anchor links to keep up by hand.
- List Style: Default (no marker), Bullets or Numbers.
- Skip one heading: add the CSS class
jltma-toc-hide-headingin that heading’s Advanced tab. - Show Separator: an optional line under the title with its own style, color, thickness and spacing.
- Heading IDs are made from the heading text, so you can also link straight to a section from elsewhere.
Collapsible Box for Sidebars and Mobile
Turn on Make Content Collapsible and a toggle icon appears next to the title. Readers click it to open or close the list, and it slides rather than jumping. Switch on Keep Collapsed Initially if you want the box to load showing only its title, which helps on long legal pages and in narrow sidebar columns.
- Icon Size and Icon Color controls for the toggle.
- The separator folds away with the list.
- The widget has no sticky setting of its own. To keep the box in view while people read, make its column sticky with your theme or with Elementor Pro Motion Effects.
Smooth Jumps and a Back to Top Arrow
Clicking an item scrolls the page down to its heading. Scroll Animation Delay (ms) sets how long that scroll takes, 500 by default and up to 2000. With Smooth Scroll on you also get Smooth Scroll Offset (px), which stops short of the heading so a fixed header doesn’t cover it. You can set a different offset for desktop, tablet and mobile.
- Scroll to Top adds a small arrow in the bottom right corner that shows once a visitor scrolls down.
- The arrow takes readers back to the table of contents, or to the position you set in Scroll to Top Offset.
- Size, Icon Color and Background Color controls for the arrow.
- The item a reader clicked keeps the Active color from the Content style section, so they can see where they jumped.
Elementor Pro Table of Contents vs Master Addons Table of Contents
Elementor’s Table of Contents widget needs an Elementor Pro license, and it gives you more control over which headings appear and how the list behaves while scrolling. Master Addons handles the everyday job for free and adds a back to top arrow.
| Feature | Elementor Pro | Master Addons |
|---|---|---|
| Price | Needs Elementor Pro | Free with Master Addons |
| Which headings | Anchors By Tags (H1 to H6) plus a Container selector to limit the search area | Heading Tags (H1 to H6) from the main post or page content |
| Leaving headings out | Anchors By Selector, any CSS selector | CSS class jltma-toc-hide-heading on each heading |
| Markers | Numbers, or Bullets with an icon you choose | Default, Bullets or Numbers |
| Nesting | Hierarchical View toggle and Collapse Subitems | Always nested by heading level |
| Collapse | Minimize Box with expand and collapse icons, and a breakpoint where it starts minimized | Make Content Collapsible and Keep Collapsed Initially |
| Active item | Follows the section in view as the reader scrolls | Marks the item the reader clicked |
| Scroll settings | No speed or offset controls in the widget | Scroll Animation Delay and a per device Smooth Scroll Offset |
| Back to top arrow | None | Scroll to Top with size and color controls |
If you already pay for Elementor Pro and want the list to track the reader as they scroll, use its widget. If you want a free table of contents with a collapsible box and a back to top arrow, use this one. Related: Reading Progress Bar, Advanced Accordion and Off-Canvas Content (Pro).
Frequently Asked Questions For Table of Contents
Is the Table of Contents widget free?
Yes. It is part of the free Master Addons plugin on WordPress.org, and every setting described on this page is in the free version. Elementor’s own Table of Contents widget needs Elementor Pro.
How do I exclude a heading from the table of contents?
To drop a whole level, remove that tag from Heading Tags, for example H4. To hide one heading, select it in Elementor, open the Advanced tab and add jltma-toc-hide-heading to the CSS Classes field. It stays on the page but is left out of the list.
Does the active item change as the reader scrolls?
No. The Active color in Style, Content styles the item a reader clicks, and it moves when they click another item. The list doesn’t track the section on screen while scrolling. Elementor Pro’s Table of Contents widget does that.
Will the Scroll to Top arrow appear on every page?
Only on pages that contain this widget with Scroll to Top turned on. The arrow sits in the bottom right corner and shows after the visitor has scrolled about 250px down the page.
Can I use custom icons for the list markers?
Not from the widget panel. List Style offers Default, Bullets and Numbers, and the Content style section sets the font and colors. Custom marker icons would need your own CSS. Elementor Pro’s widget has an icon picker for bullets.
Trending Elementor Widgets & Extensions
Build sophisticated websites in less time.
Glassmorphism
Container Extras
Patterns
![Master Addons Post/Page Duplicator extension for Elementor: MA Duplicator row link in the WordPress Pages list creating a Landing Page - [Duplicated #128] draft](https://d1asvmc6qcowgk.cloudfront.net/wp-content/uploads/2026/09/15102930/post-page-duplicator-768x403.webp)
Post/Page Duplicator
