All nav components here—tabs, pills, and lists—share the same base markup and styles through the .nav class.
Tabs and pills in Bootstrap are built on a <ul> with the same core HTML, a list of links. Swap between tabs or pills with only a class.
Both options are great for sub-sections of content or navigating between pages of related content.
+Take a regular <ul> of links and add .tabs:
+<ul class="nav tabs"> + <li class="active"> + <a href="#">Home</a> + </li> + <li><a href="#">...</a></li> + <li><a href="#">...</a></li> +</ul> ++
Take that same HTML, but use .pills instead:
+<ul class="nav pills"> + <li class="active"> + <a href="#">Home</a> + </li> + <li><a href="#">...</a></li> + <li><a href="#">...</a></li> +</ul> ++
As tabs and pills are horizontal by default, just add a second class, .stacked, to make them appear vertically stacked.
+<ul class="nav tabs stacked"> + ... +</ul> ++
+<ul class="nav pills stacked"> + ... +</ul> ++
Dropdown menus in Bootstrap tabs and pills are super easy and require only a little extra HTML and a lightweight jQuery plugin.
+Head over to the Javascript page to read the docs on initializing dropdowns in Bootstrap.
++<ul class="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> ++
+<ul class="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 provide 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.
+Structurally, they're built on the same core nav styles as tabs and pills, so usage and customization are straightforward.
++<ul class="nav list"> + <li class="nav-header"> + List header + </li> + <li class="active"> + <a href="#">Home</a> + </li> + <li> + <a href="#">Library</a> + </li> + ... +</ul> ++
As mentioned above, you can bring your tabs to life with a simple plugin. Here we have integrated all four variations of the tabs—default (top), right, bottom, left—with example tab areas.
+ +Oh hai #1!
+Oh hai #2!
+Oh hai #3!
+Oh hai #4!
+Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas sed diam eget risus varius blandit sit amet non magna. Vestibulum id ligula porta felis euismod semper.
+Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas sed diam eget risus varius blandit sit amet non magna. Vestibulum id ligula porta felis euismod semper.
+Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas sed diam eget risus varius blandit sit amet non magna. Vestibulum id ligula porta felis euismod semper.
+Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas sed diam eget risus varius blandit sit amet non magna. Vestibulum id ligula porta felis euismod semper.
+Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas sed diam eget risus varius blandit sit amet non magna. Vestibulum id ligula porta felis euismod semper.
+Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas sed diam eget risus varius blandit sit amet non magna. Vestibulum id ligula porta felis euismod semper.
+Ultra simplistic and minimally styled pagination inspired by Rdio. The large block is hard to miss, easily scalable, and provides large click areas.
++<div class="pagination"> + <ul> + <li class="prev disabled"><a href="#">← Previous</a></li> + <li class="active"><a href="#">1</a></li> + <li><a href="#">2</a></li> + <li><a href="#">3</a></li> + <li><a href="#">4</a></li> + <li><a href="#">5</a></li> + <li class="next"><a href="#">Next →</a></li> + </ul> +</div> ++
Create simple secondary navigation with a <ul>. Swap between tabs or pills by adding the appropriate class.
Great for sub-sections of content like our account settings pages and user timelines for toggling between pages of like content. Available in tabbed or pill styles.
-Tabs can be used as regular navigation (loading external pages in the same tab) or as tabbable content areas for swapping out panes of content. We have a tabs plugin that can be used to integrate the latter.
- --<ul class="tabs"> - <li class="active"><a href="#">Home</a></li> - <li><a href="#">Profile</a></li> - <li><a href="#">Messages</a></li> - <li><a href="#">Settings</a></li> - <li><a href="#">Contact</a></li> -</ul> --
As mentioned above, you can bring your tabs to life with a simple plugin. Here we have integrated all four variations of the tabs—default (top), right, bottom, left—with example tab areas.
- -Oh hai #1!
-Oh hai #2!
-Oh hai #3!
-Oh hai #4!
-Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas sed diam eget risus varius blandit sit amet non magna. Vestibulum id ligula porta felis euismod semper.
-Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas sed diam eget risus varius blandit sit amet non magna. Vestibulum id ligula porta felis euismod semper.
-Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas sed diam eget risus varius blandit sit amet non magna. Vestibulum id ligula porta felis euismod semper.
-Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas sed diam eget risus varius blandit sit amet non magna. Vestibulum id ligula porta felis euismod semper.
-Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas sed diam eget risus varius blandit sit amet non magna. Vestibulum id ligula porta felis euismod semper.
-Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Maecenas sed diam eget risus varius blandit sit amet non magna. Vestibulum id ligula porta felis euismod semper.
-Oh hai #1!
-Oh hai #2!
-Oh hai #3!
-Oh hai #4!
-In addition to tabs, we have pills! Though a bit more limited in functionality, they share much of the same markup.
--<ul class="pills"> - <li class="active"><a href="#">Home</a></li> - <li><a href="#">Profile</a></li> - <li><a href="#">Messages</a></li> - <li><a href="#">Settings</a></li> - <li><a href="#">Contact</a></li> -</ul> --
With a pill-style nav, you can also stack the list items to have a simple sidebar. We don't offer left or right aligned versions here because that's easy enough to customize based on your own needs
- -Ultra simplistic and minimally styled pagination inspired by Rdio. The large block is hard to miss, easily scalable, and provides large click areas.
--<div class="pagination"> - <ul> - <li class="prev disabled"><a href="#">← Previous</a></li> - <li class="active"><a href="#">1</a></li> - <li><a href="#">2</a></li> - <li><a href="#">3</a></li> - <li><a href="#">4</a></li> - <li><a href="#">5</a></li> - <li class="next"><a href="#">Next →</a></li> - </ul> -</div> --
<span class="caret"></span> to show the dropdown arrow.nav, on their <ul>.nav.stacked to the <ul>