How to Create Bootstrap 5 Navigation?

The nav component in Bootstrap is used to create list of links with different styles. Basically the list links is used as a navigational menu. In this tutorial let us explore different styles of links that can be created with Bootstrap 5 nav component.

Bootstrap 5 Navs Tutorial

1. Creating basic nav links
2. Vertical nav
3. Tabs with nav
4. Adding pills in nav
5. Nav with pills and justified alignment
6. Responsive nav
7. Nav with dropdown menu
8. Nav with vertical tab and pill

1. Basic Nav Links

The default and basic nav will look like below:

The code for the basic nav is as below:

<ul class="nav">
<li class="nav-item">
<a class="nav-link active" href="#">Link 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 3</a>
</li>
</ul>

Below are the classes used in creating default nav component:

• The entire nav is an unordered list using the “.nav” class.
• Each <li> tag represents a nav item using the class “.nav-item”.
• Inside <li> tag, the anchor <a> tag is used to create the link on actual text using “.nav-link” class.

The content of nav can be aligned center and right using additional classes within <ul> tag as below:

• <ul class=”nav justify-content-center”> – for center alignment.
• <ul class=”nav justify-content-end”> – for end or right alignment.
• <ul class=”nav nav-fill”> – fill the full horizontal width.
• <ul class=”nav nav-justified”> – fill the full horizontal width with each nav link has same width.

2. Vertical Nav

You can use “flex-column” class to make the whole nav content to be aligned in vertical links instead of horizontal as shown below:

And the code for creating vertical nav component is below:

<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link active" href="#">Link 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 3</a>
</li>
</ul>

3. Creating Tabs with Nav

You can also easily create tabbed content using “.nav-tabs” class inside <ul> tag like below:

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

The “.nav-tabs” class will convert the default nav into a tab like below:

4. Adding Pills in Nav

You can add pills, box withe primary background color, to the links using “.nav-pills” class.

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

The result on the browser will look like below:

5. Nav with Pills and Justified Alignment

If you want the navigation items to be justified to the full width then add “.nav-fill” class like below:

<ul class="nav nav-pills nav-fill">
<li class="nav-item">
<a class="nav-link active" href="#">Link 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 3</a>
</li>
</ul>

It will produce the following result:

6. Responsive Nav Component

As of now the nav components created are not responsive and you should add additional flexbox utility classes to make it responsive. For example, we can make it flexible from the medium sized devices using “.flex-md-row” class like below:

<ul class="nav nav-pills flex-column flex-md-row">
<li class="nav-item">
<a class="nav-link active" href="#">Link 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 3</a>
</li>
</ul>

7. Adding Dropdown Menu in Nav

Use “.dropdown” class to insert a dropdown and then the menu items using “.dropdown-menu” and “.dropdown-item” classes.

<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link active" href="#">Link 1</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Link 2</a>
<a class="dropdown-item" href="#">Link 3</a>
<a class="dropdown-item" href="#">Link 4</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Link 5</a>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 6</a>
</li>
</ul>

The dropdown nav component with pills will look like below:

8. Nav with Vertical Tabs and Pills

You can also use grid layout and create a vertical tabbed content using nav component with pills.

<div class="row">
<div class="col-3">
<div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist">
  <a class="nav-link active" id="v-pills-tab1-tab" data-toggle="pill" href="#v-pills-tab1" role="tab" aria-controls="v-pills-tab1" aria-expanded="true">TAB 1</a>
  <a class="nav-link" id="v-pills-tab2-tab" data-toggle="pill" href="#v-pills-tab2" role="tab" aria-controls="v-pills-tab2" aria-expanded="true">TAB 2</a>
  <a class="nav-link" id="v-pills-tab3-tab" data-toggle="pill" href="#v-pills-tab3" role="tab" aria-controls="v-pills-tab3" aria-expanded="true">TAB 3</a>
  <a class="nav-link" id="v-pills-tab4-tab" data-toggle="pill" href="#v-pills-tab4" role="tab" aria-controls="v-pills-tab4" aria-expanded="true">TAB 4</a>
</div>
</div>
<div class="col-9">
<div class="tab-content" id="v-pills-tabContent">
  <div class="tab-pane fade show active" id="v-pills-tab1" role="tabpanel" aria-labelledby="v-pills-home-tab">Here is a content for tab 1.</div>
  <div class="tab-pane fade" id="v-pills-tab2" role="tabpanel" aria-labelledby="v-pills-tab2-tab">Here is a content for tab 2.</div>
  <div class="tab-pane fade" id="v-pills-tab3" role="tabpanel" aria-labelledby="v-pills-tab3-tab">Here is a content for tab 3.</div>
  <div class="tab-pane fade" id="v-pills-tab4" role="tabpanel" aria-labelledby="v-pills-tab4-tab">Here is a content for tab 4.</div>
</div>
</div>
</div>

It will produce the following result on the browser:

Checkout tutorial on Bootstrap navbar component to learn more on navbar.

---

---