Nav: tabs, pills, and lists
Lightweight defaults Same markup, different classes
All nav components here—tabs, pills, and lists—share the same base markup and styles through the .nav class.
Basic tabs
Take a regular <ul> of links and add .nav-tabs:
<ul class="nav nav-tabs">
<li class="active">
<a href="#">Home</a>
</li>
<li><a href="#">...</a></li>
<li><a href="#">...</a></li>
</ul>
Basic pills
Take that same HTML, but use .nav-pills instead:
<ul class="nav nav-pills">
<li class="active">
<a href="#">Home</a>
</li>
<li><a href="#">...</a></li>
<li><a href="#">...</a></li>
</ul>
Disabled state
For any nav component (tabs, pills, or list), add .disabled for gray links and no hover effects. Links will remain clickable, however, unless you remove the href attribute. Alternatively, you could implement custom JavaScript to prevent those clicks.
<ul class="nav nav-pills"> ... <li class="disabled"><a href="#">Home</a></li> ... </ul>
Component alignment
To align nav links, use the .pull-left or .pull-right utility classes. Both classes will add a CSS float in the specified direction.
Stackable
As tabs and pills are horizontal by default, just add a second class, .nav-stacked, to make them appear vertically stacked.
Stacked tabs
<ul class="nav nav-tabs nav-stacked"> ... </ul>
Stacked pills
<ul class="nav nav-pills nav-stacked"> ... </ul>
Dropdowns
Add dropdown menus with a little extra HTML and the dropdowns JavaScript plugin.
Tabs with dropdowns
<ul class="nav nav-tabs">
<li class="dropdown">
<a class="dropdown-toggle"
data-toggle="dropdown"
href="#">
Dropdown
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<!-- links -->
</ul>
</li>
</ul>
Pills with dropdowns
<ul class="nav nav-pills">
<li class="dropdown">
<a class="dropdown-toggle"
data-toggle="dropdown"
href="#">
Dropdown
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<!-- links -->
</ul>
</li>
</ul>
Nav lists
A simple and easy way to build groups of nav links with optional headers. They're best used in sidebars like the Finder in OS X.
Example nav list
Take a list of links and add class="nav nav-list":
<ul class="nav nav-list"> <li class="nav-header">List header</li> <li class="active"><a href="#">Home</a></li> <li><a href="#">Library</a></li> ... </ul>
Note
For nesting within a nav list, include class="nav nav-list" on any nested <ul>.
Horizontal dividers
Add a horizontal divider by creating an empty list item with the class .divider, like so:
<ul class="nav nav-list"> ... <li class="divider"></li> ... </ul>
Tabbable nav
Bring your tabs to life with a simple plugin to toggle between content via tabs. Bootstrap integrates tabbable tabs in four styles: top (default), right, bottom, and left.
Tabbable example
To make tabs tabbable, create a .tab-pane with unique ID for every tab and wrap them in .tab-content.
I'm in Section 1.
Howdy, I'm in Section 2.
What up girl, this is Section 3.
<div class="tabbable"> <!-- Only required for left/right tabs -->
<ul class="nav nav-tabs">
<li class="active"><a href="#tab1" data-toggle="tab">Section 1</a></li>
<li><a href="#tab2" data-toggle="tab">Section 2</a></li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="tab1">
<p>I'm in Section 1.</p>
</div>
<div class="tab-pane" id="tab2">
<p>Howdy, I'm in Section 2.</p>
</div>
</div>
</div>
Fade in tabs
Requires jQuery plugin
To make tabs fade in, add .fade to each .tab-pane.
All tabbable tabs are powered by our lightweight jQuery plugin. Read more about how to bring tabbable tabs to life on the JavaScript docs page.
Tabbable in any direction
Tabs on the bottom
Flip the order of the HTML and add a class to put tabs on the bottom.
I'm in Section A.
Howdy, I'm in Section B.
What up girl, this is Section C.
<div class="tabbable tabs-below">
<div class="tab-content">
...
</div>
<ul class="nav nav-tabs">
...
</ul>
</div>
Tabs on the left
Swap the class to put tabs on the left.
I'm in Section A.
Howdy, I'm in Section B.
What up girl, this is Section C.
<div class="tabbable tabs-left">
<ul class="nav nav-tabs">
...
</ul>
<div class="tab-content">
...
</div>
</div>
Tabs on the right
Swap the class to put tabs on the right.
I'm in Section A.
Howdy, I'm in Section B.
What up girl, this is Section C.
<div class="tabbable tabs-right">
<ul class="nav nav-tabs">
...
</ul>
<div class="tab-content">
...
</div>
</div>
Navbar
Basic navbar
To start, navbars are static (not fixed to the top) and include support for a project name and basic navigation. Place one anywhere within a .container, which sets the width of your site and content.
<div class="navbar">
<div class="navbar-inner">
<a class="brand" href="#">Title</a>
<ul class="nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
</div>
</div>
Navbar components
Brand
A simple link to show your brand or project name only requires an anchor tag.
<a class="brand" href="#">Project name</a>
Nav links
Nav items are simple to add via unordered lists.
<ul class="nav">
<li class="active">
<a href="#">Home</a>
</li>
<li><a href="#">Link</a></li>
<li><a href="#">Link</a></li>
</ul>
You can easily add dividers to your nav links with an empty list item and a simple class. Just add this between links:
<ul class="nav"> ... <li class="divider-vertical"></li> ... </ul>
Forms
To properly style and position a form within the navbar, add the appropriate classes as shown below. For a default form, include .navbar-form and either .pull-left or .pull-right to properly align it.
<form class="navbar-form pull-left"> <input type="text" class="span2"> <button type="submit" class="btn">Submit</button> </form>
Search form
For a more customized search form, add .navbar-search to the form and .search-query to the input for specialized styles in the navbar.
<form class="navbar-search pull-left"> <input type="text" class="search-query" placeholder="Search"> </form>
Component alignment
Align nav links, search form, or text, use the .pull-left or .pull-right utility classes. Both classes will add a CSS float in the specified direction.
Using dropdowns
Add dropdowns and dropups to the nav with a bit of markup and the dropdowns JavaScript plugin.
<ul class="nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
Account
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
...
</ul>
</li>
</ul>
Visit the JavaScript dropdowns documentation for more markup and information on calling dropdowns.
Text
Wrap strings of text in an element with .navbar-text, usually on a <p> tag for proper leading and color.
Optional display variations
Fixed to top
Add .navbar-fixed-top and remember to account for the hidden area underneath it by adding at least 40px padding to the <body>. Be sure to add this after the core Bootstrap CSS and before the optional responsive CSS.
Fix the navbar to the top or bottom of the viewport with an additional
class on the outermost div, .navbar.
<div class="navbar navbar-fixed-top"> ... </div>
Fixed to bottom
Add .navbar-fixed-bottom instead.
<div class="navbar navbar-fixed-bottom"> ... </div>
Static top navbar
Create a full-width navbar that scrolls away with the page by adding .navbar-static-top. Unlike the .navbar-fixed-top class, you do not need to change any padding on the body.
<div class="navbar navbar-static-top"> ... </div>
Responsive navbar
To implement a collapsing responsive navbar, wrap your navbar content in a containing div, .nav-collapse.collapse, and add the navbar toggle button, .btn-navbar.
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<!-- .btn-navbar is used as the toggle
for collapsed navbar content -->
<a class="btn btn-navbar" data-toggle="collapse"
data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<!-- Be sure to leave the brand out there
if you want it shown -->
<a class="brand" href="#">Project name</a>
<!-- Everything you want hidden at 940px or less,
place within here -->
<div class="nav-collapse collapse">
<!-- .nav, .navbar-search, .navbar-form, etc -->
</div>
</div>
</div>
</div>
Heads up! The responsive navbar requires the collapse plugin and responsive Bootstrap CSS file.
Inverted variation
Modify the look of the navbar by adding .navbar-inverse.
<div class="navbar navbar-inverse"> ... </div>
Breadcrumbs
Examples
A single example shown as it might be displayed across multiple pages.
<ul class="breadcrumb"> <li><a href="#">Home</a> <span class="divider">/</span></li> <li><a href="#">Library</a> <span class="divider">/</span></li> <li class="active">Data</li> </ul>
