Sidebar navigation

How to use it

Use for documentation or settings areas with more pages than fit in a top bar, grouped into a few labelled sections. Do not use it for two or three destinations (use the navigation bar) or for jumps within one page (use the table of contents). Replace the hrefs, labels and the group heading ids, and move aria-current="page" to the link of the page being shown.

Accessibility

A <nav aria-label="Documentation"> landmark holds one list per group, and each list is named by its visible group heading through aria-labelledby, so screen readers announce "Getting started, list, 2 items". The current page carries aria-current="page" and is also marked by a left bar and bold weight, not by colour alone. Links (#1e3a8a on #ffffff, 10.36:1), group headings (#475569 on #ffffff, 7.58:1) and the current link (#1e3a8a on #eff6ff, 9.52:1) all pass, and every link shows a 2px focus outline.

Source (copy-ready)

Copy code

<nav class="dcl-sidebar-nav" aria-label="Documentation">
  <h2 class="dcl-sidebar-nav__heading" id="dcl-sidebar-nav-start">Getting started</h2>
  <ul class="dcl-sidebar-nav__list" aria-labelledby="dcl-sidebar-nav-start">
    <li><a class="dcl-sidebar-nav__link" href="../index.html">Introduction</a></li>
    <li><a class="dcl-sidebar-nav__link" href="../about.html" aria-current="page">Installation</a></li>
  </ul>
  <h2 class="dcl-sidebar-nav__heading" id="dcl-sidebar-nav-guides">Guides</h2>
  <ul class="dcl-sidebar-nav__list" aria-labelledby="dcl-sidebar-nav-guides">
    <li><a class="dcl-sidebar-nav__link" href="../index.html">Theming</a></li>
    <li><a class="dcl-sidebar-nav__link" href="../index.html">Forms and validation</a></li>
    <li><a class="dcl-sidebar-nav__link" href="../about.html">Deploying</a></li>
  </ul>
</nav>
<style>
.dcl-sidebar-nav { box-sizing: border-box; max-width: 16rem; padding: 0.75rem 0; font: inherit; color: #0f172a; background-color: #ffffff; border-right: 1px solid #e2e8f0; }
.dcl-sidebar-nav__heading { margin: 0.75rem 0 0.25rem; padding: 0 1rem; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: #475569; background-color: #ffffff; }
.dcl-sidebar-nav__list { margin: 0; padding: 0; list-style: none; }
.dcl-sidebar-nav__link { display: block; padding: 0.375rem 1rem 0.375rem 0.75rem; border-left: 4px solid #ffffff; text-decoration: none; overflow-wrap: anywhere; color: #1e3a8a; background-color: #ffffff; }
.dcl-sidebar-nav__link:hover { text-decoration: underline; color: #0f172a; background-color: #f1f5f9; }
.dcl-sidebar-nav__link:focus-visible { outline: 2px solid #1d4ed8; outline-offset: -2px; }
.dcl-sidebar-nav__link[aria-current="page"] { font-weight: 700; border-left-color: #1d4ed8; color: #1e3a8a; background-color: #eff6ff; }
</style>