Navs

Navigation available in Bootstrap share general markup and styles, from the base .nav class to the active and disabled states.

Base inline nav

Roll your own navigation by extending the base .nav component. Use <ul> or roll your own with say a <nav> element. Space out nav links in a horizontal band with .nav-inline.

<nav class="nav nav-inline">
  <a class="nav-link active" href="#">Active</a>
  <a class="nav-link" href="#">Link</a> 
  <a class="nav-link disabled" href="#">Disabled</a>
</nav>

<ul class="nav nav-inline">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li> 
  <li class="nav-item">
    <a class="nav-link disabled" href="#">Disabled</a>
  </li>
</ul>

Tabs

Add the .nav-tabs class to generate a tabbed interface. Also add dropdowns menu.

<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" data-toggle="tab" href="#home" role="tab">Home</a>
  </li>
   ...
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown</a>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Action</a>
      <a class="dropdown-item" href="#">Another action</a>  
    </div>
  </li> 
</ul>

Underline tabs

Add .nav-underline to the .nav.nav-tabs, and use tabs with lines below.

<ul class="nav nav-tabs nav-underline">
  ...
</ul>

Collapse

Use .nav-collapse in .nav-tabs.

<ul class="nav nav-tabs nav-underline nav-collapse">
  <li class="nav-item">
    <a class="nav-link" href="javascript:;">Deploy</a>
  </li>
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle active" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Arquivos</a>
    <div class="dropdown-menu">
      <a class="dropdown-item active" data-dropdown="Arquivos" href="/">
          <span class="icon icon icon-file-upload icon-muted mr-1"></span>Gerenciador
      </a>
      <a class="dropdown-item" data-dropdown="Arquivos" href="/">
          <span class="icon icon icon-synchronize-timeout icon-muted mr-1"></span>Pontos de restauração
      </a>
    </div>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#database">Banco de dados</a>
  </li>
  <li class="nav-item">
    <a class="nav-link dropdown-toggle" href="#settings" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Configurações</a>
    <div class="dropdown-menu">
      <a class="dropdown-item" data-dropdown="Configurações" href="/">
          <span class="icon icon icon-file-upload icon-muted mr-1"></span>Gerenciador
      </a>
      <a class="dropdown-item" data-dropdown="Configurações" href="/">
          <span class="icon icon icon-synchronize-timeout icon-muted mr-1"></span>Pontos de restauração
      </a>
    </div>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#logs">Logs</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#addons">Add-ons</a>
  </li>
</ul>

Overline tabs

Add .nav-overline to the .nav.nav-tabs, and use tabs with lines above.

<ul class="nav nav-tabs nav-overline">
  ...
</ul>

Tabs justify

Add the .nav-justified class to make the tabs responsive

<ul class="nav nav-tabs nav-justified">
  ...
</ul> 
<ul class="nav nav-tabs nav-underline nav-justified">
  ...
</ul>

Pills

Take that same HTML, but use .nav-pills instead:

<ul class="nav nav-pills">
  ...
</ul>

Stacked pills

Add .nav-stacked to the .nav.nav-pills to stack them vertically.

<ul class="nav nav-pills nav-stacked">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li> 
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#">Disabled</a>
  </li>
</ul>

As always, stacked pills are possible without <ul>s.

<nav class="nav nav-pills nav-stacked">
  <a class="nav-link active" href="#">Active</a>
  <a class="nav-link" href="#">Link</a> 
  <a class="nav-link disabled" href="#">Disabled</a>
</nav>

JavaScript behavior

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. Use these data attributes on .nav-tabs or .nav-pills.

Raw denim you probably haven't heard of them jean shorts Austin.

Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid.

Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic.

 
<ul class="nav nav-tabs nav-underline" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" data-toggle="tab" href="#home" role="tab">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#profile" role="tab">Profile</a>
  </li> 
  ...
</ul>
<!-- Tab panes -->
<div class="tab-content">
  <div class="tab-pane active" id="home" role="tabpanel">...</div>
  <div class="tab-pane" id="profile" role="tabpanel">...</div> 
  <div class="tab-pane" id="settings" role="tabpanel">...</div>
</div>

Tab content block

Add the .tab-content-block class, and delete the margin-bottom in .nav.

Raw denim you probably haven't heard of them jean shorts Austin.

Food truck fixie locavore, accusamus mcsweeney's marfa nulla single-origin coffee squid.

Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney's organic.

 
<!-- Delete margin-bottom with .mb-0  -->
<ul class="nav nav-tabs nav-justified mb-0" role="tablist">
  ...
</ul>
<div class="tab-content tab-content-block">
  ...
</div>

Via JavaScript

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)

Fade effect

To make tabs fade in, add .fade to each .tab-pane. The first tab pane must also have .in to make the initial content visible.

<div class="tab-content">
  <div class="tab-pane fade in active" id="home" role="tabpanel">...</div>
  <div class="tab-pane fade" id="profile" role="tabpanel">...</div> 
  <div class="tab-pane fade" id="settings" role="tabpanel">...</div>
</div>

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" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" data-toggle="tab" href="#home" role="tab" aria-controls="home">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#profile" role="tab" aria-controls="profile">Profile</a>
  </li>  
</ul>

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

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

.tab(‘show’)

Selects the given tab and shows its associated pane. Any other tab that was previously selected becomes unselected and its associated pane is hidden. Returns to the caller before the tab pane has actually been shown (i.e. before the shown.bs.tab event occurs).

$('#someTab').tab('show')

Events

When showing a new tab, the events fire in the following order:

  1. hide.bs.tab (on the current active tab)
  2. show.bs.tab (on the to-be-shown tab)
  3. hidden.bs.tab (on the previous active tab, the same one as for the hide.bs.tab event)
  4. shown.bs.tab (on the newly-active just-shown tab, the same one as for the show.bs.tab event)

If no tab was already active, then the hide.bs.tab and hidden.bs.tab events will not be fired.

Event Type Description
show.bs.tab 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.bs.tab 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.
hide.bs.tab This event fires when a new tab is to be shown (and thus the previous active tab is to be hidden). Use event.target and event.relatedTarget to target the current active tab and the new soon-to-be-active tab, respectively.
hidden.bs.tab This event fires after a new tab is shown (and thus the previous active tab is hidden). Use event.target and event.relatedTarget to target the previous active tab and the new active tab, respectively. 
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
  e.target // newly activated tab
  e.relatedTarget // previous active tab
})

Regarding accessibility

If you are using navs to provide a navigation bar, be sure to add a role="navigation" to the most logical parent container of the <ul>, or wrap a <nav> element around the whole navigation. Do not add the role to the <ul>.