Components

Nav

The essential navbar component in pure semantic HTML.

<nav>
  <ul>
    <li><strong>Acme Corp</strong></li>
  </ul>
  <ul>
    <li><a href="#">About</a></li>
    <li><a href="#">Services</a></li>
    <li><a href="#">Products</a></li>
  </ul>
</nav>

<ul> are automatically distributed horizontally.

<li> are unstyled and inlined.

<a> are underlined only on :hover.

Link variants#

You can use .secondary, .contrast, and .outline classes (not available in the class-less version).

<nav>
  <ul>
    <li><strong>Acme Corp</strong></li>
  </ul>
  <ul>
    <li><a href="#" class="contrast">About</a></li>
    <li><a href="#" class="contrast">Services</a></li>
    <li><a href="#" class="contrast">Products</a></li>
  </ul>
</nav>
<nav>
  <ul>
    <li><a href="#" class="secondary">...</a></li>
  </ul>
  <ul>
    <li><strong>Acme Corp</strong></li>
  </ul>
  <ul>
    <li><a href="#" class="secondary">...</a>
    </li>
  </ul>
</nav>

Buttons#

You can use <button> inside <li>.

Button sizes automatically match link size and margin.

<nav>
  <ul>
    <li><strong>Acme Corp</strong></li>
  </ul>
  <ul>
    <li><a href="#">About</a></li>
    <li><a href="#">Services</a></li>
    <li><button class="secondary">Products</button></li>
  </ul>
</nav>

Vertical stacking#

Inside <aside>, navs items are stacked vertically.

<aside>
  <nav>
    <ul>
      <li><a href="#">About</a></li>
      <li><a href="#">Services</a></li>
      <li><a href="#">Products</a></li>
    </ul>
  </nav>
</aside>

You can also use Dropdowns inside navs.

Breadcrumb#

With <nav 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="#">Services</a></li>
    <li>Design</li>
  </ul>
</nav>

You can change the divider with a local CSS custom property --pico-nav-breadcrumb-divider.