City of Ghent Style Guide

Table of contents

The table of contents component helps users understand the content and the structure of a web page and lets users looking for something specific navigate quickly to a specific section of the web page.

When to use this component

Use the table of contents component on a web page when:

  • The web page contains a lot of text (web page mainly consists of paragraphs)
  • The content of the page has a specific structure
  • The content of the page is clearly separated by headings (typically h2 headings)

When not to use this component

Do not use the table of contents component on a web page when:

  • The web page does not contain that many text. In this case, the table of contents component is unecessary.
  • The amount of content on the web page will make the page too long or too slow to load. In this case, split the content accross multiple pages.
  • The content of the page is not clearly separated by headings. In this case, the table of contents component should not be used.

How it works

General

The table of contents component is a list of anchor links. Each anchor link points to a section within the web page. The sections typically have a clear title (typically h2 headings). The titles of the sections are used as the link text for the anchor links.

Responsive behavior

On desktop and tablet resolutions, the anchor links are shown in a horizontal way with a separator between them. When necessary, the anchor links are wrapped to new lines.

On mobile resolutions, the anchor links are shown in a vertical way.

Table Of Contents 

<nav class="table-of-contents" aria-labelledby="table-of-contents-header">
  <div class="content-container">
    <h2 id="table-of-contents-header" class="visually-hidden">Table of content</h2>
    {% include '@list' with {
      'type': 'links',
      'items': list,
      'modifier': 'inline'
    } %}
  </div>
</nav>
 
<nav class="table-of-contents" aria-labelledby="table-of-contents-header">
    <div class="content-container">
        <h2 id="table-of-contents-header" class="visually-hidden">Table of content</h2>

        <ul class="inline">
            <li><a href="#" class="active">Anchor link 1</a></li>
            <li><a href="#">Anchor link 2</a></li>
            <li><a href="#">Anchor link 3</a></li>
            <li><a href="#">Anchor link 4</a></li>
        </ul>

    </div>
</nav>
 
{
  "list": [
    "<a href=\"#\" class=\"active\">Anchor link 1</a>",
    "<a href=\"#\">Anchor link 2</a>",
    "<a href=\"#\">Anchor link 3</a>",
    "<a href=\"#\">Anchor link 4</a>"
  ]
}
  • Content: 
    .table-of-contents {
  margin-bottom: 2rem;

  ul > li {
    display: block;
    width: 100%;
    margin-right: 0;

    @include phablet {
      display: inline-block;
      width: auto;
    }

    &::after {
      @include phablet {
        @include theme('color', 'color-primary--lighten-3', 'filter-nav-longdash-color');

        display: inline-block;
        padding: 0 .2rem;
        content: '—';
      }
    }

    &:last-child::after {
      content: '';
    }
  }
}
  • URL: /components/raw/table-of-contents/_table-of-contents.scss
  • Filesystem Path: components/31-molecules/table-of-contents/_table-of-contents.scss
  • Size: 478 Bytes