Responsive Tabs

Turns Bootstrap tab navigation to a better responsive component with a dropdown.

<script src="js/cs/responsivetab.js"></script>

var tabs = new ResponsiveTab(document.getElementById('responsiveTabs'));

<div class="card mb-3">
  <div class="card-header border-0 pb-0">
    <ul class="nav nav-tabs nav-tabs-line card-header-tabs responsive-tabs" role="tablist" id="responsiveTabs">
      <li class="nav-item" role="presentation">
        <button class="nav-link active" data-bs-toggle="tab" data-bs-target="#first" role="tab" type="button" aria-selected="true">
          First
        </button>
      </li>
      <li class="nav-item" role="presentation">
        <button class="nav-link" data-bs-toggle="tab" data-bs-target="#second" role="tab" type="button" aria-selected="false">Second</button>
      </li>
      <li class="nav-item" role="presentation">
        <button class="nav-link" data-bs-toggle="tab" data-bs-target="#third" role="tab" type="button" aria-selected="false">Third</button>
      </li>
      <li class="nav-item disabled" role="presentation">
        <button class="nav-link" disabled data-bs-toggle="tab" data-bs-target="#fourth" role="tab" type="button" aria-selected="false">
          Disabled
        </button>
      </li>
      <li class="nav-item" role="presentation">
        <button class="nav-link" data-bs-toggle="tab" data-bs-target="#fifth" role="tab" type="button" aria-selected="false">Fifth</button>
      </li>
      <li class="nav-item" role="presentation">
        <button class="nav-link" data-bs-toggle="tab" data-bs-target="#sixth" role="tab" type="button" aria-selected="false">Sixth</button>
      </li>
      <!-- An empty list to put overflowed links -->
      <li class="nav-item dropdown ms-auto pe-0 d-none responsive-tab-dropdown">
        <button
          class="btn btn-icon btn-icon-only btn-foreground mt-2"
          type="button"
          data-bs-toggle="dropdown"
          aria-haspopup="true"
          aria-expanded="false"
        >
          <i data-acorn-icon="more-horizontal"></i>
        </button>
        <ul class="dropdown-menu mt-2 dropdown-menu-end"></ul>
      </li>
    </ul>
  </div>
  <div class="card-body">
    <div class="tab-content">
      <div class="tab-pane fade active show" id="first" role="tabpanel">
        <h5 class="card-title">First Title</h5>
        <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
      </div>
      <div class="tab-pane fade" id="second" role="tabpanel">
        <h5 class="card-title">Second Title</h5>
        <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
      </div>
      <div class="tab-pane fade" id="third" role="tabpanel">
        <h5 class="card-title">Third Title</h5>
        <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
      </div>
      <div class="tab-pane fade" id="fourth" role="tabpanel">
        <h5 class="card-title">Fourth Title</h5>
        <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
      </div>
      <div class="tab-pane fade" id="fifth" role="tabpanel">
        <h5 class="card-title">Fifth Title</h5>
        <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
      </div>
      <div class="tab-pane fade" id="sixth" role="tabpanel">
        <h5 class="card-title">Sixth Title</h5>
        <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
      </div>
    </div>
  </div>
</div>

You may find a usage example in Interface.Components.Navs.html file which is initialized by js/components/navs.js.