Logo
hummingbird

Navs and tabs

Documentation and examples for how to use Bootstrap’s included navigation components.

Examples

HTML

<ul class="nav nav-underline">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" aria-disabled="true">Disabled</a>
  </li>
</ul>
Tabs

HTML

<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" aria-disabled="true">Disabled</a>
  </li>
</ul>
Color variants

HTML

<ul class="nav nav-primary">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" aria-disabled="true">Disabled</a>
  </li>
</ul>
<ul class="nav nav-secondary">
  <li class="nav-item">
    <a class="nav-link active" aria-current="page" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" aria-disabled="true">Disabled</a>
  </li>
</ul>
JavaScript behavior
This is some placeholder content the Home tab’s associated content. Clicking another tab will toggle the visibility of this one for the next.
This is some placeholder content the Profile tab’s associated content. Clicking another tab will toggle the visibility of this one for the next.
This is some placeholder content the Contact tab’s associated content. Clicking another tab will toggle the visibility of this one for the next.
Disabled

HTML

<ul class="nav nav-underline mb-4" id="myTab" role="tablist">
  <li class="nav-item" role="presentation">
    <button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home-tab-pane" type="button" role="tab" aria-controls="home-tab-pane" aria-selected="true">Home</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile-tab-pane" type="button" role="tab" aria-controls="profile-tab-pane" aria-selected="false">Profile</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="contact-tab" data-bs-toggle="tab" data-bs-target="#contact-tab-pane" type="button" role="tab" aria-controls="contact-tab-pane" aria-selected="false">Contact</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="disabled-tab" data-bs-toggle="tab" data-bs-target="#disabled-tab-pane" type="button" role="tab" aria-controls="disabled-tab-pane" aria-selected="false" disabled>Disabled</button>
  </li>
</ul>
<div class="tab-content" id="myTabContent">
  <div class="tab-pane fade show active" id="home-tab-pane" role="tabpanel" aria-labelledby="home-tab" tabindex="0">This is some placeholder content the <b>Home tab’s</b> associated content. Clicking another tab will toggle the visibility of this one for the next.</div>
  <div class="tab-pane fade" id="profile-tab-pane" role="tabpanel" aria-labelledby="profile-tab" tabindex="0">This is some placeholder content the <b>Profile tab’s</b> associated content. Clicking another tab will toggle the visibility of this one for the next.</div>
  <div class="tab-pane fade" id="contact-tab-pane" role="tabpanel" aria-labelledby="contact-tab" tabindex="0">This is some placeholder content the <b>Contact tab’s</b> associated content. Clicking another tab will toggle the visibility of this one for the next.</div>
  <div class="tab-pane fade" id="disabled-tab-pane" role="tabpanel" aria-labelledby="disabled-tab" tabindex="0">Disabled</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.

HTML

<nav>
  <div class="nav nav-underline mb-4" id="nav-tab" role="tablist">
    <button class="nav-link active" id="nav-home-tab" data-bs-toggle="tab" data-bs-target="#nav-home" type="button" role="tab" aria-controls="nav-home" aria-selected="true">Home</button>
    <button class="nav-link" id="nav-profile-tab" data-bs-toggle="tab" data-bs-target="#nav-profile" type="button" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</button>
    <button class="nav-link" id="nav-contact-tab" data-bs-toggle="tab" data-bs-target="#nav-contact" type="button" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</button>
    <button class="nav-link" id="nav-disabled-tab" data-bs-toggle="tab" data-bs-target="#nav-disabled" type="button" role="tab" aria-controls="nav-disabled" aria-selected="false" disabled>Disabled</button>
  </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" tabindex="0">This is some placeholder content the <b>Home tab’s</b> associated content. Clicking another tab will toggle the visibility of this one for the next.</div>
  <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab" tabindex="0">This is some placeholder content the <b>Profile tab’s</b> associated content. Clicking another tab will toggle the visibility of this one for the next.</div>
  <div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab" tabindex="0">This is some placeholder content the <b>Contact tab’s</b> associated content. Clicking another tab will toggle the visibility of this one for the next.</div>
  <div class="tab-pane fade" id="nav-disabled" role="tabpanel" aria-labelledby="nav-disabled-tab" tabindex="0">Disabled</div>
</div>

The tabs plugin also works with lift nav & color variants.

This is some placeholder content the Home tab’s associated content. Clicking another tab will toggle the visibility of this one for the next.
This is some placeholder content the Profile tab’s associated content. Clicking another tab will toggle the visibility of this one for the next.
This is some placeholder content the Contact tab’s associated content. Clicking another tab will toggle the visibility of this one for the next.
Disabled

HTML

<ul class="nav nav-tabs mb-4" id="nav-tab-lift" role="tablist">
  <li class="nav-item" role="presentation">
    <button class="nav-link active" id="home-lift-tab" data-bs-toggle="tab" data-bs-target="#home-lift-tab-pane" type="button" role="tab" aria-controls="home-lift-tab-pane" aria-selected="true">Home</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="profile-lift-tab" data-bs-toggle="tab" data-bs-target="#profile-lift-tab-pane" type="button" role="tab" aria-controls="profile-lift-tab-pane" aria-selected="false">Profile</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="contact-lift-tab" data-bs-toggle="tab" data-bs-target="#contact-lift-tab-pane" type="button" role="tab" aria-controls="contact-lift-tab-pane" aria-selected="false">Contact</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="disabled-lift-tab" data-bs-toggle="tab" data-bs-target="#disabled-lift-tab-pane" type="button" role="tab" aria-controls="disabled-lift-tab-pane" aria-selected="false" disabled>Disabled</button>
  </li>
</ul>
<div class="tab-content" id="myTabContent">
  <div class="tab-pane fade show active" id="home-lift-tab-pane" role="tabpanel" aria-labelledby="home-lift-tab" tabindex="0">This is some placeholder content the <b>Home tab’s</b> associated content. Clicking another tab will toggle the visibility of this one for the next.</div>
  <div class="tab-pane fade" id="profile-lift-tab-pane" role="tabpanel" aria-labelledby="profile-lift-tab" tabindex="0">This is some placeholder content the <b>Profile tab’s</b> associated content. Clicking another tab will toggle the visibility of this one for the next.</div>
  <div class="tab-pane fade" id="contact-lift-tab-pane" role="tabpanel" aria-labelledby="contact-lift-tab" tabindex="0">This is some placeholder content the <b>Contact tab’s</b> associated content. Clicking another tab will toggle the visibility of this one for the next.</div>
  <div class="tab-pane fade" id="disabled-lift-tab-pane" role="tabpanel" aria-labelledby="disabled-lift-tab" tabindex="0">Disabled</div>
</div>
This is some placeholder content the Home tab’s associated content. Clicking another tab will toggle the visibility of this one for the next.
This is some placeholder content the Profile tab’s associated content. Clicking another tab will toggle the visibility of this one for the next.
This is some placeholder content the Contact tab’s associated content. Clicking another tab will toggle the visibility of this one for the next.
Disabled

HTML

<ul class="nav nav-primary mb-4" id="myColorTab" role="tablist">
  <li class="nav-item" role="presentation">
    <button class="nav-link active" id="home-primary-tab" data-bs-toggle="tab" data-bs-target="#home-primary-tab-pane" type="button" role="tab" aria-controls="home-primary-tab-pane" aria-selected="true">Home</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="profile-primary-tab" data-bs-toggle="tab" data-bs-target="#profile-primary-tab-pane" type="button" role="tab" aria-controls="profile-primary-tab-pane" aria-selected="false">Profile</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="contact-primary-tab" data-bs-toggle="tab" data-bs-target="#contact-primary-tab-pane" type="button" role="tab" aria-controls="contact-primary-tab-pane" aria-selected="false">Contact</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="disabled-primary-tab" data-bs-toggle="tab" data-bs-target="#disabled-primary-tab-pane" type="button" role="tab" aria-controls="disabled-primary-tab-pane" aria-selected="false" disabled>Disabled</button>
  </li>
</ul>
<div class="tab-content" id="myTabContent">
  <div class="tab-pane fade show active" id="home-primary-tab-pane" role="tabpanel" aria-labelledby="home-primary-tab" tabindex="0">This is some placeholder content the <b>Home tab’s</b> associated content. Clicking another tab will toggle the visibility of this one for the next.</div>
  <div class="tab-pane fade" id="profile-primary-tab-pane" role="tabpanel" aria-labelledby="profile-primary-tab" tabindex="0">This is some placeholder content the <b>Profile tab’s</b> associated content. Clicking another tab will toggle the visibility of this one for the next.</div>
  <div class="tab-pane fade" id="contact-primary-tab-pane" role="tabpanel" aria-labelledby="contact-primary-tab" tabindex="0">This is some placeholder content the <b>Contact tab’s</b> associated content. Clicking another tab will toggle the visibility of this one for the next.</div>
  <div class="tab-pane fade" id="disabled-primary-tab-pane" role="tabpanel" aria-labelledby="disabled-primary-tab" tabindex="0">Disabled</div>
</div>