Bootstrap Navs and Tabs
Bootstrap 5 Navs and Tabs component provides us a very easy and quick way to add navigations within a web page. The .nav is the base component build with flexbox to provide a strong foundation to build all types of navigation components. The nav components can be used to add a list of links to browse to other pages within the website.
The Basic Nav
- The basic nav can be designed with the .nav base class.
- The items can be added within the .nav-item class.
- To add links within the item class use .nav-link class.
- To convey active links to assistive technologies like screen readers use an aria-current attribute with value as a page for the current page or true if the current item is set.
- The elements can be changed from <ul> to <ol>as per the usage. But the class remains unchanged. You can also add items within the <nav> element.
Example: Adding base nav to an unordered list
Here, we have used an unordered list to create a nav component. The .active class is added to the first link to make a link active.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<ul class="nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
</div>
</body>
</html>
Output:
Here is the output of the above program.
Horizontal Alignment
We can place the nav element to the left, right, or center of the viewport. By default .nav class is aligned on the left side of the web page. But we can change this alignment using the flexbox utility class.
Example: Changing the horizontal alignment of the nav component
Add .justify-content-center to .nav class to center align the nav component. To align it to the right side of the page use the .justify-content-end class. Here is an example to show both types of alignment.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>
</head>
<body>
<ul class="nav justify-content-center bg-light">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Active Link</a>
</li>
<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 disabled" href="#" tabindex="-1" aria-disabled="true">Disabled Link</a>
</li>
</ul>
<ul class="nav justify-content-end bg-info">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Active Link</a>
</li>
<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 disabled" href="#" tabindex="-1" aria-disabled="true">Disabled Link</a>
</li>
</ul>
</body>
</html>
Output:
Here is the output of the above program.
Vertical Nav component
By default, the Nav component is aligned horizontally. But we can also align it vertically. Use the .flex-column utility to vertically align the nav component. You can place the Nav component according to the size of the viewport too. Use the responsive version of the flex utility class.
Example: Creating a vertical Nav component
Here, we have created a Vertical nav component using the <nav> element. The <nav> element do not require .nav-item class to add items to the nav component.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>
</head>
<body>
<nav class="nav flex-column">
<a class="nav-link active" aria-current="page" href="#">Active Link</a>
<a class="nav-link" href="#">Link 1</a>
<a class="nav-link" href="#">Link 2</a>
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled Link</a>
</nav>
</body>
</html>
Output:
Here is the output of the above program.m
Tabs
- The tabs are used to create a tabbed interface within the nav component.
- Use .nav-tabs to add tabbed nav component.
- We can activate this tab navigation via data attributes like data-bs-toggle="tab". Use this data attribute on .nav-tabs.
- Add unique names to id for each item within <button> element and add .data-bs-target attribute .
- The contents of tabs are added within .tab-content class . This should be defined under <div> element in a separate block.
- Add content for each tab within the .tab-pane class followed by attributes like role="tab-pane" and some id.
- The aria-labelledby attribute is added under .tab-pane which points to the id of <button> element.
- Add .active attribute under any .tab-pane item to activate it.
Example: Create a tab using nav component
Here, we have created a tab using the nav component. We have also added content to the tab. We have used data attributes to toggle these tabs.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>
</head>
<body>
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home" type="button" role="tab" aria-controls="home" aria-selected="true">Home</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile" type="button" role="tab" aria-controls="profile" aria-selected="false">Profile</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="contact-tab" data-bs-toggle="tab" data-bs-target="#contact" type="button" role="tab" aria-controls="contact" aria-selected="false">Contact</button>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">Here we are adding contents to the tab components. </div>
<div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">We can make them collapsable using data attributes</div>
<div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">Button should be used instaed of links</div>
</div>
</body>
</html>
Output:
Here is the output of the program.
Pills
As we have created tabs, similarly we can create pills also. Pills are quasi-navigation components that can highly improve website clarity and increase user experience. Just replace .nav-tab to .nav-pill within .nav class.
Example: Create a pill using the nav component
Here in this example, we have just shown how we can create a pill using nav components.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<ul class="nav nav-pills">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Active</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
</div>
</body>
</html>
Output:
Here is the output of the above program
Fill and Justify
The nav components can be filled within the entire available space using two modifier classes. Use .nav-fill to fill the spaces proportionately whereas use .nav-justified to fill the space with equal with for each element.
Example: Using Fill and Justify to nav component
Here, we have used the .nav-justified class to the <nav> element to show how we can fill the list to the entire space. You can use the other class and see the difference between them.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>
</head>
<body>
<div class="container mt-3">
<nav class="nav nav-pills nav-justified">
<a class="nav-link active" aria-current="page" href="#">Active</a>
<a class="nav-link" href="#">Link within link</a>
<a class="nav-link" href="#">Link 2</a>
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</nav>
<div>
</body>
</html>
Output:
Here is the output of the above program.
Conclusion
So here we have learned the different usage of nav components within the web page. Use the nav component as a list of links, pills, or tabs. Further, we can align nav elements to left, right, or center. Nav components can be filled within the entire available space. All these can be achieved using some modifiers and utility classes available in bootstrap 5.
