Table Of Contents Element
The Table Of Contents Element builds a linked list of the headings on the current page automatically. Visitors see at a glance what the page covers and jump to a section with one click; nested headings appear as an indented list.
It suits long articles, guides, documentation and product pages. Placed in a sticky column, it can also highlight the section the visitor is currently reading, so it works as a small navigation that follows the page. Numbering, icons and colors are all adjustable.
In this article: How To Use · Element Options · Tips · Related Elements · Example
How To Use The Table Of Contents Element
Add the Table Of Contents Element to a column and choose the Accepted Headings, by default H2, H3 and H4. Limit To Parent decides where headings are collected: the whole page, only the page or layout content, only a Post Content element, or Custom, which shows Limit Heading Selection By CSS Selectors for your own containers.
To leave out single headings, use Ignore Headings By CSS Selector (by default any heading with the class twb-exclude-from-toc, or inside a parent with that class) or Ignore Headings By Words, where several words or phrases are separated by |. Hide Hidden Titles skips headings that are not visible when the page loads, for example inside closed tabs.
On the Design tab choose a Counter Type (none by default; bullets, numbers, letters, roman numerals, the numerals of many writing systems or a custom icon), a Counter Separator, the List Indent between levels and the item colors. When Highlight Current Heading is on, the highlight colors appear and the item of the section in view is marked while the visitor scrolls.
Element Options
The tables below list every option of the element, grouped by the tabs you see when you edit it in the Builder. Many options depend on others, so the edit screen only shows the options that apply to your current choices.
General
| Heading | Description |
|---|---|
| Accepted Headings | Select which HTML headings tags should be indexed. |
| Limit To Parent | Controls which headings to show, depending on the parent. |
| Limit Heading Selection By CSS Selectors | Choose to imit the indexing to certain containers. You can limit indexing to all headings within a container using “.container *”. To choose multiple containers, use comma separation: “.container1 *, .container2 *”. A list of all selectors is found here . |
| Ignore Headings By CSS Selector | Ignore headings that match the following CSS selector(s). Classes should have “.” before. Separate multiple headings by comma. Defaults to “.twb-exclude-from-toc, .twb-exclude-from-toc *”, which will ignore any title with “twb-exclude-from-toc” class, or any title inside a parent with same class. A list of all selectors is found here . |
| Ignore Headings By Words | Ignore headings that contains a specific word or a group of words. Separate multiple settings by “|”, For example “sofa|soft chair” will ignore all headings that contains “sofa”, but also the headings that contains “soft chair”. These matches are case insensitive. |
| Hide Hidden Titles | Select whether or not to hide titles that are not visible when page loads. |
| Highlight Current Heading | Select whether to highlight the current heading which is viewed. Usually used while the element is positioned sticky in a column or container. |
| Cache Content (For SEO) | If the cache is used, the TOC content will be indexable by search engines, because the post/page will be served with the TOC element content already in place, rather than it being generated after page load. The TOC cache will be auto-updated after page load if the post/page content has been changed. |
| Element Visibility | Choose to show or hide the element on small, medium or large screens. You can choose more than one at a time. |
| CSS Class | Add a class to the wrapping HTML element. |
| CSS ID | Add an ID to the wrapping HTML element. |
Design
| Heading | Description |
|---|---|
| Margin | In pixels or percentage, for example 10px or 10%. |
| Padding | In pixels or percentage, for example 10px or 10%. |
| Item Typography | Controls the item text typography. |
| Counter Type | Controls the type of the counter. |
| Select Icon | Click an icon to select, click again to deselect. |
| Counter Separator | Select the separator between the counters. |
| Custom Counter Separator | Choose the custom separator between the counters. |
| List Indent | Select the list padding(distance) between different hierarchy items. for example “10px”. |
| Text On Single Line | Prevent item text from exceeding one line. If it exceeds, then “…” will show up instead. Very useful if the element is placed in a sidebar-like container. |
| Item Styling | Select the colors for the items. |
| Item Color | Select the item color. Defaults to link color. |
| Counter Color | Select the color for the counter. Leave empty to inherit from item color. |
| Hover Item Color | Select the item color on hover. Defaults to primary color. |
| Hover Item Background Color | Select the item background color on hover. Defaults to transparent. |
| Hover Counter Color | Select the color for the counter. Leave empty to inherit from item color. |
| Highlight Item Styling | Select the colors for the highlighted items. |
| Highlighted Item Color | Select the color for the highlighted item. |
| Highlighted Item Background Color | Select the background color for the highlighted item. |
| Highlighted Item Counter Color | Select the color for the highlighted counter. Leave empty to inherit from item color. |
| Highlighted Hover Item Color | Select the color for the highlighted item when the mouse is over. |
| Highlighted Hover Item Background Color | Select the background color for the highlighted item when the mouse is over. |
| Highlighted Hover Item Counter Color | Select the color for the highlighted counter when the mouse is over. Leave empty to inherit from item color. |
| Item Padding | In pixels or percentage, for example 10px or 10%. Defaults to 0 10px 0 10px. |
| Item Border Radius | In pixels or percentage, for example 10px or 10%. |
| Item Margin | In pixels or percentage, for example 10px or 10%. Defaults to 2px 2px. |
Extras
| Heading | Description |
|---|---|
| Conditional Rendering | Add conditional rendering logic for the element. The element will only be part of the post / page contents, if the set conditions are met. NOTE: Server cache can interfere with results. |
| Animation Type | Select the type of animation to use on the element. |
| Direction of Animation | Select the incoming direction for the animation. |
| Animation Color | Select the color of the animation. |
| Speed of Animation | Type in speed of animation in seconds (0.1 – 5). |
| Animation Delay | Select the delay time after the animation starts(0 – 5). |
| Offset of Animation | Controls when the animation should start. |
Tips
- Leave Cache Content (For SEO) on. The list is then part of the page when it is delivered, so search engines can read it; it updates itself after the page content changes.
- Use a clean heading order on the page (H2 for sections, H3 below them). The indentation of the list follows that order.
- Headings added only for design, such as a small label above a title, can be kept out of the list with the class
twb-exclude-from-toc. - For a list that follows the reader, place the element in a sticky column and turn on Highlight Current Heading.
- Text On Single Line cuts long headings with “…” and keeps the list tidy in a narrow sidebar.