help center

Elementor Premium Services

NEW!

Search
Close this search box.
Help / Elementor Editor / Using widgets to create your page / Add advanced functionality / Table of Contents widget

Using widgets to create your page

On this page

Table of Contents widget

Last Update: March 28, 2024

Add the widget

Table of Contents
  1. In Elementor Editor, click +.
    All available widgets are displayed.
  2. Click or drag the widget to the canvas. For more information, see Add elements to a page.

What is the Table of Contents widget?

The Table of Contents widget automatically generates a list of links based on the headings or sections you’ve defined in your content. No need to manually create these links! The widget automatically scans your content for headings (H1, H2, etc.) and arranges them into a clickable list.

Although the process is automatic, you can control what gets included and excluded from the display.

Common use case

Sarah is a food blogger working on a blog post about 10 Healthy Breakfast Ideas. The post is quite lengthy, covering various recipes, ingredients, cooking instructions, and nutritional information.

So, to enhance the navigation experience, Sarah decided to add a Table of Contents at the top of the post to create a navigational aid for the readers. Instead of scrolling through the entire article to find a specific recipe, visitors can glance at the Table of Contents, click on the recipe they’re interested in, and jump directly to that section.

Sarah starts by adding headings to her blog post, such as Oatmeal with Mixed Berries and Avocado Toast. As they add these headings, the widget automatically generates a list of links in the Table of Contents widget.

When visitors land on Sarah’s blog post, they are welcomed with a well-organized Table of Contents at the beginning of the page. They can easily see Sarah’s breakfast ideas and click on any of them to instantly jump to that part of the article.

Not only does this improve the user experience by saving her readers time and effort, but it also encourages them to explore more of Sarah’s blog content.

Table of Contents 21 Table of Contents widget 2

Additional use cases

  • Include a table of contents in long instructional guides or tutorials to help users quickly navigate to specific steps or sections.
  • Display a table of contents widget in course modules to give learners an overview of course content and enable them to navigate to specific lessons.
  • Showcase the table of contents in product catalogs or catalogs for services to allow users to browse through different categories or sections of products or services.

Add a Table of Contents widget: Step-by-step

  1. Add the Table of Contents widget to the canvas. For details, see Add elements to a page.
  2. When you add the widget, it automatically scans the page’s headings and creates a Table of Contents.
    Table of Contents 13
  3. In the Content tab, under the Table of Contents section, in the Title field, type the heading text displayed above the Table of Contents.
    Table of Contents 7
  4. In the HTML Tag field, select the HTML tag to use for the title, from H2 to H6, or div.
    Table of Contents 1
  5. Click the Include button to include headings from the Table of Contents.
    1. Anchors By Tags: Select the page’s H1-H6 tags to be automatically included. For example, if you select H2 and H3, only the headings of these levels will be included in your TOC.
      Table of Contents 14
    2. Container: Limits the Table of Contents to headings within a specific container. This is particularly useful when you want to limit the TOC to headings within a certain section of your page.
      Example
      Set the HTML tag of the Container that your content resides in to “Main”. Then, in your Table of Contents widget, use “main” in the Container field.

      Tip
      If you create a Single Post or Page template, this will be the Container that your Post Content widget resides in. All new posts/pages will use the TOC for headings in WordPress or Elementor content. This is the best use for the feature as it will not display unrelated headings from other parts of the template.

      Table of Contents 5
  6. Click the Exclude button to exclude specific headings from the Table of Contents.
    1. In the Anchors By Selector box, enter CSS selectors to be excluded, such as widgets or container names.
      Example
      Let’s say you have a widget or container that you don’t want to appear in the Table of Contents. You can assign it a CSS class name (e.g., “.ignore”) and then enter that class name in the Anchors By Selector field. This ensures that any content with that class name will be excluded from the TOC.

      Note
      Remember to refresh the editor or preview your changes in a new tab to see the updates reflected. This ensures that any changes you make to the inclusion or exclusion settings take effect properly.

      Table of Contents 12
      Tip
      If you’re using the Table of Contents widget in your Single Post or Page template and you want to hide a specific WordPress heading or block from appearing in the Table of Contents, you can do so using the “exclude CSS Class” feature in the Block’s Advanced settings.

  7. From the Marker View field, choose to display numbers or bullets next to list items.
    Table of Contents 8
    1. If using Bullets, select an Icon from the Icon Library.
      Table of Contents 19
  8. Under Additional Options, slide the Word Wrap button Yes to wrap text when column width cannot accommodate long text on one line.
    Table of Contents 6
  9. Slide the Minimize Box to No to display the Table of Contents fully expanded. When set to Yes, users can toggle between minimizing and expanding the TOC according to their preference.
    Table of Contents 20
  10. Use the Expand Icon option to select an icon to indicate when the widget is minimized and can be expanded. You can choose an icon from the Icon Library or upload an SVG. For more details, see Enable SVG Support in Elementor.
    Table of Contents 3
  11. Use the Collapse Icon option to select an icon to indicate when the widget is expanded and can be minimized. You can choose an icon from the Icon Library or upload an SVG. For more details, see Enable SVG Support in Elementor.
    Table of Contents 16
  12. Use the options in the Minimized On field to select when the widget should be minimized (Desktop, Mobile, Tablet, or None).
  13. Slide the Hierarchical View button to Yes to display list items with indention based on Tag hierarchy.
    Table of Contents 9
  14. If Hierarchical View is enabled, slide the Collapse Subitems Items button to Yes to collapse nested lists and only show top-level items.
    Table of Contents 17
    Note
    The Collapse option should only be used if the Table of Contents is made sticky.

Settings for the Table of Contents Widget

You can customize your widgets using content, style, and other advanced parameters, offering you great flexibility in tailoring them to your needs. Click the tabs below to see all the settings available for this widget.

Content tab

Table of Contents 2

Type the heading text shown above the Table of Contents.

Select the HTML tag to use for the title, from H2 to H6, or div.

Click this button to include headings from the Table of Contents.

  • Anchors By Tags: This option lets you automatically include specific headings (H1-H6 tags) from your page in the Table of Contents (TOC). For example, if you select H2 and H3, only the headings of these levels will be included in your TOC.
  • Container: The container option confines the Table of Contents to heading elements under a specific container. This is particularly useful when you want to limit the TOC to headings within a certain section of your page. For instance, if you set the container to “Main,” the TOC will only include headings within the HTML wrapper labeled “Main.”

Click this button to exclude specific headings from the Table of Contents.

Anchors By Selector: This option allows you to specify CSS selectors to exclude certain elements from the Table of Contents. For instance, if you want to hide the contents of a specific widget or container from the TOC, you can enter its CSS class name here.

Choose to display numbers or bullets next to list items.

If set to Bullets, click the Icon Library to choose an icon or click None to not use any icon.

Table of Contents 10

Slide to Yes to wrap text when column width cannot accommodate long text on one line.

Slide to No to display the Table of Contents fully expanded or Yes to force a click to expand a minimized Table of Contents box.

Choose an icon to indicate when the widget is minimized and can be expanded. You can choose an icon from the Icon Library or upload an SVG. For more details, see Enable SVG Support in Elementor.

Choose an icon to indicate when the widget is expanded and can be minimized. You can choose an icon from the Icon Library or upload an SVG. For more details, see Enable SVG Support in Elementor.

Select to minimize on Desktop, Mobile, Tablet, or None.

Slide to Yes to display list items with indention based on Tag hierarchy.

This option is only available if Hierarchical View is set to Yes.

Slide to Yes to collapse nested lists and only show top level items

Note: The Collapse option should only be used if the Table of Contents is made sticky.

Style tab

Table of Contents 15

Choose a background color for the entire Table of Contents box.

Choose a color for the box’s border.

Choose a color for the loader spinner.

Use a slide to set the width of the box’s border.

Use a slider to set the border radius to control corner roundness. For details, see Border radius.

Use a slider to set the thickness of the header’s bottom border.

Use a slider to set the padding within the border of each slide. For details, see Padding and margins.

Set the minimum height of the widget.

Set the box shadow options.

Table of Contents 18

Set alignment of the header text: Start, Center, or End.

Choose a background color for the header.

Choose a color for the header text.

Change the typography options for the header text. Learn more about Typography.

Choose the color of the Expand and Minimize icon.

Set icon position.

Use a slider to adjust the gap between icon and header text.

Table of Contents 11 Table of Contents widget 22

Use a slider to adjust the height of the anchors’ box.

Change the typography options for the anchor text. Learn more about Typography.

Use a slider to set the amount of indentation for the anchors.

Color: Choose the anchor text color for Normal, Hover and Active states.

In the Hover state, you can set Transition Duration. This is the length of time it takes for the label to change its appearance.

Select Yes to underline the anchor text.

  • Color: Choose a color for the marker
  • Size: Change the size of the marker if you wish it to be a different size than the text.

Advanced tab

The Advanced tab provides options to control widget position, adjust spacing, add custom code, and more.

Table of Contents 4

Learn more about the Advanced tab settings.

Have more questions? We’re more than happy to assist.

Contact Support
Link is copied to clipboard!
On this page

Is this article helpful?

Share this article

Related Content

Use Variable Fonts

Search widget

Basic Media Carousel widget

What is a dynamic request parameter?

Add dynamic shortcodes

Stuck?
Our Elementor Expert is Ready

Unlock Your Session Now

Book a 45-min video consultation call with an Elementor expert and elevate your site!