Table of contents

How to use it

Use at the top or side of a long article or guide with several headings so readers can see its shape and jump ahead. Skip it for pages with fewer than three sections, and do not use it for site-wide navigation (use the sidebar navigation). Give each heading in your article a unique id and point each link's href at it; generate the list from your headings if the content changes often.

Accessibility

The contents list is a <nav> named by its visible "On this page" heading through aria-labelledby, holding a nested ordered list that mirrors the heading levels. Each link points at the id of a real heading, and those headings carry tabindex="-1" so following a link also moves keyboard focus there; scroll-margin-top keeps the heading from landing under a sticky header. Links are #1d4ed8 on #f8fafc (6.41:1), the box heading #0f172a on #f8fafc (17.06:1) and article text #0f172a on #ffffff (17.85:1), with a 2px focus outline on every link.

Source (copy-ready)

Copy code

<div class="dcl-toc">
  <nav class="dcl-toc__nav" aria-labelledby="dcl-toc-title">
    <h2 class="dcl-toc__title" id="dcl-toc-title">On this page</h2>
    <ol class="dcl-toc__list">
      <li><a class="dcl-toc__link" href="#dcl-toc-install">Install the package</a></li>
      <li><a class="dcl-toc__link" href="#dcl-toc-config">Configure the project</a>
        <ol class="dcl-toc__list dcl-toc__list--nested">
          <li><a class="dcl-toc__link" href="#dcl-toc-env">Environment variables</a></li>
        </ol>
      </li>
      <li><a class="dcl-toc__link" href="#dcl-toc-deploy">Deploy</a></li>
    </ol>
  </nav>
  <div class="dcl-toc__article">
    <h3 class="dcl-toc__heading" id="dcl-toc-install" tabindex="-1">Install the package</h3>
    <p class="dcl-toc__text">Add the package to your project with your package manager, then restart the development server.</p>
    <h3 class="dcl-toc__heading" id="dcl-toc-config" tabindex="-1">Configure the project</h3>
    <p class="dcl-toc__text">Create a settings file in the project root and list the folders that hold your pages.</p>
    <h4 class="dcl-toc__heading" id="dcl-toc-env" tabindex="-1">Environment variables</h4>
    <p class="dcl-toc__text">Keep secrets out of the settings file; read them from the environment at build time.</p>
    <h3 class="dcl-toc__heading" id="dcl-toc-deploy" tabindex="-1">Deploy</h3>
    <p class="dcl-toc__text">Run the build command and upload the output folder to any static host.</p>
  </div>
</div>
<style>
.dcl-toc { max-width: 40rem; font: inherit; color: #0f172a; background-color: #ffffff; }
.dcl-toc__nav { padding: 0.75rem 1rem; border: 1px solid #e2e8f0; border-radius: 0.375rem; color: #0f172a; background-color: #f8fafc; }
.dcl-toc__title { margin: 0 0 0.5rem; font-size: 1rem; color: #0f172a; background-color: #f8fafc; }
.dcl-toc__list { margin: 0; padding-left: 1.25rem; color: #0f172a; background-color: #f8fafc; }
.dcl-toc__list--nested { margin-top: 0.25rem; }
.dcl-toc__list li { margin: 0.25rem 0; }
.dcl-toc__link { overflow-wrap: anywhere; color: #1d4ed8; background-color: #f8fafc; }
.dcl-toc__link:hover { color: #1e3a8a; background-color: #f8fafc; }
.dcl-toc__link:focus-visible { outline: 2px solid #1d4ed8; outline-offset: 2px; }
.dcl-toc__article { padding: 0.5rem 0; color: #0f172a; background-color: #ffffff; }
.dcl-toc__heading { margin: 1rem 0 0.25rem; scroll-margin-top: 4rem; color: #0f172a; background-color: #ffffff; }
.dcl-toc__heading:focus-visible { outline: 2px solid #1d4ed8; outline-offset: 2px; }
.dcl-toc__text { margin: 0; color: #0f172a; background-color: #ffffff; }
</style>