Bootstrap Navs

Bootstrap Navs component allows to create simple navigation. Navigation available in Bootstrap shares general markup and styles, from the base .nav class to the active and disabled states.
Learn how to use Bootstrap navigation from this documentation and navs examples to quickly and easily create elegant and flexible navs.

Copy
<div class="nav-wrapper position-relative end-0">
   <ul class="nav nav-pills nav-fill p-1" role="tablist">
      <li class="nav-item">
         <a class="nav-link mb-0 px-0 py-1 active" data-bs-toggle="tab" href="#profile-tabs-simple" role="tab" aria-controls="profile" aria-selected="true">
         My Profile
         </a>
      </li>
      <li class="nav-item">
         <a class="nav-link mb-0 px-0 py-1" data-bs-toggle="tab" href="#dashboard-tabs-simple" role="tab" aria-controls="dashboard" aria-selected="false">
         Dashboard
         </a>
      </li>
    </ul>
</div>

Tabs with icons

Copy
<div class="nav-wrapper position-relative end-0">
  <ul class="nav nav-pills nav-fill p-1" role="tablist">
    <li class="nav-item">
      <a class="nav-link mb-0 px-0 py-1 active" data-bs-toggle="tab" href="#profile-tabs-icons" role="tab" aria-controls="preview" aria-selected="true">
      <i class="ni ni-badge text-sm me-2"></i> My Profile
      </a>
    </li>
    <li class="nav-item">
      <a class="nav-link mb-0 px-0 py-1" data-bs-toggle="tab" href="#dashboard-tabs-icons" role="tab" aria-controls="code" aria-selected="false">
        <i class="ni ni-laptop text-sm me-2"></i> Dashboard
      </a>
    </li>
  </ul>
</div>

Vertical Tabs


Copy
<div class="nav-wrapper position-relative end-0">
  <ul class="nav nav-pills nav-fill flex-column p-1" role="tablist">
    <li class="nav-item">
      <a class="nav-link mb-0 px-0 py-1 active" data-bs-toggle="tab" href="#profile-tabs-vertical" role="tab" aria-controls="preview" aria-selected="true">
        My Profile
      </a>
    </li>
    <li class="nav-item">
      <a class="nav-link mb-0 px-0 py-1" data-bs-toggle="tab" href="#dashboard-tabs-vertical" role="tab" aria-controls="code" aria-selected="false">
        Dashboard
      </a>
    </li>
    <li class="nav-item">
      <a class="nav-link mb-0 px-0 py-1" data-bs-toggle="tab" href="#payments-tabs-vertical" role="tab" aria-controls="code" aria-selected="false">
        Payments
      </a>
    </li>
  </ul>
</div>