Navs and Tabs

Navs and Tabs

Navs are navigation components. Use the .nav class on a <ul> and .nav-item / .nav-link on each entry.

Basic nav (pills)

<ul class="nav nav-pills">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
</ul>

Tabs

Use .nav-tabs for a tabbed style:

<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
</ul>

Alignment

• .justify-content-center centers the nav.
• .justify-content-end aligns right.
• .flex-column stacks the nav vertically.

<ul class="nav nav-pills justify-content-center">
  ...
</ul>

Pills with dropdowns

Pills can include dropdowns:

<ul class="nav nav-pills">
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#">Dropdown</a>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">Link 1</a></li>
      <li><a class="dropdown-item" href="#">Link 2</a></li>
    </ul>
  </li>
</ul>

Tabs vs pills

• .nav-tabs looks like tabs in a folder.
• .nav-pills looks like rounded buttons.
• Both use .nav-item and .nav-link.
• .active marks the selected item.

TL;DR

• Use .nav with .nav-item and .nav-link.
• .nav-tabs gives a tabbed look.
• .nav-pills gives a rounded button look.
• .active highlights the current link.
• .justify-content-center centers the nav.