Skip to content
Design System
  • Home
  • Settings
  • Styles
  • Layouts
  • Components
  • Scripts
  • Templates
  • Access control banner
  • Activity
  • Archived content
  • Breadcrumbs
  • Cards
  • Collapsible containers
  • Columns
  • Content slider (carousel)
  • Crosslinks (You may also like)
  • Disclosure button
  • Evangelists
  • Fifty-fifty
  • Footer
  • Group list
  • Header
  • Hero
  • Image component
  • Members
  • Navigation
  • Navigation with new logo v1
  • Navigation with new logo v2
  • Notes
  • Pagination
  • Pre-footer
  • Quote component
  • RSS
  • Table of contents
  • Tag list
  • Text component
  • Translations
  • Video component

Table of contents

Part of the default page template.

Open this Table of contents in a new tab

HTML:

<nav class="toc" aria-labelledby="toc-label">
	<h2 id="toc-label">Page contents</h2>
	<ul>
		<li><a href="#link-to-anchor-1">First heading</a>
            <ul>
                <li><a href="#link-to-sub-anchor-1">First subheading</a></li>
                <li><a href="#link-to-sub-anchor-2">Second subheading</a></li>
            </ul>
        </li>
		<li><a href="#link-to-anchor-2">Second heading</a></li>
		<li><a href="#link-to-anchor-3">Third heading</a></li>
	</ul>
</nav>

¶Considerations

Each link goes to a heading with an id. The link path and id need to match.

Copyright © 2025 W3C - generated 10 Jan 2025, 12:43:28 UTC

Feedback is welcome and can be submitted as a GitHub issue.