This tutorial explains all about Bootstrap 4 Nav including Active and Disabled Nav links, Alignments, Pills, Tabs, etc.:
In this Bootstrap 4 nav tutorial, we have covered an introduction to Bootstrap nav, how to create a basic nav, examples of a basic nav, active nav links, disabled nav links, horizontal nav, vertical nav, tabs with dropdowns, toggleable tabs, fill tabs, justified tabs, pills with dropdowns, toggleable pills, fill pills, justified pills.
We have also enlisted some frequently asked questions. Please note that we have used Bootstrap version 4 in all examples.
=> Visit Here To See The Bootstrap Training Series For All
Let’s begin!
Table of Contents:
Bootstrap 4 Nav (nav menu) is a simple horizontal menu that consists of nav components such as tabs and pills. We use navs for easy navigation between pages.
When you compare Bootstrap 3 navs with version 4 navs, version 4 rewrote nav components in flexbox.
The following table summarizes the classes and attributes of Bootstrap 4 that we have used in this tutorial.
Class | Usage |
---|---|
The .nav class | This class is used to build all kinds of Bootstrap navigation components. |
The .nav-item class | This class is used for the proper spacing of list items in the nav. |
The .nav-link class | This class is used to style links in the nav. |
The .active class | This class is used to highlight the current link. |
The .disabled class | This class is used to make a link un-clickable. |
The .justify-content-center class | This class is used to center a nav. |
The .justify-content-end class | This class is used to right-align a nav. |
The .flex-column class | This class is used to create a vertical nav. |
The .nav-tabs class | This class is used to create navigation tabs. |
The .nav-pills class | This class is used to create navigation pills. |
The .nav-fill class | This class allows nav items to fill all horizontal space but does not have the same width. |
The .nav-justified class | This class allows nav items to fill all horizontal space and every nav item has the same width. |
The .tab-content class | This class is used to create togglable tabs. |
The .tab-pane class | This class is also used to create togglable tabs. |
The .fade class | This class is used to add a fading animation effect when navigating. |
Attribute | Usage |
---|---|
The data-toggle="tab" attribute | This attribute is used to create togglable tabs. |
The data-toggle="pill" attribute | This attribute is used to create togglable pills. |
The data-toggle="dropdown" attribute | This attribute is used to create tabs or pills with dropdowns. |
How to create a Basic Nav
There are two methods to create a basic Bootstrap nav.
- Using an <ul> element and <li> elements
- Using a <nav> element
a) Creating a Basic Nav using an <ul> Element and <li> Elements
We need the following classes to create a basic nav using this method.
- The .nav class
- The .nav-item class
- The .nav-link class
Add an <ul> element with the .nav class, followed by the <li> elements with the .nav-item class and add the <a> elements with the .nav-link class inside the <li> elements to create a basic nav.
b) Creating a Basic Nav using a <nav> Element
Similar to the above method, we need the following classes to create a basic nav using this method.
- The .nav class
- The .nav-item class
- The .nav-link class
Add a <nav> element with the .nav class, followed by the <a> elements with the .nav-item class and the .nav-link class to create a basic nav.
Note 1: Both the above methods use the same classes, but different tags/elements.
Note 2: The behavior of nav links in this method is similar to the behavior of nav items in the previous method, but using less markup.
Examples of Basic Navs
In this sub-section, we are going to discuss two basic nav examples. The first example is creating a basic nav using an <ul> element and <li> elements, and the second example is creating a basic nav using the <nav> element.
Example 1:
The below programming code shows an example of a basic nav with an <ul> element and <li> elements. You can try this example by running the below programming code.
<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"> </head> <body> <ul class="nav"> <li class="nav-item"> <a class="nav-link" 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> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"></script> </body> </html>
Example 2:
The below programming code shows an example of a basic nav with the <nav> element. You can try this example by running the below programming code.
<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"> </head> <body> <nav class="nav"> <a class="nav-item nav-link" href="#">Link 1</a> <a class="nav-item nav-link" href="#">Link 2</a> <a class="nav-item nav-link" href="#">Link 3</a> </nav> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"></script> </body> </html>
The below screenshot shows the browser output of the above programming codes (both the above codes show similar outputs).
Active Nav Links
Add the .active class to highlight the current link.
Disabled Nav Links
Add the .disabled class to disable a nav link. The disabled nav link will turn grey and remove the hover effect. Disabled links are also un-clickable.
Examples of Active and Disabled Nav Links
The below programming code shows an example of an active nav link, a default nav link, and a disabled nav link. You can try this example by running the below programming code.
<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"> </head> <body> <nav class="nav"> <a class="nav-item nav-link active" href="#">Active Link</a> <a class="nav-item nav-link" href="#">Default Link</a> <a class="nav-item nav-link disabled" href="#">Disabled Link</a> </nav> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"></script> </body> </html>
The below screenshot shows the browser output of the above programming code
Types of Nav Alignments
Navs can be categorized into two groups based on the alignment. They are,
- Horizontal nav
- Vertical nav
The horizontal navs can be further divided into three categories. They are,
- Left-aligned nav
- Centered nav
- Right-aligned nav
Horizontal Navs
- Left-aligned Navs: By default, navs are left-aligned. Therefore, you do not need any additional classes to left-align a nav.
- Centered Navs: Add the .justify-content-center class to center a nav.
- Right-aligned Navs: Add the .justify-content-end class to right-align a nav.
Vertical Navs
Add the .flex-column class to create a vertical nav.
Examples of Nav Alignments
The below programming code shows the following examples related to nav alignments.
- A left-aligned nav
- A centered nav
- A right-aligned nav
- A vertical nav
You can try this example by running the below programming code.
<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"> </head> <body> <h6>Left-aligned/Default Nav</h6> <nav class="nav"> <a href="#" class="nav-item nav-link">Home</a> <a href="#" class="nav-item nav-link">About Us</a> <a href="#" class="nav-item nav-link">Services</a> </nav> <h6 class="text-center">Centered Nav</h6> <nav class="nav justify-content-center"> <a href="#" class="nav-item nav-link">Home</a> <a href="#" class="nav-item nav-link">About Us</a> <a href="#" class="nav-item nav-link">Services</a> </nav> <h6 class="text-right">Right-aligned Nav</h6> <nav class="nav justify-content-end"> <a href="#" class="nav-item nav-link">Home</a> <a href="#" class="nav-item nav-link">About Us</a> <a href="#" class="nav-item nav-link">Services</a> </nav> <h6>Vertical Nav</h6> <nav class="nav flex-column"> <a href="#" class="nav-item nav-link">Home</a> <a href="#" class="nav-item nav-link">About Us</a> <a href="#" class="nav-item nav-link">Services</a> </nav> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"></script> </body> </html>
The below screenshot shows the browser output of the above programming code.
Bootstrap 4 Tabs
Basic Tabs
Bootstrap tabs are nav components.
Add a <nav> element with the .nav class and the .nav-tabs class, followed by the <a> elements with the .nav-item class and the .nav-link class to create a tabbed navigation interface.
Tabs with Dropdowns
You can create tabs with dropdowns.
In addition to the the .nav class, the .nav-tabs class, the .nav-item class and the .nav-link class, we need the .dropdown class, the .dropdown-toggle class, the .dropdown-menu class, the .dropdown-item class and the data-toggle=”dropdown” attribute to create tabs with dropdowns.
Toggleable Tabs
Toggleable tabs are also known as dynamic tabs.
We use the .tab-content class and the .tab-pane class to create tab panes. Further, we need the data-toggle=”tab” attribute to make the tabs toggleable.
Fill Tabs
Add the .nav-fill class to create filled tabs. The .nav-fill class allows nav items to fill all horizontal space but does not have the same width. Nav items will have different widths based on their content.
Justified Tabs
Add the .nav-justified class to allow nav items to fill all horizontal space and every nav item has the same width.
Examples of Tabs
The below programming code shows the following examples related to tabs.
- Basic tabs
- Tabs with a dropdown
- Toggleable tabs
- Fill tabs
- Justified tabs
You can try this example by running the below programming code.
<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"> </head> <body> <h6>Basic Tabs</h6> <nav class="nav nav-tabs mb-5"> <!--Home is an Active Tab--> <a href="#" class="nav-item nav-link active">Home</a> <a href="#" class="nav-item nav-link">Our Work</a> <a href="#" class="nav-item nav-link">Contact Us</a> </nav> <h6>Tabs with a Dropdown</h6> <nav class="nav nav-tabs mb-5"> <a href="#" class="nav-item nav-link">Home</a> <a href="#" class="nav-item nav-link">Our Work</a> <div class="nav-item dropdown"> <!--A Tab with a Dropdown--> <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">Contact Us</a> <div class="dropdown-menu"> <a href="#" class="dropdown-item">Email</a> <a href="#" class="dropdown-item">Fax</a> <a href="#" class="dropdown-item">Phone</a> </div> </div> </nav> <h6>Toggleable Tabs</h6> <!--Nav Tabs--> <nav class="nav nav-tabs"> <a href="#home" class="nav-item nav-link" data-toggle="tab">Home</a> <a href="#work" class="nav-item nav-link" data-toggle="tab">Our Work</a> <a href="#contact" class="nav-item nav-link" data-toggle="tab">Contact Us</a> </nav> <!--Nav Panes--> <div class="tab-content mb-5"> <!--The Tab Pane with the #home is an Active Tab Pane--> <div class="tab-pane container active" id="home">Sample content 1</div> <div class="tab-pane container fade" id="work">Sample content 2</div> <div class="tab-pane container fade" id="contact">Sample content 3</div> </div> <h6>Fill Tabs</h6> <nav class="nav nav-tabs nav-fill mb-5"> <a href="#" class="nav-item nav-link">Home</a> <a href="#" class="nav-item nav-link">Our Creative Work</a> <!--Contact Us is an Active Tab--> <a href="#" class="nav-item nav-link active">Contact Us</a> </nav> <h6>Justified Tabs</h6> <nav class="nav nav-tabs nav-justified"> <a href="#" class="nav-item nav-link">Home</a> <a href="#" class="nav-item nav-link">Our Creative Work</a> <!--Contact Us is an Active Tab--> <a href="#" class="nav-item nav-link active">Contact Us</a> </nav> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"></script> </body> </html>
The below screenshot shows the browser output of the above programming code.
Bootstrap 4 Pills
Basic Pills
Similar to tabs, pills are also nav components.
Add a <nav> element with the .nav class and the .nav-pills class, followed by the <a> elements with the .nav-item class and the .nav-link class to create a basic pill interface.
Pills with Dropdowns
You can create pills with dropdowns.
In addition to the the .nav class, the .nav-pills class, the .nav-item class and the .nav-link class, we need the .dropdown class, the .dropdown-toggle class, the .dropdown-menu class, the .dropdown-item class and the data-toggle=”dropdown” attribute to create pills with dropdowns.
Toggleable Pills
Toggleable pills are also known as dynamic pills.
We use the .tab-content class and the .tab-pane class to create tab panes. Further, we need the data-toggle=”pill” attribute to make the pills toggleable.
Fill Pills
Add the .nav-fill class to create filled pills. The .nav-fill class allows nav items to fill all horizontal space but does not have the same width. Nav items will have different widths based on their content.
Justified Pills
Similar to justified tabs, add the .nav-justified class to allow nav items to fill all horizontal space, and every nav item has the same width.
Examples of Pills
The below programming code shows the following examples related to pills.
- A basic pill interface
- Pills with a dropdown
- Toggleable pills
- Fill pills
- Justified pills
You can try this example by running the below programming code.
<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"> </head> <body> <h6>Basic Pills</h6> <nav class="nav nav-pills mb-5"> <!--Home is an Active Pill--> <a href="#" class="nav-item nav-link active">Home</a> <a href="#" class="nav-item nav-link">Our Work</a> <a href="#" class="nav-item nav-link">Contact Us</a> </nav> <h6>Pills with a Dropdown</h6> <nav class="nav nav-pills mb-5"> <a href="#" class="nav-item nav-link">Home</a> <a href="#" class="nav-item nav-link">Our Work</a> <div class="nav-item dropdown"> <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">Contact Us</a> <!--Dropdown--> <div class="dropdown-menu"> <a href="#" class="dropdown-item">Email</a> <a href="#" class="dropdown-item">Fax</a> <a href="#" class="dropdown-item">Phone</a> </div> </div> </nav> <h6>Toggleable Pills</h6> <!--Nav Pills--> <nav class="nav nav-pills"> <a href="#home" class="nav-item nav-link" data-toggle="pill">Home</a> <a href="#work" class="nav-item nav-link" data-toggle="pill">Our Work</a> <a href="#contact" class="nav-item nav-link" data-toggle="pill">Contact Us</a> </nav> <!--Tab Panes--> <div class="tab-content mb-5"> <!--The Tab Pane with the #home is an Active Tab Pane--> <div class="tab-pane container active" id="home">Sample content 1</div> <div class="tab-pane container fade" id="work">Sample content 2</div> <div class="tab-pane container fade" id="contact">Sample content 3</div> </div> <h6>Fill Pills</h6> <nav class="nav nav-pills nav-fill mb-5"> <a href="#" class="nav-item nav-link">Home</a> <a href="#" class="nav-item nav-link">Our Creative Work</a> <!--Contact Us is an Active Pill--> <a href="#" class="nav-item nav-link active">Contact Us</a> </nav> <h6>Justified Pills</h6> <nav class="nav nav-pills nav-justified"> <a href="#" class="nav-item nav-link">Home</a> <a href="#" class="nav-item nav-link">Our Creative Work</a> <!--Contact Us is an Active Pill--> <a href="#" class="nav-item nav-link active">Contact Us</a> </nav> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"></script> </body> </html>
The below screenshot shows the browser output of the above programming code.
Frequently Asked Questions
In this section, we are going to look at some of the frequently asked questions (FAQs) of navs.
Q #1) What is a Bootstrap nav?
Answer: It is a simple horizontal menu that consists of nav components such as tabs and pills.
Q #2) What does the nav class do?
Answer: The .nav class is used to build all kinds of navigation components.
Q #3) What are nav links?
Answer: Nav links are the links used in the navigation menu for navigation.
Q #4) How to align a nav to the right?
Answer: Add the .justify-content-end class to align the nav to the right.
Q #5) How to align a nav to the left?
Answer: By default, navs are left-aligned. Therefore, you do not need any additional classes to align the nav to the left.
Q #6) How to make the nav vertical?
Answer: Add the .flex-column class to make the nav vertical.
Conclusion
A nav or a nav menu is a simple horizontal menu. Bootstrap 4 helps to build nav components such as tabs and pills easily and provides a wide range of classes to style the nav components.
=> Check Out The Perfect Bootstrap Training Guide Here