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.
Use the table of contents component on a web page when:
Do not use the table of contents component on a web page when:
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.
On desktop and tablet resolutions, the anchor links are shown in columns. When necessary, the anchor links are wrapped to new lines.
On mobile resolutions, the anchor links are shown in a vertical way, single column.
<nav class="table-of-contents" aria-labelledby="table-of-contents-header">
<div class="content-container">
<h4 id="table-of-contents-header">On this page</h4>
{% include '@list' with {
'type': 'links',
'items': list,
'modifier': type
} %}
</div>
</nav>
<!-- 3 Column -->
<nav class="table-of-contents" aria-labelledby="table-of-contents-header">
<div class="content-container">
<h4 id="table-of-contents-header">On this page</h4>
<ul class="three-column">
<li><a href="#" class="active">Anchor link 1</a></li>
<li><a href="#">Anchor link 2 that is slightly longer</a></li>
<li><a href="#">Anchor link 3 that is also a bit longer to see the behaviour</a></li>
<li><a href="#">Anchor link 4</a></li>
<li><a href="#">Anchor link 5</a></li>
<li><a href="#">Anchor link 6</a></li>
<li><a href="#">Anchor link 7</a></li>
<li><a href="#">Anchor link 8</a></li>
</ul>
</div>
</nav>
<!-- 2 Column -->
<nav class="table-of-contents" aria-labelledby="table-of-contents-header">
<div class="content-container">
<h4 id="table-of-contents-header">On this page</h4>
<ul class="two-column">
<li><a href="#" class="active">Anchor link 1</a></li>
<li><a href="#">Anchor link 2 that is slightly longer</a></li>
<li><a href="#">Anchor link 3 that is also a bit longer to see the behaviour</a></li>
<li><a href="#">Anchor link 4</a></li>
<li><a href="#">Anchor link 5</a></li>
<li><a href="#">Anchor link 6</a></li>
<li><a href="#">Anchor link 7</a></li>
<li><a href="#">Anchor link 8</a></li>
</ul>
</div>
</nav>
/* 3 Column */
{
"list": [
"<a href=\"#\" class=\"active\">Anchor link 1</a>",
"<a href=\"#\">Anchor link 2 that is slightly longer</a>",
"<a href=\"#\">Anchor link 3 that is also a bit longer to see the behaviour</a>",
"<a href=\"#\">Anchor link 4</a>",
"<a href=\"#\">Anchor link 5</a>",
"<a href=\"#\">Anchor link 6</a>",
"<a href=\"#\">Anchor link 7</a>",
"<a href=\"#\">Anchor link 8</a>"
],
"type": "three-column"
}
/* 2 Column */
{
"list": [
"<a href=\"#\" class=\"active\">Anchor link 1</a>",
"<a href=\"#\">Anchor link 2 that is slightly longer</a>",
"<a href=\"#\">Anchor link 3 that is also a bit longer to see the behaviour</a>",
"<a href=\"#\">Anchor link 4</a>",
"<a href=\"#\">Anchor link 5</a>",
"<a href=\"#\">Anchor link 6</a>",
"<a href=\"#\">Anchor link 7</a>",
"<a href=\"#\">Anchor link 8</a>"
],
"type": "two-column"
}
.table-of-contents {
@include theme('background-color', 'color-tertiary-light', 'table-of-contents-background-color');
@include medium-text;
padding: 1.5rem;
container-type: inline-size;
h4 {
margin-top: 0;
margin-bottom: 1rem;
}
ul {
// Override general bigger list style.
@include medium-text();
margin: 0;
columns: 1;
column-gap: 45px;
@include phablet {
&.two-column {
columns: 2;
}
&.three-column {
columns: 3;
}
}
}
ul > li {
display: block;
width: 100%;
margin-bottom: 15px;
}
@container (max-width: 700px) { // @todo Set better breakpoint.
@include phablet {
ul {
&.three-column {
columns: 2;
}
}
}
}
}