---
title: "How to Add a Table of Contents in Elementor?"
url: https://theplusaddons.com/docs/add-a-table-of-contents-in-elementor/
date: 2025-01-11
modified: 2026-04-09
author: "Aditya Sharma"
description: "Do you want to add a table of contents in Elementor? Adding a table of contents allows readers to easily navigate through your content, find the information they need, and..."
word_count: 872
---

# How to Add a Table of Contents in Elementor?

## Key Takeaways

- Table Of Content widget from The Plus Addons for Elementor allows users to add a customizable table of contents in Elementor.
- The Plus Addons for Elementor requires the PRO version to access the Table Of Content widget.
- Users can choose between ordered and unordered list types when setting up the table of contents.
- The Table Of Content widget includes features like collapsible child items and smooth scroll for navigation.

Do you want to add a table of contents in Elementor? Adding a table of contents allows readers to easily navigate through your content, find the information they need, and improve the overall user experience.

With the Table Of Content widget from The Plus Addons for Elementor, you can add a highly customizable table of contents in Elementor.

[LIVE WIDGET LINK](https://theplusaddons.com/elementor-widget/elementor-table-of-contents/)

## Required Setup

- [Elementor FREE Plugin](https://wordpress.org/plugins/elementor/) installed & activated.

- You need to have [The Plus Addons for Elementor plugin](https://wordpress.org/plugins/the-plus-addons-for-elementor-page-builder/) installed and activated.

- This is a Premium widget, and you need the [PRO version of The Plus Addons for Elementor.](https://theplusaddons.com/pricing//?utm_source=tpae&utm_medium=docs&utm_campaign=text)

- Make sure the Table Of Content widget is activated, to verify this visit The Plus Addons → Widgets → and Search for Table Of Content and activate.

## Learn via Video Tutorial

https://www.youtube.com/watch?v=NWhr5lOm_3Y

## How to Activate the Table Of Content Widget?

Go to 

- **The Plus Addons **→** Widgets **

- **Search **the widget name and** turn on the toggle.**

![](https://theplusaddons.com/wp-content/uploads/2025/01/table-of-content-activate-new-1024x369.png)

## Key Features

- **Multiple Styles** - You can choose from multiple pre-defined styles.

- **List Type** - You can easily select between ordered and unordered list types.

- **Select Tag** - You can manually include or exclude tags from the table of contents.

- **Child Collapsed** - You can easily show or collapse the child items in the table of contents.

- **Collapsible** - You can easily [make the table of contents collapsible.](https://theplusaddons.com/docs//create-a-collapsible-table-of-contents-in-elementor/)

- **Smooth Scroll** - You can [add a smooth scroll to the table of contents for smooth navigation.](https://theplusaddons.com/docs//add-smooth-scrolling-effect-to-elementor-table-of-contents/)

- **Fixed** - You can easily [make the table of contents sticky.](https://theplusaddons.com/docs//make-a-sticky-table-of-contents-in-elementor/)

- **Hash Tag** - You can [enable hashtags to easily link to a specific section.](https://theplusaddons.com/docs//copy-a-title-url-from-the-elementor-table-of-contents/)

- **Restrict Container Area** - You can easily [restrict the table of contents to a specific area.](https://theplusaddons.com/docs//restrict-a-content-area-in-an-elementor-table-of-contents/)

- **Exclude Title** - You can easily [exclude a title from the table of contents.](https://theplusaddons.com/docs/exclude-a-title-from-table-of-contents-in-elementor/)

## How to Add a Table of Contents in Elementor?

Add the Table Of Content widget to the page.

### Layout

From the **Style** section, you can select a style for the table of contents. Here you’ll find 4 pre-defined styles and None for a no style option. 

Select the style as per your requirements, let’s select None here.

Then, from the **List Type** dropdown, you can select the list type. Here you’ll find two options - 

- **UL** - For creating an unordered list, i.e. it will add bullet points in the table of contents.

- **OL** - For creating an ordered list, i.e. it will add numbers in the table of contents.

Select the option as per your requirements.

> *Note: The List Type option is only available for the None style.*

From the **Select Tags** section, you can include the tags (H1 to H6) you want to show in the table of contents.

By enabling the **Child Collapsed** toggle, you can keep the child tag collapsed and show them only when the parent tag is clicked.

> *Note: Any lower heading tag, added after a higher heading tag, is considered as the child tag of the higher heading tag. For example, if a H4 is added below a H3 tag then the H4 title is the child tag of the above H3 title.* 

### Content

By enabling the **Content** toggle, you can add a heading and description to the table of contents. When enabled, you’ll find the following options - 

From the **Title** section, you can add a title to the table of contents.

In the **Description** section, you can add a description to the table of contents.

By enabling the **Icon** toggle, you can add an icon to the table of contents.

### Extra Options

In this tab, you’ll find some extra options to customize the table of contents further.

![](https://theplusaddons.com/wp-content/uploads/2025/01/table-of-content-extra-options.png)

**Toggle** - From here, you can make the table of contents collapsible.

**Smooth Scroll** - From here, you can add a smooth scroll to the table of contents.

**Fixed** - From here, you can make a sticky table of contents.

**Hash Tag** - From here, you can add hashtags to the elements of the table of contents for easy linking to the specific section.

**Heading Active Offset** - From here, you can set the top offset value, i.e. the distance of the section heading from the top where the heading will be activated.

**Restricted Container Area** - From here, you can restrict the content area in the table of contents.

## How to Style the Table Of Content Widget?

To style the Table Of Content widget, you’ll find all the styling options under the Style tab.

**Heading** - From here you can style the table of contents heading.

![](https://theplusaddons.com/wp-content/uploads/2025/01/table-of-content-style.png)

**Content** - From here, you can style the content section of the table of content widget.

**Level 1 Typography** - From here, you can manage the typography and normal and active color of the table of contents top-level headings.

**Sub-Level Typography** - From here, you can manage the typography and normal and active color of the table of contents sublevel headings.

**Hash Tag** - You’ll see this option only when the Hash Tag is enabled from the content tab. From here, you can manage the hashtag and copied text’s typography and color.

**Box** - From here, you can style the table of contents container.

Advanced options remain common for all our widget, you can explore all it options from here.

[View Advanced tab tutorial.](https://docs.posimyth.com/tpae/advanced-tab/)

## Frequently Asked Questions

**Q: What do I need before starting to add a table of contents in Elementor?**
A: You need to have the Elementor FREE Plugin installed and activated, along with The Plus Addons for Elementor plugin. Ensure that the Table Of Content widget is activated by visiting The Plus Addons u2192 Widgets.

**Q: How do I activate the Table Of Content widget?**
A: To activate the Table Of Content widget, go to The Plus Addons u2192 Widgets, search for the widget name, and turn on the toggle. This step is essential to use the widget.

**Q: What happens after I add the Table Of Content widget to my page?**
A: After adding the Table Of Content widget, you can customize it by selecting styles, list types, and tags to include. You can also enable features like collapsible items and smooth scrolling for better navigation.

**Q: Can I make the table of contents collapsible?**
A: Yes, you can make the table of contents collapsible by enabling the toggle in the Extra Options tab. This allows child items to be shown or hidden when the parent tag is clicked.

**Q: How can I exclude a title from the table of contents?**
A: You can exclude a title from the table of contents by using the option provided in the widget settings. This allows you to control which headings appear in the table.

**Q: Is there a way to add smooth scrolling to the table of contents?**
A: Yes, The Plus Addons for Elementor allows you to add smooth scrolling to the table of contents for smooth navigation. This feature enhances the user experience when navigating through sections.