Bootstrap Nav Tabs and Pills

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.

Test it Live

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.

Test it Live

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.

Test it Live

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.

Test it Live

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

Test it Live

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.

Test it Live

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.

Test it Live

Output