Bootstrap nav tabs and nav pills are the easiest ways to create simple navigation menus and dropdown menus. You can create navigation menus using the <ul> tag 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.

Output

Create Bootstrap Nav Tabs with Dropdown Menu

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.

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.

Output

Create Bootstrap Nav Pill with Dropdown Menu

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.

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.

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.

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.

Output

Reference

Getbootstrap Doc

Leave a Reply

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