Django - The Easy Way Django - The Easy Way
Samuli Natri 2016.09.13
Samuli Natri is a software developer who enjoys programming games and web applications. He attended Helsinki University Of Technology (Computer Science) and Helsinki University (Social Sciences).

Drupal 8 - How To Create Table Of Contents From Headings With Toc Filter Module

Tutorial on how to create table of contents from header tags (like H1 and H2).

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:


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?

A 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