Navigation 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 pills are horizontal by default, just add a second class, .nav-stacked, to make them appear vertically stacked.

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.

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

To make tabs fade in, add .fade to each .tab-pane.

Requires jQuery plugin

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.

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="#">NICE</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

Fix the navbar to the top or bottom of the viewport with an additional class on the outermost div, .navbar.

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.

    <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>

Examples

A single example shown as it might be displayed across multiple pages.

  <ul class="breadcrumb">
    <li><a href="#">Home</a> <span class="divider icon-chevron-right"></span></li>
    <li><a href="#">Library</a> <span class="divider icon-chevron-right"></span></li>
    <li class="active">Data</li>
  </ul>

Wizard steps

Create a simple wizard style step counter with some additional markup and classname

  <ul class="breadcrumb breadcrumb-steps steps4">
    <li class="completed"><span class="counter">1.</span> Start <span class="divider"></span></li>
    <li class="active"><span class="counter">2.</span> Next <span class="divider"></span></li>
      ...
    <li><span class="counter">3.</span> Finish</li>
  </ul>

This form of breadcrumb show the topology of an article and has the added advantage of collapsing when viewed on tablet devices

  <ul class="breadcrumb breadcrumb-stack in collapse">
    <li><a href="#">Home</a> <span class="divider"></span></li>
    <li><a href="#">Section</a> <span class="divider"></span></li>
    ...
    <li class="active"><a href="#">Parent</a>
      <a href="#stacked-nav" class="toggle icon-caret-down" data-toggle="stack"></a>
    </li>
  </ul>

Standard pager

Simple set of page links with additional navigation links if desired, click areas are large for mobile and touch enabled devices.

    <div class="pager">
      <ul>
        <li><a href="#">Prev</a></li>
        <li><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><a href="#">Next</a></li>
      </ul>
    </div>

Options

Disabled and active states

Links are customizable for different circumstances. Use .disabled for unclickable links and .active to indicate the current page.

    <div class="pager">
      <ul>
        <li class="disabled"><a href="#">&laquo;</a></li>
        <li class="active"><a href="#">1</a></li>
        ...
      </ul>
    </div>

You can optionally swap out active or disabled anchors for spans to remove click functionality while retaining intended styles.

    <div class="pager">
      <ul>
        <li class="disabled"><span>&laquo;</span></li>
        <li class="active"><span>1</span></li>
        ...
      </ul>
    </div>

Sizes

Fancy larger or smaller pager? Add .pager-large, .pager-small, or .pager-mini for additional sizes.

    <div class="pager pager-large">
      <ul>
        ...
      </ul>
    </div>
    <div class="pager">
      <ul>
        ...
      </ul>
    </div>
    <div class="pager pager-small">
      <ul>
        ...
      </ul>
    </div>
    <div class="pager pager-mini">
      <ul>
        ...
      </ul>
    </div>

Alignment

Add one of two optional classes to change the alignment of pager links: .pager-centered and .pager-right.

    <div class="pager pager-centered">
      ...
    </div>

    <div class="pager pager-right">
      ...
    </div>

pagination

Quick previous and next links for simple pager implementations with light markup and styles. It's great for simple sites like blogs or magazines.

Default example

By default, the pagination centers links.

    <ul class="pagination">
      <li><a href="#">Previous</a></li>
      <li><a href="#">Next</a></li>
    </ul>

Aligned links

Alternatively, you can align each link to the sides:

Older
Newer

    <ul class="pagination">
      <li class="previous">
        <a href="#"><i class="icon-chevron-left"></i> Older</a>
      </li>
      <li class="next">
        <a href="#">Newer <i class="icon-chevron-right"></i></a>
      </li>
    </ul>

Optional disabled state

pagination links also use the general .disabled utility class from the pager.

Older
Newer

    <ul class="pagination">
      <li class="previous disabled">
        <a href="#"><i class="icon-chevron-left"></i> Older</a>
      </li>
      ...
    </ul>

Example

Toggleable, contextual menu for displaying lists of links. Made interactive with the dropdown JavaScript plugin.

    <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
      <li class="nav-header">Menu Title</li>
      <li><a tabindex="-1" href="#">Action</a></li>
      <li><a tabindex="-1" href="#">Another action</a></li>
      <li><a tabindex="-1" href="#">Something else here</a></li>
    </ul>

Markup

Looking at just the dropdown menu, here's the required HTML. You need to wrap the dropdown's trigger and the dropdown menu within .dropdown, or another element that declares position: relative;. Then just create the menu.

    <div class="dropdown">
      <!-- Link or button to toggle dropdown -->
      <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
        <li class="nav-header">Menu Title</li>
        <li><a tabindex="-1" href="#">Action</a></li>
        <li><a tabindex="-1" href="#">Another action</a></li>
        <li><a tabindex="-1" href="#">Something else here</a></li>
      </ul>
    </div>

Options

Align menus to the right and add include additional levels of dropdowns.

Aligning the menus

Add .pull-right to a .dropdown-menu to right align the dropdown menu.

    <ul class="dropdown-menu pull-right" role="menu" aria-labelledby="dLabel">
      ...
    </ul>

Disabled menu options

Add .disabled to a <li> in the dropdown to disable the link.

    <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu">
      <li><a tabindex="-1" href="#">Regular link</a></li>
      <li class="disabled"><a tabindex="-1" href="#">Disabled link</a></li>
      <li><a tabindex="-1" href="#">Another link</a></li>
    </ul>

Sub menus on dropdowns

Add an extra level of dropdown menus, appearing on hover like those of OS X, with some simple markup additions. Add .dropdown-submenu to any li in an existing dropdown menu for automatic styling.

Default

Dropup

Left submenu

    <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
      ...
      <li class="dropdown-submenu">
        <a tabindex="-1" href="#">More options</a>
        <ul class="dropdown-menu">
          ...
        </ul>
      </li>
    </ul>

Examples

Add dropdown menus to nearly anything with this simple plugin, including the navbar, tabs, and pills.

Within a navbar

Within tabs

Usage

Via data attributes

Add data-toggle="dropdown" to a link or button to toggle a dropdown.

    <div class="dropdown">
      <a class="dropdown-toggle" data-toggle="dropdown" href="#">Dropdown trigger</a>
      <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
        ...
      </ul>
    </div>

To keep URLs intact, use the data-target attribute instead of href="#".

    <div class="dropdown">
      <a class="dropdown-toggle" id="dLabel" role="button" data-toggle="dropdown" data-target="#" href="/page.html">
        Dropdown
        <b class="caret"></b>
      </a>
      <ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
        ...
      </ul>
    </div>

Via JavaScript

Call the dropdowns via JavaScript:

$('.dropdown-toggle').dropdown()

Options

None

Methods

$().dropdown('toggle')

A programmatic api for toggling menus for a given navbar or tabbed navigation.

Example in navbar

The ScrollSpy plugin is for automatically updating nav targets based on scroll position. Scroll the area below the navbar and watch the active class change. The dropdown sub items will be highlighted as well.

@fat

Ad leggings keytar, brunch id art party dolor labore. Pitchfork yr enim lo-fi before they sold out qui. Tumblr farm-to-table bicycle rights whatever. Anim keffiyeh carles cardigan. Velit seitan mcsweeney's photo booth 3 wolf moon irure. Cosby sweater lomo jean shorts, williamsburg hoodie minim qui you probably haven't heard of them et cardigan trust fund culpa biodiesel wes anderson aesthetic. Nihil tattooed accusamus, cred irony biodiesel keffiyeh artisan ullamco consequat.

@mdo

Veniam marfa mustache skateboard, adipisicing fugiat velit pitchfork beard. Freegan beard aliqua cupidatat mcsweeney's vero. Cupidatat four loko nisi, ea helvetica nulla carles. Tattooed cosby sweater food truck, mcsweeney's quis non freegan vinyl. Lo-fi wes anderson +1 sartorial. Carles non aesthetic exercitation quis gentrify. Brooklyn adipisicing craft beer vice keytar deserunt.

one

Occaecat commodo aliqua delectus. Fap craft beer deserunt skateboard ea. Lomo bicycle rights adipisicing banh mi, velit ea sunt next level locavore single-origin coffee in magna veniam. High life id vinyl, echo park consequat quis aliquip banh mi pitchfork. Vero VHS est adipisicing. Consectetur nisi DIY minim messenger bag. Cred ex in, sustainable delectus consectetur fanny pack iphone.

two

In incididunt echo park, officia deserunt mcsweeney's proident master cleanse thundercats sapiente veniam. Excepteur VHS elit, proident shoreditch +1 biodiesel laborum craft beer. Single-origin coffee wayfarers irure four loko, cupidatat terry richardson master cleanse. Assumenda you probably haven't heard of them art party fanny pack, tattooed nulla cardigan tempor ad. Proident wolf nesciunt sartorial keffiyeh eu banh mi sustainable. Elit wolf voluptate, lo-fi ea portland before they sold out four loko. Locavore enim nostrud mlkshk brooklyn nesciunt.

three

Keytar twee blog, culpa messenger bag marfa whatever delectus food truck. Sapiente synth id assumenda. Locavore sed helvetica cliche irony, thundercats you probably haven't heard of them consequat hoodie gluten-free lo-fi fap aliquip. Labore elit placeat before they sold out, terry richardson proident brunch nesciunt quis cosby sweater pariatur keffiyeh ut helvetica artisan. Cardigan craft beer seitan readymade velit. VHS chambray laboris tempor veniam. Anim mollit minim commodo ullamco thundercats.

Usage

Via data attributes

To easily add scrollspy behavior to your topbar navigation, just add data-spy="scroll" to the element you want to spy on (most typically this would be the body) and data-target=".navbar" to select which nav to use. You'll want to use scrollspy with a .nav component.

<body data-spy="scroll" data-target=".navbar">...</body>

Via JavaScript

Call the scrollspy via JavaScript:

$('#navbar').scrollspy()

Heads up! Navbar links must have resolvable id targets. For example, a <a href="#home">home</a> must correspond to something in the dom like <div id="home"></div>.

Methods

.scrollspy('refresh')

When using scrollspy in conjunction with adding or removing of elements from the DOM, you'll need to call the refresh method like so:

    $('[data-spy="scroll"]').each(function () {
      var $spy = $(this).scrollspy('refresh')
    });

Options

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-, as in data-offset="".

Name	type	default	description
offset	number	10	Pixels to offset from top when calculating position of scroll.

Events

Event	Description
activate	This event fires whenever a new item becomes activated by the scrollspy.

Example tabs

Add quick, dynamic tab functionality to transition through panes of local content, even via dropdown menus.

Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.

Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee. Qui photo booth letterpress, commodo enim craft beer mlkshk aliquip jean shorts ullamco ad vinyl cillum PBR. Homo nostrud organic, assumenda labore aesthetic magna delectus mollit. Keytar helvetica VHS salvia yr, vero magna velit sapiente labore stumptown. Vegan fanny pack odio cillum wes anderson 8-bit, sustainable jean shorts beard ut DIY ethical culpa terry richardson biodiesel. Art party scenester stumptown, tumblr butcher vero sint qui sapiente accusamus tattooed echo park.

Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic lomo retro fanny pack lo-fi farm-to-table readymade. Messenger bag gentrify pitchfork tattooed craft beer, iphone skateboard locavore carles etsy salvia banksy hoodie helvetica. DIY synth PBR banksy irony. Leggings gentrify squid 8-bit cred pitchfork. Williamsburg banh mi whatever gluten-free, carles pitchfork biodiesel fixie etsy retro mlkshk vice blog. Scenester cred you probably haven't heard of them, vinyl craft beer blog stumptown. Pitchfork sustainable tofu synth chambray yr.

Trust fund seitan letterpress, keytar raw denim keffiyeh etsy art party before they sold out master cleanse gluten-free squid scenester freegan cosby sweater. Fanny pack portland seitan DIY, art party locavore wolf cliche high life echo park Austin. Cred vinyl keffiyeh DIY salvia PBR, banh mi before they sold out farm-to-table VHS viral locavore cosby sweater. Lomo wolf viral, mustache readymade thundercats keffiyeh craft beer marfa ethical. Wolf salvia freegan, sartorial keffiyeh echo park vegan.

Usage

Enable tabbable tabs via JavaScript (each tab needs to be activated individually):

    $('#myTab a').click(function (e) {
      e.preventDefault();
      $(this).tab('show');
    })

You can activate individual tabs in several ways:

    $('#myTab a[href="#profile"]').tab('show'); // Select tab by name
    $('#myTab a:first').tab('show'); // Select first tab
    $('#myTab a:last').tab('show'); // Select last tab
    $('#myTab li:eq(2) a').tab('show'); // Select third tab (0-indexed)

Markup

You can activate a tab or pill navigation without writing any JavaScript by simply specifying data-toggle="tab" or data-toggle="pill" on an element. Adding the nav and nav-tabs classes to the tab ul will apply the Bootstrap tab styling.

    <ul class="nav nav-tabs">
      <li><a href="#home" data-toggle="tab">Home</a></li>
      <li><a href="#profile" data-toggle="tab">Profile</a></li>
      <li><a href="#messages" data-toggle="tab">Messages</a></li>
      <li><a href="#settings" data-toggle="tab">Settings</a></li>
    </ul>

Methods

$().tab

Activates a tab element and content container. Tab should have either a data-target or an href targeting a container node in the DOM.

    <ul class="nav nav-tabs" id="myTab">
      <li class="active"><a href="#home">Home</a></li>
      <li><a href="#profile">Profile</a></li>
      <li><a href="#messages">Messages</a></li>
      <li><a href="#settings">Settings</a></li>
    </ul>

    <div class="tab-content">
      <div class="tab-pane active" id="home">...</div>
      <div class="tab-pane" id="profile">...</div>
      <div class="tab-pane" id="messages">...</div>
      <div class="tab-pane" id="settings">...</div>
    </div>

    <script>
      $(function () {
        $('#myTab a:last').tab('show');
      })
    </script>

Events

Event	Description
show	This event fires on tab show, but before the new tab has been shown. Use `event.target` and `event.relatedTarget` to target the active tab and the previous active tab (if available) respectively.
shown	This event fires on tab show after a tab has been shown. Use `event.target` and `event.relatedTarget` to target the active tab and the previous active tab (if available) respectively.

    $('a[data-toggle="tab"]').on('shown', function (e) {
      e.target // activated tab
      e.relatedTarget // previous tab
    })

Deprecated!

Navigation tabs, pills, and lists

Lightweight defaults Same markup, different classes

Basic tabs

Basic pills

Disabled state

Component alignment

Stackable

Stacked pills

Dropdowns

Tabs with dropdowns

Pills with dropdowns

Nav lists

Example nav list

Horizontal dividers

Tabbable nav

Tabbable example

Fade in tabs

Requires jQuery plugin

Navbar

Basic navbar

Navbar components

Brand

Nav links

Forms

Search form

Component alignment

Using dropdowns

Text

Optional display variations

Fixed to top

Fixed to bottom

Static top navbar

Responsive navbar

Inverted variation

Breadcrumbs

Examples

Wizard steps

Breadcrumb Stack

Pagination Two options for paging through content

Standard pager

Options

Disabled and active states

Sizes

Alignment

pagination

Default example

Aligned links

Optional disabled state

Dropdown menus

Example

Markup

Options

Aligning the menus

Disabled menu options

Sub menus on dropdowns

Dropdowns bootstrap-dropdown.js

Examples

Within a navbar

Within tabs

Usage

Via data attributes

Via JavaScript

Options

Methods

$().dropdown('toggle')

ScrollSpy bootstrap-scrollspy.js

Example in navbar

@fat

@mdo

one

two

three

Usage

Via data attributes

Via JavaScript

Methods

.scrollspy('refresh')

Options

Events