Nav

Provide horizontal navigation for content.

Basic

<ul class="nav">
  <li class="nav__item is-active">
    <a href="#" class="nav__link">Home</a>
  </li>
  <li class="nav__item">
    <a href="#" class="nav__link">Link</a>
  </li>
  <li class="nav__item">
    <a href="#" class="nav__link">Another Link</a>
  </li>
  <li class="nav__item">
    <a href="#" class="nav__link is-disabled">Disabled</a>
  </li>
</ul>

Layout

Align center

Add .nav--center modifier class on .nav container.

<ul class="nav nav--center">
  ...
</ul>

Align end

Add .nav--end modifier class on .nav container.

<ul class="nav nav--end">
  ...
</ul>

Stretch

Add .nav--stretch modifier class on .nav container.

<ul class="nav nav--stretch">
  ...
</ul>

Variant

Tabs

By adding .nav--tabs modifier class on .nav element to create tabs styled nav list.

<ul class="nav nav--tabs">
  <li class="nav__item is-active">
    <a href="#" class="nav__link">Home</a>
  </li>
  <li class="nav__item">
    <a href="#" class="nav__link">Link</a>
  </li>
  <li class="nav__item">
    <a href="#" class="nav__link">Another Link</a>
  </li>
  <li class="nav__item">
    <a href="#" class="nav__link is-disabled">Disabled</a>
  </li>
</ul>

Pills

By adding .nav--pills modifier class on .nav element to create pills styled nav list.

<ul class="nav nav--pills">
  <li class="nav__item is-active">
    <a href="#" class="nav__link">Home</a>
  </li>
  <li class="nav__item">
    <a href="#" class="nav__link">Link</a>
  </li>
  <li class="nav__item">
    <a href="#" class="nav__link">Another Link</a>
  </li>
  <li class="nav__item">
    <a href="#" class="nav__link is-disabled">Disabled</a>
  </li>
</ul>

Sizing

All variants can combile with .nav--sm modifier classes to get a small size of it.

<ul class="nav nav--sm">
  ...
</ul>