Tabs

Tabs are helpful when organizing related content on a single screen where content is lengthy and can logically be separated into unique parts.

Best practices

  • Tab labels should be short (2 words maximum) and written using clear, plain language. Avoid truncating tab labels and always use sentence case.
  • Tabs should be ordered by importance from left to right with the first tab always open by default.
  • Avoid using a tab menu when there’s only one item.
  • Hide tabs that don’t have content.

How it works

Our tabs are created from Bootstraps nav’s component.

Use the tab JavaScript plugin—include it individually or through the compiled bootstrap.js file—to extend our navigational tabs to create tabbable panes of local content, even via dropdown menus.

If you’re building our JavaScript from source, it requires util.js.

Dynamic tabbed interfaces, as described in the WAI ARIA Authoring Practices, require role="tablist", role="tab", role="tabpanel", and additional aria- attributes in order to convey their structure, functionality and current state to users of assistive technologies (such as screen readers).

Note that dynamic tabbed interfaces should not contain dropdown menus, as this causes both usability and accessibility issues. From a usability perspective, the fact that the currently displayed tab’s trigger element is not immediately visible (as it’s inside the closed dropdown menu) can cause confusion. From an accessibility point of view, there is currently no sensible way to map this sort of construct to a standard WAI ARIA pattern, meaning that it cannot be easily made understandable to users of assistive technologies.

Ut ac turpis arcu. Suspendisse purus dui, consectetur in eleifend eu, gravida vitae nibh. Sed elementum interdum pellentesque. Nulla ornare pharetra ligula. Pellentesque malesuada congue urna, et finibus odio consequat ut. Duis hendrerit felis vestibulum enim dapibus volutpat.

Mauris quis ligula et felis lobortis porttitor et ut magna. Praesent diam eros, lobortis at consectetur ut, aliquam vitae ipsum. Nulla sed risus eget ligula posuere finibus. Praesent a commodo lorem, vel dictum urna. Nunc vel sagittis augue. Nunc feugiat ullamcorper fermentum. Vestibulum nec justo iaculis, tristique erat ut, rutrum lacus. Nulla facilisi. Quisque pellentesque hendrerit interdum. Donec maximus et felis vel porta.

Morbi finibus, justo quis tincidunt porta, odio nibh fermentum sem, sit amet aliquet metus orci sollicitudin leo. Aenean posuere dapibus mi eu venenatis. Aenean dapibus at velit quis ornare. Nam tempor ligula turpis, eu vehicula velit sagittis vel.

<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="contact-tab" data-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a>
  </li>
</ul>
<div class="tab-content" id="myTabContent">
  <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">
    <p>Ut ac turpis arcu. Suspendisse purus dui, consectetur in eleifend eu, gravida vitae nibh. Sed elementum interdum pellentesque. Nulla ornare pharetra ligula. Pellentesque malesuada congue urna, et finibus odio consequat ut. Duis hendrerit felis vestibulum enim dapibus volutpat.</p>
  </div>
  <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">
    <p>Mauris quis ligula et felis lobortis porttitor et ut magna. Praesent diam eros, lobortis at consectetur ut, aliquam vitae ipsum. Nulla sed risus eget ligula posuere finibus. Praesent a commodo lorem, vel dictum urna. Nunc vel sagittis augue. Nunc feugiat ullamcorper fermentum. Vestibulum nec justo iaculis, tristique erat ut, rutrum lacus. Nulla facilisi. Quisque pellentesque hendrerit interdum. Donec maximus et felis vel porta.</p>
  </div>
  <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">
    <p>Morbi finibus, justo quis tincidunt porta, odio nibh fermentum sem, sit amet aliquet metus orci sollicitudin leo. Aenean posuere dapibus mi eu venenatis. Aenean dapibus at velit quis ornare. Nam tempor ligula turpis, eu vehicula velit sagittis vel.</p>
  </div>
</div>

To help fit your needs, this works with <ul>-based markup, as shown above, or with any arbitrary “roll your own” markup. Note that if you’re using <nav>, you shouldn’t add role="tablist" directly to it, as this would override the element’s native role as a navigation landmark. Instead, switch to an alternative element (in the example below, a simple <div>) and wrap the <nav> around it.

<nav>
  <div class="nav nav-tabs" id="nav-tab" role="tablist">
    <a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">Home</a>
    <a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</a>
    <a class="nav-item nav-link" id="nav-contact-tab" data-toggle="tab" href="#nav-contact" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</a>
  </div>
</nav>
<div class="tab-content" id="nav-tabContent">
  <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">...</div>
  <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">...</div>
  <div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab">...</div>
</div>

Using data attributes

You can activate a tab navigation without writing any JavaScript by simply specifying data-toggle="tab" on an element. Use these data attributes on .nav-tabs.

...
...
...
...
<!-- Nav tabs -->
<ul class="nav nav-tabs" id="myTab2" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" id="home-tab2" data-toggle="tab" href="#home2" role="tab" aria-controls="home2" aria-selected="true">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="profile-tab2" data-toggle="tab" href="#profile2" role="tab" aria-controls="profile2" aria-selected="false">Profile</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="messages-tab2" data-toggle="tab" href="#messages2" role="tab" aria-controls="messages2" aria-selected="false">Messages</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="settings-tab2" data-toggle="tab" href="#settings2" role="tab" aria-controls="settings2" aria-selected="false">Settings</a>
  </li>
</ul>

<!-- Tab panes -->
<div class="tab-content">
  <div class="tab-pane active" id="home2" role="tabpanel" aria-labelledby="home-tab2">...</div>
  <div class="tab-pane" id="profile2" role="tabpanel" aria-labelledby="profile-tab2">...</div>
  <div class="tab-pane" id="messages2" role="tabpanel" aria-labelledby="messages-tab2">...</div>
  <div class="tab-pane" id="settings2" role="tabpanel" aria-labelledby="settings-tab2">...</div>
</div>

Accessibility

If you’re 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> itself, as this would prevent it from being announced as an actual list by assistive technologies.

Note that navigation bars, even if visually styled as tabs with the .nav-tabs class, should not be given role="tablist", role="tab" or role="tabpanel" attributes. These are only appropriate for dynamic tabbed interfaces, as described in the WAI ARIA Authoring Practices.

Via JavaScript

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

$('#myTab a').on('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 li:first-child a').tab('show') // Select first tab
$('#myTab li:last-child a').tab('show') // Select last tab
$('#myTab li:nth-child(3) a').tab('show') // Select third tab

Fade effect

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

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

Methods

Asynchronous methods and transitions

All API methods are asynchronous and start a transition. They return to the caller as soon as the transition is started but before it ends. In addition, a method call on a transitioning component will be ignored.

See Bootstrap’s JavaScript documentation for more information.

$().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" id="home-tab" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="profile-tab" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="messages-tab" data-toggle="tab" href="#messages" role="tab" aria-controls="messages" aria-selected="false">Messages</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" id="settings-tab" data-toggle="tab" href="#settings" role="tab" aria-controls="settings" aria-selected="false">Settings</a>
  </li>
</ul>

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

<script>
  $(function () {
    $('#myTab li:last-child a').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')

.tab(‘dispose’)

Destroys an element’s tab.

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