Bootstrap 4 Navs


Horizontal Navs

The .nav class is used to create menus in Bootstrap. By default, it is located horizontally. To create it, follow the steps below:

Example code

<ul class="nav">
<li class="nav-item"><a href="#" class="nav-link">Home</a></li>
<li class="nav-item"><a href="#" class="nav-link">Services</a></li>
<li class="nav-item"><a href="#" class="nav-link">About</a></li>
<li class="nav-item"><a href="#" class="nav-link">Contact Us</a></li>
</ul>

Vertical Navs

If you want to create a vertical menu, just add the .flex-column class to <ul>.

Example code

<ul class="nav flex-column">
<li class="nav-item"><a href="#" class="nav-link">Home</a></li>
<li class="nav-item"><a href="#" class="nav-link">Services</a></li>
<li class="nav-item"><a href="#" class="nav-link">About</a></li>
<li class="nav-item"><a href="#" class="nav-link">Contact Us</a></li>
</ul>

Active and Disabled Items

To highlight an item in navs, you need to add a class with the .active class <a> tag.

To disable or unclickable an item in navs, you need to add a .disabled class <a> to the class of the tag.

Example code

<ul class="nav">
<li class="nav-item"><a href="#" class="nav-link active">Home</a></li>
<li class="nav-item"><a href="#" class="nav-link">Services</a></li>
<li class="nav-item"><a href="#" class="nav-link">About</a></li>
<li class="nav-item"><a href="#" class="nav-link disabled">Contact Us</a></li>
</ul>

Alignment of Navs

If you want to show nav items in the center, you need to add .justify-content-center class.

If you want to show nav items on the right, you need to add .justify-content-end class.

Example code

<!-- centered navs -->
<ul class="nav justify-content-center">

<!-- right aligned navs -->
<ul class="nav justify-content-end">

Nav Tabs

If you want to show the nav menu as tabs, then you need to add .nav-tabs class with .nav class. See examples of togglable tabs at the bottom of this page.

Example code

<ul class="nav nav-tabs">
<li class="nav-item"><a href="#" class="nav-link active">Home</a></li>
<li class="nav-item"><a href="#" class="nav-link">Services</a></li>
<li class="nav-item"><a href="#" class="nav-link">About</a></li>
<li class="nav-item"><a href="#" class="nav-link">Contact Us</a></li>
</ul>

Nav Pills

If you want to show the nav menu as pills (clicking on nav items will make their background-color blue) then you need to add .nav-pills class with .nav class. See examples of togglable pills at the bottom of this page.

Example code

<ul class="nav nav-pills">
<li class="nav-item"><a href="#" class="nav-link active">Home</a></li>
<li class="nav-item"><a href="#" class="nav-link">Services</a></li>
<li class="nav-item"><a href="#" class="nav-link">About</a></li>
<li class="nav-item"><a href="#" class="nav-link">Contact Us</a></li>
</ul>

Justified Navs

If all items in the nav menu are to be of equal width then the .nav-justified class must be added.



Example code

<!-- nav-tabs -->
<ul class="nav nav-tabs nav-justified">

<!-- nav-pills -->
<ul class="nav nav-pills nav-justified">

Navs With Dropdowns



Example code

<!-- nav-tabs -->
<ul class="nav nav-tabs">
<li class="nav-item"><a href="#" class="nav-link active">Home</a></li>
<li class="nav-item dropdown">
<a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">Services</a>
<div class="dropdown-menu">
<a href="#" class="dropdown-item">First item</a>
<a href="#" class="dropdown-item">Second item</a>
<a href="#" class="dropdown-item">Third item</a>
</div>
</li>
<li class="nav-item"><a href="#" class="nav-link">About</a></li>
<li class="nav-item"><a href="#" class="nav-link">Contact Us</a></li>
</ul>

Dynamic/Togglable Tabs and Pills


Home

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed tempor and vitality, so that the labor and sorrow, some important things to do eiusmod.

Services

Over the years, I will come, who will nostrud aliquip out of her the advantage of exercise, so that stimulus efforts if the school district and longevity.

About

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed tempor and vitality, so that the labor and sorrow, some important things to do eiusmod.

Contact

Over the years, I will come, who will nostrud aliquip out of her the advantage of exercise, so that stimulus efforts if the school district and longevity.


Home

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed tempor and vitality, so that the labor and sorrow, some important things to do eiusmod.

Services

Over the years, I will come, who will nostrud aliquip out of her the advantage of exercise, so that stimulus efforts if the school district and longevity.

About

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed tempor and vitality, so that the labor and sorrow, some important things to do eiusmod.

Contact

Over the years, I will come, who will nostrud aliquip out of her the advantage of exercise, so that stimulus efforts if the school district and longevity.

Example code

<!-- dynamic tabs -->
<ul class="nav nav-tabs">
<li class="nav-item"><a href="#Home" data-toggle="tab" class="nav-link active">Home</a></li>
<li class="nav-item"><a href="#Services" data-toggle="tab" class="nav-link">Services</a></li>
<li class="nav-item"><a href="#About" data-toggle="tab" class="nav-link">About</a></li>
<li class="nav-item"><a href="#Contact" data-toggle="tab" class="nav-link">Contact Us</a></li>
</ul>
<div class="tab-content border">
<div class="tab-pane container active" id="Home">........</div>
<div class="tab-pane container" id="Services">........</div>
<div class="tab-pane container" id="About">........</div>
<div class="tab-pane container" id="Contact">.......</div>
</div>