Table of Contents addon documentation


Just drop the block in the area where you want to add a table of content and set the options.


These are the options available for the Table of Contents addon:


The first checkboxes let you to select what to include in the table of contents:

  • Images (<img> tag). The title attribute is used as the entry text in the table of contents.
  • Tables (<table> tag). The caption attribute is used as the entry text in the table of contents.
  • Headers (<h1> to <h6> tag). The header text is used as the entry text in the table of contents. You can use the slider to select which range of headers will be included in the TOC. Usually, in the sake of clarity, is a good idea to keep the number of levels below 4, like in the default settings (3 levels). It's a good practice to have only one <h1> header with the name of the site in a page. You probably donĀ“t want it to be included in four index, that's why we suggest starting at level 2 in the defaults.
  • Figures (<figure> tag). The figurecaption tag is used as the entry text in the table of contents.

Next you can choose the type of list the TOC will be based upon: ordered (numbered) or unordered (with bullets). In case you choose a numbered list you are presented a series of numbering options. At this moment, the options are:

  • Only numbers (default):
  • Mixed numbers and letters:
    • I.1.a.1.1.1
    • A.a.i.1.1.1
    • I.A.a.1.1.1
    • 1.A.i.1.1.1

For ordered list you can also choose whether the numbering is nested or not:

Nested Non-nested:
nested_numbering.png non_nested_numbering.png

The smooth scroll option avoids abrupt changes in the page scrolling position (which would be the default browser behaviour for internal links) and applies an animation to the scrolling window, so that your visitor doesn't loose track of the relative position in the page.

Keep the table of contents always visible is an option specifically tailored for TOC placed in a sidebar (don't use it in the main area of your page!). We will discuss about how to add a TOC to the sidebar later. Notice that while editing the page this setting does not have any effect and the table of contents never scrolls into the view. This is a feature designed for your convenience, to facilitate the edition of other elements in the sidebar.

The distance from top parameter sets the distance - in pixels - from the top of the viewport at which the target element will be placed. When Keep the table of contents always visible is checked this is also the distance in pixels at which of the TOC will stay from the top of the page. It is useful with themes that have a header or other element positioned as fixed.

Flash background color will apply a subtle effect to highlight the element the visitor has jumped to. It changes the background of the element to the chosen color and then restores the original bakcground color. That will help to identify the entry chosen in the TOC, specially useful when there is a group of entries together at the bottom of the page. It might not be noticeable in some cases, like images. In such a case you can try adding a padding to the images so that the effect gets visible (e.g.: padding: 3px;).

Finally you can choose among a number of styles:

  • Classic
  • Modern
  • Compact
  • Unstyled

The unstyled option is intended to let you apply your own styles. Well, it is not truly completely unstyled, but we kept our CSS to a minimum. That's how the styles look like:









TOC indexer block: TOCs in the sidebar

Besides the common TOC block there is a second one called TOC indexer. You can use the TOC indexer block to mark which areas will be included in the table of content. Thats useful, for instance, to include in the sidebar a table of contents for the main area in your page: you simply add a TOC block in the sidebar and a TOC indexer block in the main area.

Excluding content

If you dont want a header, table or image to show up in the table of content just add the class no-bbTOC to it.

In the content editor (Content Block) you can add any class either editing the HTML source (advanced) or by means of the Insert/Edit Attributes (simpler).

Position the cursor in the element to exclude from the table of contents, and press "Insert/Edit Attributes" in the toolbar:


In the dialog click in the Class dropdown and select the "(value)" option. Then write no-bbTOC.


If you feel comfortable editing HTML you can also do it with the "Edit HTML Source" tool: