Skip to content Skip to main navigation Report an accessibility issue

Tabs

Documentation

Usage: Tabs can be a handy way of organizing bits of content on a page.

Do
  • Pay particular attention to the role attributes and aria-controls in these examples. They make your content more accessible.
Don't
  • Don’t use tabs to tuck away content you’d rather not look at. Clearer, concise writing or making hard editing choices will be a better choice.
  • There is no way to direct link to a tab that is not open, so do not hide content behind a tab that you expect to be easy to find.
EXAMPLE
Home Content
Profile Content
Messages Content
Settings Content

Code

HTML
<!-- Nav tabs -->

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

<!-- Tab panes -->

<div class="tab-content">
  <div role="tabpanel" class="tab-pane active" id="home">Home Content</div>
  <div role="tabpanel" class="tab-pane" id="profile">Profile Content</div>
  <div role="tabpanel" class="tab-pane" id="messages">Messages Content</div>
  <div role="tabpanel" class="tab-pane" id="settings">Settings Content</div>
</div>
Available as a shortcode in the WordPress theme
[tabs][tab title="Home"]Content[/tab][/tabs]