How to set up and style the Table of Contents widget in Elementor.
Table of Contents reads the headings on the page and turns them into a clickable list. It can highlight the section being read, stay in view in its column, or sit behind a floating button. Use it on long posts, guides and documentation pages.
Part of: Bright Addons Pro.
| Option | What it does |
|---|---|
| Title | The heading shown above the list. |
| List Style | Numbers, bullets, an icon, a line on the left, or no marker. |
| Nested List | Indents sub headings under their section. Off shows one flat list. |
| Shorten Long Headings (words) | Cuts headings to this many words and adds three dots. 0 keeps the full heading. |
| Open / Close Button | Adds a button that shows or hides the list. |
| Start Closed | Starts the list closed never, on phones, on tablets and phones, or always. |
| Option | What it does |
|---|---|
| Include | The heading levels (H1 to H6) that go into the list. |
| Look Inside (CSS selector) | Limits the search to one area of the page. Empty uses the main content. |
| Skip Headings Inside (CSS selector) | Leaves out headings inside the areas you list here. |
| Option | What it does |
|---|---|
| Position | Where Placed, Sticky in its column, or a Floating Button that opens a panel. |
| Show Button After Scrolling (px) | The floating button appears after the visitor scrolls this far. |
| Scroll Offset (px) | Space left above a heading after a click, for example the height of a sticky header. |
| Highlight the Current Section | Marks the list item of the section being read. |
| Show Sub Headings Only for the Current Section | Keeps sub headings folded until their section is the current one. |
| Add the Section to the Page Address | Updates the address with the current section so it can be copied as a link. |
One license gives you every Pro widget, all 10 extensions, the Theme Builder and priority support. From $18 a year, with a 14-day money-back guarantee.
These sections are in the Style tab.
background, border, shadow, radius and padding of the box, the list max height, the floating panel width and an accent color.
typography and color of the title, the header background and padding, the line under the title, and the open and close button size, colors and radius.
typography for items and sub items, spacing, indent, one line per item, colors for normal, hover and current items, and marker and side line colors.
typography, icon size, colors, background, border, radius, shadow and padding of the floating button.
No. The widget gives every heading without an ID one made from its text, and keeps IDs that already exist.
Check the levels under Include and the two selector fields in the Headings section. Headings that are hidden when the page loads, or that sit in the header, footer or a popup, are skipped.
Raise Scroll Offset (px) in the Behaviour section to the height of your sticky header. The default is 80.
Check the troubleshooting guide, or contact support with the page address and what you expected to happen.
Troubleshooting guide