Bootstrap 5 — Navs

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>

Available Styles

There are various styles we can apply to navs.

Horizontal Alignment

We can center it with the .justify-content.center class:

<ul class="nav justify-content-center">  
  <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>

Vertical

We can make navs vertical with the flex-column class:

<ul class="nav flex-column">  
  <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>

This can also be done without ul s:

<nav class="nav flex-column">  
  <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>

Tabs

We can make navs display as tabs with the .nav-tabs class:

<ul class="nav nav-tabs">  
  <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>

Pills

To display nav items as buttons, we can use the .nav-pills class:

<ul class="nav nav-pills">  
  <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>

Fill and Justify

We can use the .nav-fill class to make the nav fill the width of the viewport:

<ul class="nav nav-fill">  
  <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 can omit the .nav-item since only .nav-link is required for styling a elements:

<nav class="nav nav-pills nav-fill">  
  <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>

Working with Flex Utilities

We can use flexbox utilities to position and size items:

<nav class="nav nav-pills flex-column flex-sm-row">  
  <a class="flex-sm-fill text-sm-center nav-link active" aria-current="page" href="#">foo</a>  
  <a class="flex-sm-fill text-sm-center nav-link" href="#">bar</a>  
  <a class="flex-sm-fill text-sm-center nav-link" href="#">baz</a>  
  <a class="flex-sm-fill text-sm-center nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>  
</nav>

We added the flex-column and flex-sm-row classes to make the items responsive.

Also, we have the flex-sm-fill and text-sm-center classes to fill the width and center the text when the screen is sm or narrower.

Conclusion

We can add navs to add navigation to our app.

We can arrange various items in various ways.