The general term navigation refers to the process of navigation information resources in the World Wide Web. The Bootstrap provides a way to create nav components like basic tabs navigation, pills based navigation, vertical or stacked based navigation, tab and pills based dropdown which share the same markup and styles through the .nav class.
The list of navigation controls provided in this tutorial are:
- Basic Tab Navigation
- Basic Pills Navigation
- Justified Navigation
- Disabled Links
- Dropdowns
- Adding Icons
also read:
The below examples shows the various techniques used for implementing the navigation controls in Bootstrap. If you have any questions about bootstrap navigation, please write it in the comments section.
Bootstrap Navigation Controls
<!DOCTYPE html> <head> <title>Bootstrap Example</title> <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>Basic Tab Navigation</h2> <ul class="nav nav-tabs"> <li class="active"><a href="#">Home</a></li> <li><a href="#">About Us</a></li> <li><a href="#">Services</a></li> <li><a href="#">Contact Us</a></li> <li><a href="#">Sign In</a></li> </ul> </div> </body> </html>
Above script uses .nav-tabs class which is used to create tab based navigation along with the base class nav . The Bootstrap supports the active class for navbars. So every HTML page need to add the active class to the link of the current page.
Bootstrap Basic Pills Navigation
We can create basic pill based navigation with Bootstrap, by using the class .nav-pills instead of using .nav-tabs class. The following is an example:
<!DOCTYPE html> <head> <title>Bootstrap Example</title> <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>Basic Pills Navigation</h2> <ul class="nav nav-pills"> <li class="active"><a href="#">Home</a></li> <li><a href="#">About Us</a></li> <li><a href="#">Services</a></li> <li><a href="#">Contact Us</a></li> <li><a href="#">Sign In</a></li> </ul> </div> </body> </html>
Bootstrap Justified Navigation
We could make equal width of tabs or pills with the equal width of their parent screen by using the Bootstrap’s class .nav-justified. We use this class along with .nav nav-tabs or .nav nav-pills classes to justify the nav links on the web page. The following is an example:
<!DOCTYPE html> <head> <title>Bootstrap Example</title> <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>Justified Navigation</h2> <ul class="nav nav-tabs nav-justified"> <li class="active"><a href="#">Home</a></li> <li><a href="#">About Us</a></li> <li><a href="#">Services</a></li> <li><a href="#">Contact Us</a></li> <li><a href="#">Sign In</a></li> </ul><br><br> <ul class="nav nav-pills nav-justified"> <li class="active"><a href="#">Home</a></li> <li><a href="#">About Us</a></li> <li><a href="#">Services</a></li> <li><a href="#">Contact Us</a></li> <li><a href="#">Sign In</a></li> </ul> </div> </body> </html>
Bootstrap Disabled Links
It’s possible to disable the link on tab or pills navigation by using the Bootstrap’s class .disabled . When an element is disabled, it appears dimmed and does not respond to user input. It will display with gray links and also disables the hover effect on that link. The following is an example:
<!DOCTYPE html> <head> <title>Bootstrap Example</title> <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>Justified Navigation</h2> <ul class="nav nav-tabs"> <li class="active"><a href="#">Home</a></li> <li><a href="#">About Us</a></li> <li><a href="#">Services</a></li> <li class="disabled"><a href="#">Contact Us</a></li> <li><a href="#">Sign In</a></li> </ul><br><br> <ul class="nav nav-pills"> <li class="active"><a href="#">Home</a></li> <li><a href="#">About Us</a></li> <li class="disabled"><a href="#">Services</a></li> <li><a href="#">Contact Us</a></li> <li><a href="#">Sign In</a></li> </ul> </div> </body> </html>
Bootstrap Dropdowns
We can create tab based or pills based dropdown navigation by using Bootstrap. The drop down menu appears when clicking on a button or text selection which allows the user to choose a single value. We use the .dropdown-menu class in conjunction with some data attributes to trigger an unordered list. The following is an example:
<!DOCTYPE html>
<head>
<title>Bootstrap Example</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Dropdowns with Tabs</h2>
<ul class="nav nav-tabs">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Services<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Service 1</a></li>
<li><a href="#">Service 2</a></li>
<li><a href="#">Service 3</a></li>
<li class="divider"></li>
<li><a href="#">Service 4</a></li>
</ul>
</li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">Sign In</a></li>
</ul><br><br>
<h2>Dropdowns with Pills</h2>
<ul class="nav nav-pills">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Services<span class="caret"></span></a>
<ul class="dropdown-menu">
<li><a href="#">Service 1</a></li>
<li><a href="#">Service 2</a></li>
<li><a href="#">Service 3</a></li>
<li class="divider"></li>
<li><a href="#">Service 4</a></li>
</ul>
</li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">Sign In</a></li>
</ul>
</div>
</body>
</html>
As shown in the above script, we just wrap the dropdown-menu class within the .dropdown class. Using dropdown plug-in, we have created dropdown menu by using base class navigation nav-tabs and nav-pills. The anchor element uses dropdown-toggle class and data-toggle attribute which displays the options when user activates drop down box.
Bootstrap Adding Icons
Now days, font icons are becoming more popular for better user experience. Bootstrap provides Glyphicons which is a collection of monochromatic icons and symbols based on CSS sprites, in which we can create icons of any color just applying the CSS color property on the specified element. Bootstrap allows adding icons to tabs and pills based navigation to make more attractive. The following is an example:
<!DOCTYPE html> <head> <title>Bootstrap Example</title> <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h2>Adding Icons to Tabs and Pills Nav</h2> <ul class="nav nav-tabs"> <li class="active"><a href="#"><span class="glyphicon glyphicon-home"></span>Home</a></li> <li><a href="#"><span class="glyphicon glyphicon-user"></span>Profile</a></li> <li><a href="#"><span class="glyphicon glyphicon-envelope"></span>Messages</a></li> <li><a href="#"><span class="glyphicon glyphicon-earphone"></span>Contact Us</a></li> </ul><br><br> <ul class="nav nav-pills"> <li class="active"><a href="#"><span class="glyphicon glyphicon-home"></span>Home</a></li> <li><a href="#"><span class="glyphicon glyphicon-user"></span>Profile</a></li> <li><a href="#"><span class="glyphicon glyphicon-envelope"></span>Messages</a></li> <li><a href="#"><span class="glyphicon glyphicon-earphone"></span>Contact Us</a></li> </ul> </div> </body> </html>
Bootstrap Input Groups