Skip to content

Commit cc1c6fe

Browse files
delismadelisma
authored
Merge pull request #548 from canada-ca/feature/update-in-page-toc-2025-08-19
Update content for table of contents page
2 parents a2d0288 + 6d97349 commit cc1c6fe

File tree

2 files changed

+58
-78
lines changed

2 files changed

+58
-78
lines changed

‎common-design-patterns/in-page-toc.md

Lines changed: 58 additions & 78 deletions
Original file line numberDiff line numberDiff line change
@@ -1,92 +1,72 @@
11
---
22
altLangPage: https://conception.canada.ca/configurations-conception-communes/table-matiere-interieur.html
33
date: null
4-
dateModified: '2018-12-19'
4+
dateModified: '2025-08-20'
55
description: null
6-
title: In-page table of contents design pattern
6+
title: In-page table of contents
77
---
88

9-
10-
11-
12-
9+
<p>The in-page table of contents pattern is a list of links that lead to subsections of the same page.</p>
10+
<h2>On this page</h2>
11+
<ul>
12+
<li><a href="#when-to-use">When to use</a></li>
13+
<li><a href="#what-to-avoid">What to avoid</a></li>
14+
<li><a href="#content-and-design">Content and design</a></li>
15+
<li><a href="#how-to-implement">How to implement</a></li>
16+
<li><a href="#latest-changes">Latest changes</a></li>
17+
</ul>
1318
<section>
14-
<p>
15-
The in-page table of contents pattern is a list of links that lead to subsections of the same page. This pattern is intended for long documents that exist as a single page.
16-
</p>
17-
<section>
18-
<h2>
19-
Objective
20-
</h2>
21-
<p>
22-
Use the in-page table of contents pattern to:
23-
</p>
19+
<h2 id="when-to-use">When to use</h2>
20+
<p>Use the in-page table of contents pattern to:</p>
2421
<ul>
25-
<li>
26-
provide an outline for the content of a single page that has multiple subsections
27-
</li>
28-
<li>
29-
provide an alternative method to jump to specific content on the page, without using the scroll bar
30-
</li>
22+
<li>provide an outline for the content of a single page that has multiple subsections</li>
23+
<li>provide an alternative method to jump to specific content on the page, without using the scroll bar</li>
3124
</ul>
32-
<p>
33-
Use this pattern when:
34-
</p>
25+
<p>Use this pattern when:</p>
3526
<ul>
36-
<li>
37-
excessive scrolling is required to view all of the content on the page
38-
</li>
39-
<li>
40-
the page is divided into subsections, each with its own headings
41-
</li>
27+
<li>excessive scrolling is required to view all of the content on the page</li>
28+
<li>the page is divided into subsections, each with its own headings</li>
4229
</ul>
43-
<p>
44-
Do not use this pattern when the document exists across several web pages. Instead, use the multi-page table of contents pattern.
45-
</p>
46-
</section>
47-
<section>
48-
<h2>
49-
How and when to use an in-page table of contents
50-
</h2>
30+
</section>
31+
<section>
32+
<h2 id="what-to-avoid">What to avoid</h2>
33+
<p>Do not use this pattern when the document exists across several web pages. Instead, use the multi-page table of contents pattern.</p>
34+
</section>
35+
<section>
36+
<h2 id="content-and-design">Content and design</h2>
5137
<ul>
52-
<li>
53-
Always position the in-page table of contents pattern at the start of the page, before the substantive content of the page begins
54-
</li>
55-
<li>
56-
Label the pattern “On this page” to distinguish it from other page content and to provide consistency throughout the site
57-
</li>
58-
<li>
59-
Present links using list elements—bullets for an unordered list, numbers for an ordered list
60-
</li>
61-
<li>
62-
Use standard linking styles to ensure that the links present as clickable elements
63-
</li>
64-
<li>
65-
Present the in-page table of contents aligned to the left, as a vertical list, as opposed to using a column layout
66-
</li>
38+
<li>Always position the in-page table of contents pattern at the top of the page, just below the H1 and any introductory text, before the main content begins</li>
39+
<li>Label the pattern “On this page” to distinguish it from other page content and to provide consistency throughout the site</li>
40+
<li>Use list elements to present links: use bullets for an unordered list and numbers for an ordered list</li>
41+
<li>Use standard link styles to make sure the links appear as clickable elements</li>
42+
<li>Present the in-page table of contents aligned to the left, as a vertical list, as opposed to using a column layout</li>
6743
</ul>
68-
<div class="row">
69-
<div class="col-sm-2">
70-
</div>
71-
<div class="col-sm-8">
72-
<figure class="mrgn-bttm-lg">
73-
<figcaption class="text-center">
74-
<b>
75-
Figure 23. In-page table of contents pattern
76-
</b>
77-
</figcaption>
78-
<img alt="Image of in-page table of contents pattern. Details on this graphic can be found in the surrounding text." class="img-responsive center-block" src="https://www.canada.ca/content/dam/tbs-sct/images/government-communications/canada-content-style-guide/in-page-table-of-contents-eng.jpg"/>
79-
</figure>
80-
</div>
81-
<div class="col-sm-2">
82-
</div>
83-
</div>
84-
<div class="clearfix">
85-
</div>
86-
</section>
44+
<h3>Visual example</h3>
45+
<figure class="mrgn-bttm-lg">
46+
<img alt='The heading "On this page" is written in bold, black font above a list of links.' class="img-responsive center-block" src="/images/in-page-toc-01.png"/>
47+
<details>
48+
<summary>Image description</summary>
49+
<p>The heading "On this page" is written in bold, black font above a list of links. Below the heading is a bulleted vertical list containing three items:</p>
50+
<ul>
51+
<li>First section heading</li>
52+
<li>Second section heading</li>
53+
<li>Third section heading</li>
54+
</ul>
55+
<p>Each item in the list is a blue, underlined hyperlink, indicating that users can click them to quickly jump to the corresponding sections on the same page.</p>
56+
</details>
57+
</figure>
58+
</section>
59+
<section>
60+
<h2 id="how-to-implement">How to implement</h2>
61+
<h3>GCWeb (WET) theme implementation reference</h3>
62+
<ul>
63+
<li><a href="https://wet-boew.github.io/GCWeb/components/gc-toc/toc-en.html">In-page table of contents (GCWeb)</a></li>
64+
</ul>
65+
</section>
66+
<section>
67+
<h2 id="latest-changes">Latest changes</h2>
68+
<dl class="dl-horizontal">
69+
<dt>2025-08-20</dt>
70+
<dd>Revised the visual examples and headings on the page to align more closely with our newer guidance pieces. Added links to the GCWeb implementation for easier reference.</dd>
71+
</dl>
8772
</section>
88-
89-
90-
91-
92-

‎images/in-page-toc-01.png

20.4 KB
Loading

0 commit comments

Comments
 (0)