Navs & tabs

<ul class="nav nav-tabs" role="tablist">
  <li class="nav-item" role="presentation">
    <button class="nav-link active" data-bs-toggle="tab" data-bs-target="#tab1" type="button">Home</button>
  </li>
  <li class="nav-item" role="presentation">
    <button class="nav-link" data-bs-toggle="tab" data-bs-target="#tab2" type="button">Profile</button>
  </li>
</ul>
<div class="tab-content p-3 border border-top-0 rounded-bottom" style="border-color: var(--border-color) !important;">
  <div class="tab-pane fade show active" id="tab1">Tab home content.</div>
  <div class="tab-pane fade" id="tab2">Tab profile content.</div>
</div>

<ul class="nav nav-pills gap-1">
  <li class="nav-item"><a class="nav-link active" href="#">Active</a></li>
  <li class="nav-item"><a class="nav-link" href="#">Link</a></li>
  <li class="nav-item"><a class="nav-link disabled" href="#">Disabled</a></li>
</ul>