Bootstrap nav tabs and pills are the easiest ways to create simple navigation menus and dropdown menus. You can create navigation menus using the <ul> element and Bootstrap classes.
Learn below examples to create a navigational menu using the tabs and the pills.
Create Bootstrap Nav Tabs
To create a nav tab using bootstrap, you have to use the class .nav and nav-tabs as the class of the <ul> tag with list of link items.
|
1 2 3 4 5 |
<ul class="nav nav-tabs"> <li class="active"><a href="#.">Home</a></li> <li><a href="#.">About</a></li> <li><a href="#.">Contact</a></li> </ul> |
Output
Nav Tabs with Dropdown Menu in Bootstrap
To create a nav tab with the Bootstrap dropdown menus, you have to use the above given example.
Now, add a list item with class .dropdown and inside the list item put anchor link or button type with class .dropdown-toggle and attribute data-toggle="dropdown". Also, add a sub unordered list items with the class .dropdown-menu.
See the example below to create a nav tab with dropdown list.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<ul class="nav nav-tabs"> <li class="active"><a href="#.">Home</a></li> <li class="dropdown"> <a href="#" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Tutorial <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">PHP</a></li> <li><a href="#">HTML</a></li> <li><a href="#">jQuery</a></li> <li><a href="#">Gallery</a></li> </ul> </li> <li><a href="#.">About</a></li> <li><a href="#.">Contact</a></li> </ul> |
Output
Create Bootstrap Nav Pills
To create a nav pills, you have to use the bootstrap classes .nav and nav-pills as the class of the <ul> tag with a list of link items.
|
1 2 3 4 5 |
<ul class="nav nav-pills"> <li class="active"><a href="#.">Home</a></li> <li><a href="#.">About</a></li> <li><a href="#.">Contact</a></li> </ul> |
Output
Nav Pills with Dropdown Menu in Bootstrap
Follow the same procedure as given above and replace the class .nav-tabs with the class .nav-pills. The nav pills showing the same menu items, the only difference is the background color of the active link.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<ul class="nav nav-pills"> <li class="active"><a href="#.">Home</a></li> <li class="dropdown"> <a href="#" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Tutorial <span class="caret"></span></a> <ul class="dropdown-menu"> <li><a href="#">PHP</a></li> <li><a href="#">HTML</a></li> <li><a href="#">jQuery</a></li> <li><a href="#">Gallery</a></li> </ul> </li> <li><a href="#.">About</a></li> <li><a href="#.">Contact</a></li> </ul> |
Output
Justified Bootstrap Nav Tabs and Pills
A justified nav tabs and nav-pill displays the menu items with the stretched same width and size of the list items. To create a justified nav tabs and pill, you have to add the class .nav-justified with the class .nav-tabs or .nav-pills.
Justified Bootstap Nav Tabs and Pills
|
1 2 3 4 5 6 7 8 9 10 |
<ul class="nav nav-tabs nav-justified"> <li class="active"><a href="#.">Home</a></li> <li><a href="#.">About</a></li> <li><a href="#.">Contact</a></li> </ul> <ul class="nav nav-pills nav-justified"> <li class="active"><a href="#.">Home</a></li> <li><a href="#.">About</a></li> <li><a href="#.">Contact</a></li> </ul> |
Output
Disable Bootstrap Nav Tabs links
To disable a list item of nav tabs or nav-pills, you have to use the class .disabled as the class of the list items. You can also use this class with the sub list items, to make them disabled.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<ul class="nav nav-tabs"> <li class="active"><a href="#.">Home</a></li> <li class="dropdown"> <a href="#" class="btn btn-default dropdown-toggle" data-toggle="dropdown">Tutorial <span class="caret"></span></a> <ul class="dropdown-menu"> <li class="disabled"><a href="#">PHP</a></li> <li><a href="#">HTML</a></li> <li><a href="#">jQuery</a></li> <li class="disabled"><a href="#">Gallery</a></li> </ul> </li> <li class="disabled"><a href="#.">About</a></li> <li><a href="#.">Contact</a></li> </ul> |
Output
See the above example and hover over the disabled list items. It will not allow you to click on them and appear as a disabled list item.
Vertically Stacked Bootstrap Nav Pills
Nav pill and tabs are the horizontally aligned menu items. However, if you want to convert them to vertically aligned, you need to just add the class .nav-stacked to the class .nav and .nav-pills.
|
1 2 3 4 5 |
<ul class="nav nav-pills nav-stacked"> <li class="active"><a href="#.">Home</a></li> <li><a href="#.">About</a></li> <li><a href="#.">Contact</a></li> </ul> |
Output