Menus

In HTML, a menu is often defined in an unordered list <ul> (and styled afterwards), like this:

Inline List

In HTML, a menu is often defined in an unordered list <ul> (and styled afterwards), like this:

Tabs With Dropdown Menu

The following example adds a dropdown menu to "Menu 1":

Pills

Pills are created with <ul class="nav nav-pills">. Also mark the current page with <li class="active">:

Vertical Pills

Pills can also be displayed vertically. Just add the .nav-stacked class:

Pills With Dropdown Menu

The following example adds a dropdown menu to "Menu 1":

Centered Tabs and Pills

To center/justify the tabs and pills, use the .nav-justified class.

Toggleable / Dynamic Tabs

To make the tabs toggleable, add the data-toggle="tab" attribute to each link. Then add a .tab-pane class with a unique ID for every tab and wrap them inside a <div> element with class .tab-content. If you want the tabs to fade in and out when clicking on them, add the .fade class to .tab-pane:

Home

Some content here.

Menu 1

Some content here.

Menu 2

Some content here.

Default Tab

Custom Tab