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>

Dropdowns#

You can use dropdowns inside Nav.

<nav>
  <ul>
    <li><strong>Acme Corp</strong></li>
  </ul>
  <ul>
    <li><a href="#" class="secondary">Services</a></li>
    <li>
      <details class="dropdown">
        <summary>
          Account
        </summary>
        <ul dir="rtl">
          <li><a href="#">Profile</a></li>
          <li><a href="#">Settings</a></li>
          <li><a href="#">Security</a></li>
          <li><a href="#">Logout</a></li>
        </ul>
      </details>
    </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>

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.

<nav
  aria-label="breadcrumb"
  style="--pico-nav-breadcrumb-divider: '✨';"
>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Services</a></li>
    <li>Design</li>
  </ul>
</nav>

Overflow#

The <nav> component uses overflow: visible; on the container and negative margins on childrens to provide a nice ::focus-visible style for links on keyboard navigation while keeping the content aligned horizontally.

Edit this page on GitHub