Automatic Table Of Contents With Toc Filter Module (Drupal 8 Tutorial #45) (Article + Video)

Submitted by TheMain on Tue, 09/13/2016 - 19:28

Toc Filter module creates table of contents from header tags.

Note: at the moment (2016.09.13) there isn't yet a stable release for the module.

How to install it?

drush -y en toc_filter

How to display it automatically?

  • Go to Configuration > Content authoring > Text formats and editors
  • Edit Full HTML text format
  • In Enabled filters, check Display a table of contents:

  • In Filter settings, select At the top of the page in the Automatically include table of contents dropdown:

Now we have table of contents at the top:

  • With little bit of styling...
.toc-tree {
  font-size: 14px;
  padding: 1em;
  margin: 0.5em 0 1em 1em;
  float: right;
  border: 1px solid #ccc;
  border-radius: 5px;
  h3 {
    font-size: 16px;
    margin-top: 0px;
  ol {
    margin-bottom: 0px;
  • It can look like this:


  • It is also responsive:

How to display it with a token?

  • Use [toc] token in the editor:

    Table of contents types

    You can create table of contents types or edit the default ones:

    Example 1

    How to use roman numbers and allow only one level of headings:

    • Go to Structure > Table of contents types and edit the Default type.
    • In HEADER SETTINGS, set header maximum level as H2:
    • In the NUMBERING SETTINGS, select Numbering type as lower-roman.

    How to display it in a block?

    Note: at the moment (2016.09.13) the block didn't work with beta1 or dev version: Update (2016.09.20): it seems to work when you add the toc token somewhere in the body.

    • Edit Full HTML text format
    • In Filter settings, select Display table of contents in a block:

    • Go to Structure > Block layout
    • Place table of contents block in the content section:

    • Drag it above the Main page content

    Posted by Samuli Natri on 13 September 2016