Patterns: Nav

Standard

A horizontal navigation bar. Add .nav__item--split to an item to separate it from the previous one.

<nav>
  <ul class="nav">
    <li class="nav__item">
      <a class="nav__link" href="#">Item 1</a>
    </li>
    <li class="nav__item">
      <a class="nav__link" href="#">Item 2</a>
    </li>
    <li class="nav__item">
      <a class="nav__link" href="#">Item 2</a>
    </li>
    <li class="nav__item nav__item--split">
      <a class="nav__link" href="#">Item 4</a>
    </li>
    <li class="nav__item">
      <a class="nav__link" href="#">Item 5</a>
    </li>
    <li class="nav__item">
      <a class="nav__link" href="#">Item 6</a>
    </li>
  </ul>
</nav>

Right

Add .nav--right to the container to align the items, in the same order, to thr right. Note that .nav__item--split has a separator after it, instead of before.

<nav>
  <ul class="nav nav--right">
    <li class="nav__item">
      <a class="nav__link" href="#">Item 1</a>
    </li>
    <li class="nav__item">
      <a class="nav__link" href="#">Item 2</a>
    </li>
    <li class="nav__item">
      <a class="nav__link" href="#">Item 2</a>
    </li>
    <li class="nav__item nav__item--split">
      <a class="nav__link" href="#">Item 4</a>
    </li>
    <li class="nav__item">
      <a class="nav__link" href="#">Item 5</a>
    </li>
    <li class="nav__item">
      <a class="nav__link" href="#">Item 6</a>
    </li>
  </ul>
</nav>

Active items

Add .is-active to an item. The <a> can also be replaced by a <span>.

<nav>
  <ul class="nav">
    <li class="nav__item">
      <a class="nav__link" href="#">Item 1</a>
    </li>
    <li class="nav__item is-active">
      <a class="nav__link" href="#">Active link</a>
    </li>
    <li class="nav__item is-active">
      <span class="nav__link">Active span</span>
    </li>
  </ul>
</nav>

Pagination

Adding .nav--pagination gives each item a bit more space, because they’re so narrow.

<nav>
  <ul class="nav nav--pagination">
    <li class="nav__item">
      <a class="nav__link" href="#">1</a>
    </li>
    <li class="nav__item">
      <a class="nav__link" href="#">2</a>
    </li>
    <li class="nav__item is-disabled">
      <span class="nav__link">
        <span aria-hidden="true">…</span>
        <span class="utils-sr-only">(more pages)</span>
      </span>
    </li>
    <li class="nav__item is-active">
      <span class="nav__link">6 <span class="utils-sr-only">(current)</span></span>
    </li>
    <li class="nav__item">
      <a class="nav__link" href="#">7</a>
    </li>
  </ul>
</nav>

Next/previous

Next/previous links are special cases, to make their underlining look nicer.

<nav>
  <ul class="nav nav--pagination">
    <li class="nav__item nav__item--prev">
      <a class="nav__link nextprev" href="#">
        <span aria-hidden="true">&larr;</span>
        <span class="nextprev__inner">Previous page</span>
      </a>
    </li>
    <li class="nav__item">
      <a class="nav__link" href="#">1</a>
    </li>
    <li class="nav__item is-active">
      <span class="nav__link">2 <span class="utils-sr-only">(current)</span></span>
    </li>
    <li class="nav__item">
      <a class="nav__link" href="#">3</a>
    </li>
    <li class="nav__item nav__item--next">
      <a class="nav__link nextprev" href="#">
        <span class="nextprev__inner">Next page</span>
        <span aria-hidden="true">&rarr;</span>
      </a>
    </li>
  </ul>
</nav>

The next/previous links don't need to be used within a .nav structure:

<nav>
  <ul class="list--inline list--unstyled">
    <li>
      <a class="nextprev" href="#">
        <span aria-hidden="true">&larr;</span>
        <span class="nextprev__inner">Previous page</span></a>
    </li><li class="list--inline__item--bullet">
      <a class="nextprev" href="#">
        <span class="nextprev__inner">Next page</span>
        <span aria-hidden="true">&rarr;</span>
      </a>
    </li>
  </ul>
</nav>