Bootstrap Navigation Controls

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 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.

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 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:

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:

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:

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: