Table Of Contents

The element “Table of Contents” is perfect for any website with a lot of content, such as blogs, articles, or product pages. With its customizable settings, you can predefine which headlines should be included in the table of contents, allowing you to create a comprehensive and well-organized navigation system for your website.

Table of Contents

This element is a Nestable Element. This allows you to add any element structure you want to display above the table of contents. This means that everything inside the parent will be added above the table of contents structure, giving you the flexibility to add a title, description, or any other element you’d like to include.

Element Settings

General

  • Background - Choose a background color for the element.
  • Width - Choose a width for the element.
  • Box Padding - Choose a padding for the box. This is the space between the box and the content inside.
  • Border - Choose a border for the box.

Content

  • Content Typography: The Typography Settings for the content.
  • Content Padding: The Padding for the content.
  • Content Margin: The Margin for the content.
  • Reset List Padding: Reset the padding for the list. This will remove the default padding.
  • Disable List Style: Disable the list style. This will remove the default list style.
  • List Type: Choose between: Ordered List, Unordered List and None

Logic

  • Limit Detection To Container: Limit the detection of the headlines to the container. This will only detect headlines inside the container. All others will be ignored.
  • From Heading: Choose the starting heading. This will be the first heading in the table of contents.
  • Depth: Choose the depth of the table of contents. Example: If From Heading is set to H2 and Depth is set to 2, the table of contents will only include H2 and H3 headlines.
  • Empty Text: Choose the text that will be displayed if no headlines are found.
  • Hide if empty: If checked, the Table of contents box will not be displayed if no headlines are found.

Note: You can exclude certain headings by adding the attribute brf-toc-exclude to the heading.