navigation

Announcement banner

<div data-banner><p>Default yellow <a href="#">Read more</a></p></div>

<div data-banner data-tone="sky"><p>Sky tone <a href="#">Read more</a></p></div>

Breadcrumb

<nav aria-label="Breadcrumb"><ol>
  <li><a href="#">Home</a></li><li><a href="#">Docs</a></li><li><a href="#">Guides</a></li><li><a href="#" aria-current="page">Loading data</a></li>
</ol></nav>

Tabs

ARIA (static)

<div>
  <div role="tablist" aria-label="Example">
    <button role="tab" id="t1" aria-selected="true" aria-controls="p1">Overview</button>
    <button role="tab" id="t2" aria-selected="false" aria-controls="p2" tabindex="-1">Usage</button>
    <button role="tab" id="t3" aria-selected="false" aria-controls="p3" tabindex="-1" aria-disabled="true">Disabled</button>
  </div>
  <div role="tabpanel" id="p1" aria-labelledby="t1"><p>Overview panel.</p></div>
</div>

Pure CSS (radio)

<div data-tabs>
  <input type="radio" name="demo-tabs" id="r1" checked aria-label="Tab one">
  <input type="radio" name="demo-tabs" id="r2" aria-label="Tab two">
  <input type="radio" name="demo-tabs" id="r3" aria-label="Tab three">
  <div role="tablist"><label for="r1">One</label><label for="r2">Two</label><label for="r3">Three</label></div>
  <div role="tabpanel"><p>Panel one.</p></div>
  <div role="tabpanel"><p>Panel two.</p></div>
  <div role="tabpanel"><p>Panel three.</p></div>
</div>

Pagination

<nav aria-label="Pagination"><ul>
  <li><span aria-disabled="true">Prev</span></li>
  <li><a href="#" aria-label="Page 1" aria-current="page">1</a></li>
  <li><a href="#">2</a></li><li><a href="#">3</a></li>
  <li data-ellipsis aria-hidden="true">&hellip;</li>
  <li><a href="#">12</a></li>
  <li><a href="#">Next</a></li>
</ul></nav>

Sidebar / docs nav

<aside style="max-width:18rem">
  <nav aria-label="Docs">
    <h2>Getting started</h2>
    <ul>
      <li><a href="#">Introduction</a></li>
      <li><a href="#" aria-current="page">Quickstart</a></li>
    </ul>
    <h2>Reference</h2>
    <ul>
      <li><details open><summary>SQL</summary><ul><li><a href="#">SELECT</a></li><li><a href="#">COPY</a></li></ul></details></li>
      <li><details><summary>Integrations</summary><ul><li><a href="#">dbt</a></li></ul></details></li>
      <li><a href="#">Changelog</a></li>
    </ul>
  </nav>
</aside>

Site header

Rendered at the top of this page; markup below.

<header>
  <nav aria-label="Main">
    <a href="#"><svg viewBox="0 0 28 28" width="28" height="28" aria-hidden="true"><path d="M3 22 9 12l5 6-4 6z" fill="var(--c-coral)"/><path d="M12 4l9 3-4 7z" fill="var(--c-yellow)"/></svg>Brand</a>
    <details data-menu>
      <summary>Menu</summary>
      <ul>
        <li><details data-dropdown name="site-nav"><summary>Product</summary><ul><li><a href="#">Overview</a></li><li><a href="#">Dives</a></li><li><a href="#">Ducklings</a></li></ul></details></li>
        <li><details data-dropdown name="site-nav"><summary>Community</summary><ul><li><a href="#">Blog</a></li><li><a href="#">Events</a></li></ul></details></li>
        <li><details data-dropdown name="site-nav"><summary>Company</summary><ul><li><a href="#">About</a></li><li><a href="#">Careers</a></li></ul></details></li>
        <li><a href="#">Docs</a></li>
        <li><a href="#" aria-current="page">Pricing</a></li>
        <li><a href="#">Contact us</a></li>
      </ul>
      <ul>
        <li><a href="#">Log in</a></li>
        <li><a href="#" role="button">Start free</a></li>
      </ul>
    </details>
  </nav>
</header>

Footer

Rendered at the bottom of this page; markup below.

<footer>
  <div>
    <nav aria-labelledby="f1"><h2 id="f1">Product</h2><ul><li><a href="#">Overview</a></li><li><a href="#">Pricing</a></li><li><a href="#">Docs</a></li></ul></nav>
    <nav aria-labelledby="f2"><h2 id="f2">Community</h2><ul><li><a href="#">Blog</a></li><li><a href="#">Events</a></li><li><a href="#">Slack</a></li></ul></nav>
    <nav aria-labelledby="f3"><h2 id="f3">Company</h2><ul><li><a href="#">About</a></li><li><a href="#">Careers</a></li><li><a href="#">Contact</a></li></ul></nav>
  </div>
  <div data-legal>
    <p>&copy; 2026 Company. All rights reserved.</p>
    <ul><li><a href="#">Privacy</a></li><li><a href="#">Terms</a></li></ul>
  </div>
</footer>