Navs and tabs

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

Base nav

<!--Base nav-->
<ul class="nav">
  <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">Disabled</a>
  </li>
</ul>

Available styles

Change the style of .navs component with modifiers and utilities. Mix and match as needed, or build your own.

Horizontal alignment

<!--horizontal alignment-->
<ul class="nav justify-content-center">
  <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">Disabled</a>
  </li>
</ul>

Right-aligned with .justify-content-end:

Horizontal alignment end

<!--horizontal alignment end-->
<ul class="nav justify-content-end">
  <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">Disabled</a>
  </li>
</ul>

Vertical

<!--vertical-->
<ul class="nav flex-column">
  <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">Disabled</a>
  </li>
</ul>

Tabs

This is some placeholder content the Home tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.
This is some placeholder content the Profile tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.
This is some placeholder content the Contact tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.
This is some placeholder content the Disabled tab's associated content. 
<!--tabs-->
<ul class="nav nav-tabs" 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 <span class="fw-bold">Home tab's</span>
    associated content. Clicking another tab will toggle the visibility of this one for the next.
    The tab JavaScript swaps classes to control the content visibility and styling. You can use it
    with tabs, pills, and any other .nav-powered navigation.</div>
  <div class="tab-pane fade" id="profile-tab-pane" role="tabpanel" aria-labelledby="profile-tab"
    tabindex="0">This is some placeholder content the <span class="fw-bold">Profile tab's</span> associated content. Clicking
    another tab will toggle the visibility of this one for the next. The tab JavaScript swaps
    classes to control the content visibility and styling. You can use it with tabs, pills, and
    any other .nav-powered navigation.</div>
  <div class="tab-pane fade" id="contact-tab-pane" role="tabpanel" aria-labelledby="contact-tab"
    tabindex="0">This is some placeholder content the <span class="fw-bold">Contact tab's</span> associated content. Clicking
    another tab will toggle the visibility of this one for the next. The tab JavaScript swaps
    classes to control the content visibility and styling. You can use it with tabs, pills, and
    any other .nav-powered navigation.</div>
  <div class="tab-pane fade" id="disabled-tab-pane" role="tabpanel" aria-labelledby="disabled-tab"
    tabindex="0">This is some placeholder content the <span class="fw-bold">Disabled tab's</span> associated content.</div>
</div>

Pills

This is some placeholder content the Home tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.
This is some placeholder content the Profile tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.
This is some placeholder content the Contact tab's associated content. Clicking another tab will toggle the visibility of this one for the next. The tab JavaScript swaps classes to control the content visibility and styling. You can use it with tabs, pills, and any other .nav-powered navigation.
This is some placeholder content the Disabled tab's associated content. 
<!--pills-->
<ul class="nav nav-pills" id="pills-tab" role="tablist">
  <li class="nav-item" role="presentation">
    <button class="nav-link active" id="pills-home-tab" data-bs-toggle="pill"
      data-bs-target="#pills-home" type="button" role="tab" aria-controls="pills-home"
      aria-selected="true">Home</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="pills-profile-tab" data-bs-toggle="pill"
      data-bs-target="#pills-profile" type="button" role="tab" aria-controls="pills-profile"
      aria-selected="false">Profile</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="pills-contact-tab" data-bs-toggle="pill"
      data-bs-target="#pills-contact" type="button" role="tab" aria-controls="pills-contact"
      aria-selected="false">Contact</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="pills-disabled-tab" data-bs-toggle="pill"
      data-bs-target="#pills-disabled" type="button" role="tab" aria-controls="pills-disabled"
      aria-selected="false" disabled>Disabled</button>
  </li>
</ul>
<div class="tab-content" id="pills-tabContent">
  <div class="tab-pane fade show active" id="pills-home" role="tabpanel"
    aria-labelledby="pills-home-tab" tabindex="0">This is some placeholder content the <span
      class="fw-bold"> Home tab's</span>
    associated content. Clicking another tab will toggle the visibility of this one for the next.
    The tab JavaScript swaps classes to control the content visibility and styling. You can use it
    with tabs, pills, and any other .nav-powered navigation.</div>
  <div class="tab-pane fade" id="pills-profile" role="tabpanel"
    aria-labelledby="pills-profile-tab" tabindex="0">This is some placeholder content the <span
      class="fw-bold">Profile
      tab's</span> associated content. Clicking another tab will toggle the visibility of this one
    for the
    next. The tab JavaScript swaps classes to control the content visibility and styling. You can
    use it with tabs, pills, and any other .nav-powered navigation.</div>
  <div class="tab-pane fade" id="pills-contact" role="tabpanel"
    aria-labelledby="pills-contact-tab" tabindex="0">This is some placeholder content the <span
      class="fw-bold">Contact
      tab's</span> associated content. Clicking another tab will toggle the visibility of this one
    for the
    next. The tab JavaScript swaps classes to control the content visibility and styling. You can
    use it with tabs, pills, and any other .nav-powered navigation.</div>
  <div class="tab-pane fade" id="pills-disabled" role="tabpanel"
    aria-labelledby="pills-disabled-tab" tabindex="0">This is some placeholder content the <span
      class="fw-bold">Disabled tab's</span> associated content.</div>
</div>