Navs

The essential navbar component in pure semantic HTML.

<nav>
  <ul>
    <li><strong>Brand</strong></li>
  </ul>
  <ul>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#" role="button">Button</a></li>
  </ul>
</nav>

<ul> are automatically distributed horizontally.

<li> are unstyled and inlined.

<nav>
  <ul>
    <li><a href="#" class="secondary">…</a></li>
  </ul>
  <ul>
    <li><strong>Brand</strong></li>
  </ul>
  <ul>
    <li><a href="#" class="secondary">…</a></li>
  </ul>
</nav>

Inside <aside>, navs are stacked vertically.

<aside>
  <nav>
    <ul>
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
      <li><a href="#">Link</a></li>
    </ul>
  </nav>
</aside>

With aria-label="breadcrumb", you can turn a nav into a breadcrumb.

<nav aria-label="breadcrumb">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Category</a></li>
    <li>Page</li>
  </ul>
</nav>