UI Toolkit

Navigation

Navs available in Bootstrap have shared markup, starting with the base .nav class, as well as shared states. Swap modifier classes to switch between each style.

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

Tabs Requires MAX Custom Bootstrap Stylesheet Requires MAX Custom Bootstrap JavaScript

Note the .nav-tabs class requires the .nav base class.

<ul class="nav nav-tabs">
  <li role="presentation" class="active" aria-controls="home" role="tab" data-toggle="tab"><a href="#home">Home</a></li>
  <li role="presentation" aria-controls="profile" role="tab" data-toggle="tab"><a href="#profile">Profile</a></li>
  <li role="presentation" aria-controls="messages" role="tab" data-toggle="tab"><a href="#messages">Messages</a></li>
</ul>
<div class="tab-content">
  <div role="tabpanel" class="tab-pane active" id="home"></div>
  <div role="tabpanel" class="tab-pane" id="profile"></div>
  <div role="tabpanel" class="tab-pane" id="messages"></div>
</div>

Header Tags Requires MAX Custom Bootstrap Stylesheet Requires MAX Custom Bootstrap JavaScript

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

Header Tags are also vertically stackable. Just add .nav-stacked.

<ul class="nav nav-pills">
  <li role="presentation" class="active" aria-controls="home" role="tab" data-toggle="tab"><a href="#home">Home</a></li>
  <li role="presentation" aria-controls="profile" role="tab" data-toggle="tab"><a href="#profile">Profile</a></li>
  <li role="presentation" aria-controls="messages" role="tab" data-toggle="tab"><a href="#messages">Messages</a></li>
</ul>
<div class="tab-content">
  <div role="tabpanel" class="tab-pane active" id="home"></div>
  <div role="tabpanel" class="tab-pane" id="profile"></div>
  <div role="tabpanel" class="tab-pane" id="messages"></div>
</div>

<ul class="nav nav-pills nav-stacked">
  <li role="presentation" class="active" aria-controls="home" role="tab" data-toggle="tab"><a href="#home">Home</a></li>
  <li role="presentation" aria-controls="profile" role="tab" data-toggle="tab"><a href="#profile">Profile</a></li>
  <li role="presentation" aria-controls="messages" role="tab" data-toggle="tab"><a href="#messages">Messages</a></li>
</ul>
<div class="tab-content">
  <div role="tabpanel" class="tab-pane active" id="home"></div>
  <div role="tabpanel" class="tab-pane" id="profile"></div>
  <div role="tabpanel" class="tab-pane" id="messages"></div>
</div>