Bootstrap Navs

Our 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.

<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

<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


<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>