Bootstrap 5 — Navs

Photo by Brian Chan on Unsplash

Bootstrap 5 is in alpha when this is written and it’s subject to change.

Bootstrap is a popular UI library for any JavaScript apps.

In this article, we’ll look at how to add navs with Bootstrap 5.

Navs

Navs are components that let users do navigation around our app.

For example, we can write:

<ul class="nav">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">foo</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">bar</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">baz</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </li>
</ul>

We add the ul element with the .nav class to add the nav.

To add the nav items, we add li s with the .nav-item class to the items.

.nav is display: flex , so nav links behave the same as nav items without the extra markup:

<nav class="nav">
  <a class="nav-link active" aria-current="page" href="#">foo</a>
  <a class="nav-link" href="#">bar</a>
  <a class="nav-link" href="#">baz</a>
  <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</nav>