• Menu
  • Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

JavaBeat

Java Tutorial Blog

  • Java
    • Java 7
    • Java 8
    • Java EE
    • Servlets
  • Spring Framework
    • Spring Tutorials
    • Spring 4 Tutorials
    • Spring Boot
  • JSF Tutorials
  • Most Popular
    • Binary Search Tree Traversal
    • Spring Batch Tutorial
    • AngularJS + Spring MVC
    • Spring Data JPA Tutorial
    • Packaging and Deploying Node.js
  • About Us
    • Join Us (JBC)
  • Java
    • Java 7
    • Java 8
    • Java EE
    • Servlets
  • Spring Framework
    • Spring Tutorials
    • Spring 4 Tutorials
    • Spring Boot
  • JSF Tutorials
  • Most Popular
    • Binary Search Tree Traversal
    • Spring Batch Tutorial
    • AngularJS + Spring MVC
    • Spring Data JPA Tutorial
    • Packaging and Deploying Node.js
  • About Us
    • Join Us (JBC)

Bootstrap Navigation Controls

June 23, 2014 //  by Sutha Kaliannan//  Leave a Comment

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:

  1. Basic Tab Navigation
  2. Basic Pills Navigation
  3. Justified Navigation
  4. Disabled Links
  5. Dropdowns
  6. Adding Icons

also read:

  • Bootstrap Setup
  • Bootstrap Typography

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 Tab Navigation Demo

Bootstrap  Basic Tab Navigation Picture

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 Basic Pills Navigation Demo

Bootstrap Basic Pills Navigation Picture

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 Justified Navigation Demo

Bootstrap Justfied Navigation Picture

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 Disabled Links Demo

Bootstrap Disabled Links Picture

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 Dropdowns Navigation Demo

Bootstrap Dropdowns Picture

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 Adding Icons Navigation Demo

Bootstrap Adding Icons Picture

Category: BootstrapTag: Bootstrap Components

About Sutha Kaliannan

Previous Post: « Bootstrap Input Groups
Next Post: Grails MVC Tutorial »

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Primary Sidebar

Follow Us

  • Facebook
  • Pinterest

FEATURED TUTORIALS

New Features in Spring Boot 1.4

Difference Between @RequestParam and @PathVariable in Spring MVC

What is new in Java 6.0 Collections API?

The Java 6.0 Compiler API

Introductiion to Jakarta Struts

What’s new in Struts 2.0? – Struts 2.0 Framework

JavaBeat

Copyright © by JavaBeat · All rights reserved
Privacy Policy | Contact