Navs

The .nav component provides a strong foundation for building all types of navigation components.

In this article

Usage

<ul class="nav">
  <li class="nav-item">
    <a class="nav-link is-active" href="#">
      Active
    </a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">
      Link
    </a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">
      Link
    </a>
  </li>
  <li class="nav-item">
    <a class="nav-link is-disabled" href="#" tabindex="-1" aria-disabled="true">
      Disabled
    </a>
  </li>
</ul>

Classes are used, allowing <ul>, <ol> and <nav> elements to be used.

<nav class="nav">
  <a class="nav-link is-active" href="#">
    Active
  </a>
  <a class="nav-link" href="#">
    Link
  </a>
  <a class="nav-link" href="#">
    Link
  </a>
  <a class="nav-link is-disabled" href="#" tabindex="-1" aria-disabled="true">
    Disabled
  </a>
</nav>

Styles

Line

Use .nav-line with a .nav element to create a navigation element with underlines.

<ul class="nav nav-line border-bottom">
  <li class="nav-item mr-3">
    <a class="nav-link is-active" href="#">
      Active
    </a>
  </li>
  <li class="nav-item mr-3">
    <a class="nav-link" href="#">
      Link
    </a>
  </li>
  <li class="nav-item mr-3">
    <a class="nav-link" href="#">
      Link
    </a>
  </li>
  <li class="nav-item">
    <a class="nav-link is-disabled" href="#" tabindex="-1" aria-disabled="true">
      Disabled
    </a>
  </li>
</ul>

Tabs

Use .nav-tabs with a .nav element to create a tabbed interface. This is the default style used by the Tabs extension.

<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link is-active" href="#">
      Active
    </a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">
      Link
    </a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">
      Link
    </a>
  </li>
  <li class="nav-item">
    <a class="nav-link is-disabled" href="#" tabindex="-1" aria-disabled="true">
      Disabled
    </a>
  </li>
</ul>

Pills

Use .nav-pills with a .nav element to create a pill-style navigation element. Use border radius utilities to control the rounding of the pills.

<ul class="nav nav-pills">
  <li class="nav-item">
    <a class="nav-link border-radius is-active" href="#">
      Active
    </a>
  </li>
  <li class="nav-item">
    <a class="nav-link border-radius" href="#">
      Link
    </a>
  </li>
  <li class="nav-item">
    <a class="nav-link border-radius" href="#">
      Link
    </a>
  </li>
  <li class="nav-item">
    <a class="nav-link border-radius is-disabled" href="#" tabindex="-1" aria-disabled="true">
      Disabled
    </a>
  </li>
</ul>

Alignment

Horizontal alignment

Change the horizontal alignment of your nav with flexbox utilities.

Use .justify-content-center to position items in the center of the .nav element.

<ul class="nav justify-content-center">
  <li class="nav-item">
    <a class="nav-link is-active" href="#">
      Active
    </a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">
      Link
    </a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">
      Link
    </a>
  </li>
  <li class="nav-item">
    <a class="nav-link is-disabled" href="#" tabindex="-1" aria-disabled="true">
      Disabled
    </a>
  </li>
</ul>

Use .justify-content-end to position items at the end of the .nav element.

<ul class="nav justify-content-end">
  <li class="nav-item">
    <a class="nav-link is-active" href="#">
      Active
    </a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">
      Link
    </a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">
      Link
    </a>
  </li>
  <li class="nav-item">
    <a class="nav-link is-disabled" href="#" tabindex="-1" aria-disabled="true">
      Disabled
    </a>
  </li>
</ul>

Fill and justify

To proportionately fill all available space with your .nav-items, use .nav-fill. Notice that all horizontal space is occupied, but not every nav item has the same width.

<ul class="nav nav-pills nav-fill">
  <li class="nav-item">
    <a class="nav-link is-active" href="#">
      Active
    </a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">
      Much longer nav link
    </a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">
      Link
    </a>
  </li>
  <li class="nav-item">
    <a class="nav-link is-disabled" href="#" tabindex="-1" aria-disabled="true">
      Disabled
    </a>
  </li>
</ul>

When using a <nav>-based navigation, be sure to include .nav-item on the anchors.

<nav class="nav nav-pills nav-fill">
  <a class="nav-item nav-link is-active" href="#">
    Active
  </a>
  <a class="nav-item nav-link" href="#">
    Much longer nav link
  </a>
  <a class="nav-item nav-link" href="#">
    Link
  </a>
  <a class="nav-item nav-link is-disabled" href="#" tabindex="-1" aria-disabled="true">
    Disabled
  </a>
</nav>

For equal-width elements, use .nav-justified. All horizontal space will be occupied by nav links, but unlike the .nav-fill above, every nav item will be the same width.

<ul class="nav nav-pills nav-justified">
  <li class="nav-item">
    <a class="nav-link is-active" href="#">
      Active
    </a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">
      Much longer nav link
    </a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">
      Link
    </a>
  </li>
  <li class="nav-item">
    <a class="nav-link is-disabled" href="#">
      Disabled
    </a>
  </li>
</ul>

As before, when using a <nav>-based navigation, be sure to include .nav-item on the anchors.

Vertical alignment

Use .flex-column to create a vertical nav.

<ul class="nav flex-column">
  <li class="nav-item">
    <a class="nav-link is-active" href="#">
      Active
    </a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">
      Link
    </a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">
      Link
    </a>
  </li>
  <li class="nav-item">
    <a class="nav-link is-disabled" href="#" tabindex="-1" aria-disabled="true">
      Disabled
    </a>
  </li>
</ul>

Use responsive variants like .sm:flex-column to target specific screen sizes.

Questions or feedback about this article? Let us know