Footer navigation

How to use it

Use at the bottom of a site to list secondary destinations, such as product, help and legal pages, grouped under short headings. Keep it to three or four columns of a few links each; it is not a replacement for primary navigation. Replace the hrefs, labels and heading ids, and wrap it in your page's <footer> element.

Accessibility

A <nav aria-label="Footer"> holds one list per column, each named by its visible <h2> heading through aria-labelledby, so screen-reader users can jump by heading or list and hear the group name. Links are underlined so they are distinguishable without colour, and each shows a 2px white focus outline on the dark background. Headings (#ffffff on #0f172a, 17.85:1), links (#e2e8f0 on #0f172a, 14.48:1) and the small print (#cbd5e1 on #0f172a, 12.02:1) all pass.

Source (copy-ready)

Copy code

<nav class="dcl-footer-nav" aria-label="Footer">
  <div class="dcl-footer-nav__columns">
    <div class="dcl-footer-nav__group">
      <h2 class="dcl-footer-nav__heading" id="dcl-footer-nav-product">Product</h2>
      <ul class="dcl-footer-nav__list" aria-labelledby="dcl-footer-nav-product">
        <li><a class="dcl-footer-nav__link" href="../index.html">Features</a></li>
        <li><a class="dcl-footer-nav__link" href="../index.html">Pricing</a></li>
        <li><a class="dcl-footer-nav__link" href="../index.html">Changelog</a></li>
      </ul>
    </div>
    <div class="dcl-footer-nav__group">
      <h2 class="dcl-footer-nav__heading" id="dcl-footer-nav-help">Help</h2>
      <ul class="dcl-footer-nav__list" aria-labelledby="dcl-footer-nav-help">
        <li><a class="dcl-footer-nav__link" href="../index.html">Documentation</a></li>
        <li><a class="dcl-footer-nav__link" href="../about.html">Contact</a></li>
      </ul>
    </div>
    <div class="dcl-footer-nav__group">
      <h2 class="dcl-footer-nav__heading" id="dcl-footer-nav-legal">Legal</h2>
      <ul class="dcl-footer-nav__list" aria-labelledby="dcl-footer-nav-legal">
        <li><a class="dcl-footer-nav__link" href="../about.html">Privacy</a></li>
        <li><a class="dcl-footer-nav__link" href="../about.html">Terms of use</a></li>
      </ul>
    </div>
  </div>
  <p class="dcl-footer-nav__note">&copy; 2026 Your project name. Content licensed for reuse with credit.</p>
</nav>
<style>
.dcl-footer-nav { box-sizing: border-box; max-width: 48rem; padding: 1.5rem 1rem 1rem; font: inherit; color: #ffffff; background-color: #0f172a; }
.dcl-footer-nav__columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: 1.25rem; }
.dcl-footer-nav__group { min-width: 0; }
.dcl-footer-nav__heading { margin: 0 0 0.5rem; font-size: 0.875rem; font-weight: 700; color: #ffffff; background-color: #0f172a; }
.dcl-footer-nav__list { margin: 0; padding: 0; list-style: none; }
.dcl-footer-nav__list li { margin: 0.375rem 0; }
.dcl-footer-nav__link { text-underline-offset: 0.2em; overflow-wrap: anywhere; color: #e2e8f0; background-color: #0f172a; }
.dcl-footer-nav__link:hover { color: #ffffff; background-color: #1e293b; }
.dcl-footer-nav__link:focus-visible { outline: 2px solid #ffffff; outline-offset: 2px; }
.dcl-footer-nav__note { margin: 1.5rem 0 0; padding-top: 0.75rem; border-top: 1px solid #334155; font-size: 0.8125rem; color: #cbd5e1; background-color: #0f172a; }
</style>