Navigation bar

How to use it

Use as the top-level site navigation with a small, fixed set of links plus a brand link that returns to the homepage. Mark the current section with aria-current="page" so it is conveyed to assistive tech, not only by underlining.

Accessibility

The <nav> has an aria-label distinguishing it as the primary navigation, links are plain <a> elements usable without JavaScript, and the current page is marked with aria-current="page" rather than color alone. White text on the dark navy background meets 17.85:1 contrast.

Source (copy-ready)

<nav class="dcl-navbar" aria-label="Primary">
  <a href="#" class="dcl-navbar__brand">Acme Docs</a>
  <ul class="dcl-navbar__links">
    <li><a href="#" class="dcl-navbar__link" aria-current="page">Guides</a></li>
    <li><a href="#" class="dcl-navbar__link">API reference</a></li>
    <li><a href="#" class="dcl-navbar__link">Changelog</a></li>
  </ul>
</nav>
<style>
.dcl-navbar { display: flex; align-items: center; gap: 1.5rem; padding: 0.75rem 1rem; background-color: #0f172a; color: #ffffff; font: inherit; }
.dcl-navbar__brand { color: #ffffff; background-color: #0f172a; font-weight: 700; text-decoration: none; }
.dcl-navbar__links { display: flex; gap: 1.25rem; list-style: none; margin: 0; padding: 0; }
.dcl-navbar__link { color: #ffffff; background-color: #0f172a; text-decoration: none; }
.dcl-navbar__link[aria-current="page"] { text-decoration: underline; font-weight: 600; }
.dcl-navbar__link:focus-visible, .dcl-navbar__brand:focus-visible { outline: 2px solid #ffffff; outline-offset: 2px; }
</style>