bootstrap 5 multiple tab dropdown with tab pane

Question

I am trying to create a tab with multiple dropdowns using Bootstrap 5.3 and query 3.7.1. The tab and dropdown works and open the correct pane. It also highlights the correct dropdown selected, but it does not highlight the correct tab of the item selected. Any idea how to fix this?

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">

<div class="container">
  <div class='row'>
    <div class='col-md-12'>
      <ul class="nav nav-tabs tabs-line d-flex justify-content-center mb-4" role="tablist">
        <li class="nav-item dropdown" role="presentation">
          <a href="#" id="dropName" class="nav-link dropdown-toggle active" data-bs-toggle="dropdown" role="button" aria-expanded="false">TAB 1</a>
          <ul class="dropdown-menu">
            <li class="nav-item drop-item">
              <button class="dropdown-item nav-link active" id="tab-1" data-bs-toggle="tab" data-bs-target="#tabs-1" type="button" role="tab" aria-controls="tabs-1" aria-selected="false">
                                    tab 1 Item 1
                                </button>
            </li>
            
            <li class="nav-item drop-item">
              <button class="dropdown-item nav-link" id="tab-1-2" data-bs-toggle="tab" data-bs-target="#tabs-1-2" type="button" role="tab" aria-controls="tabs-1-2" aria-selected="false">
                                    tab 1 Item 2
                                </button>
            </li>
          </ul>
        </li>

        <li class="nav-item dropdown" role="presentation">
          <a href="#" id="dropName" class="nav-link dropdown-toggle" data-bs-toggle="dropdown" role="button" aria-expanded="false">TAB 2</a>
          <ul class="dropdown-menu">
            <li class="nav-item drop-item">
              <button class="dropdown-item nav-link" id="tab-2" data-bs-toggle="tab" data-bs-target="#tabs-2" type="button" role="tab" aria-controls="tabs-2" aria-selected="false">
                                    Tab 2 Item 1
                                </button>
            </li>
            <li class="nav-item drop-item">
              <button class="dropdown-item nav-link" id="tab-2-2" data-bs-toggle="tab" data-bs-target="#tabs-2-2" type="button" role="tab" aria-controls="tabs-2-2" aria-selected="false">
                                    tab 2 Item 2
                                </button>
            </li>
          </ul>
        </li>
      </ul>
      
      <div class="tab-content" id="content">
        <div class="row tab-pane fade show active" id="tabs-1" role="tabpanel" aria-labelledby="tab-1">
          <H1>This Is Content Of Item 1 1 </H1>
        </div>
        
        <div class="row tab-pane fade" id="tabs-1-2" role="tabpanel" aria-labelledby="tab-2">
          <H1>This Is Content Of Item 1 2 </H1>
        </div>

        <div class="row tab-pane fade" id="tabs-2" role="tabpanel" aria-labelledby="tab-2">
          <H1>This Is Content Of Item 2 1 </H1>
        </div>
        
        <div class="row tab-pane fade" id="tabs-2-2" role="tabpanel" aria-labelledby="tab-2-2">
          <H1>This Is Content Of Item 2 2 </H1>
        </div>
      </div>
    </div>

Answer 1

Since you have added data-bs-toggle="dropdown" so you could show the dropdownlist you could manually add/remove the active class from your nav-link tabs. In the below example I have added unique ids to your tabs and on the dropdown I have added the data-parent property that points to its corresponding tab. After the user clicks on the dropdown, we get the data-parent of the button and set it to active.

$(".dropdown-item").on('click',this,function(e){
        $(".dropdown-toggle").removeClass("active");
        $("#"+$(this).data('parent')+"").addClass("active");
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">

<div class="container">
  <div class='row'>
    <div class='col-md-12'>
      <ul class="nav nav-tabs tabs-line d-flex justify-content-center mb-4" role="tablist">
        <li class="nav-item dropdown" role="presentation">
          <a href="#" id="dropName1" class="nav-link dropdown-toggle active" data-bs-toggle="dropdown" role="button" aria-expanded="false">TAB 1</a>
          <ul class="dropdown-menu">
            <li class="nav-item drop-item">
              <button class="dropdown-item nav-link active" id="tab-1" data-parent="dropName1" data-bs-toggle="tab" data-bs-target="#tabs-1" type="button" role="tab" aria-controls="tabs-1" aria-selected="false">
                                    tab 1 Item 1
                                </button>
            </li>
            
            <li class="nav-item drop-item">
              <button class="dropdown-item nav-link" id="tab-1-2" data-parent="dropName1" data-bs-toggle="tab" data-bs-target="#tabs-1-2" type="button" role="tab" aria-controls="tabs-1-2" aria-selected="false">
                                    tab 1 Item 2
                                </button>
            </li>
          </ul>
        </li>

        <li class="nav-item dropdown" role="presentation">
          <a href="#" id="dropName2" class="nav-link dropdown-toggle" data-bs-toggle="dropdown" role="button" aria-expanded="false">TAB 2</a>
          <ul class="dropdown-menu">
            <li class="nav-item drop-item">
              <button class="dropdown-item nav-link" id="tab-2" data-parent="dropName2" data-bs-toggle="tab" data-bs-target="#tabs-2" type="button" role="tab" aria-controls="tabs-2" aria-selected="false">
                                    Tab 2 Item 1
                                </button>
            </li>
            <li class="nav-item drop-item">
              <button class="dropdown-item nav-link" data-parent="dropName2" id="tab-2-2" data-bs-toggle="tab" data-bs-target="#tabs-2-2" type="button" role="tab" aria-controls="tabs-2-2" aria-selected="false">
                                    tab 2 Item 2
                                </button>
            </li>
          </ul>
        </li>
      </ul>
      
      <div class="tab-content" id="content">
        <div class="row tab-pane fade show active" id="tabs-1" role="tabpanel" aria-labelledby="tab-1">
          <H1>This Is Content Of Item 1 1 </H1>
        </div>
        
        <div class="row tab-pane fade" id="tabs-1-2" role="tabpanel" aria-labelledby="tab-2">
          <H1>This Is Content Of Item 1 2 </H1>
        </div>

        <div class="row tab-pane fade" id="tabs-2" role="tabpanel" aria-labelledby="tab-2">
          <H1>This Is Content Of Item 2 1 </H1>
        </div>
        
        <div class="row tab-pane fade" id="tabs-2-2" role="tabpanel" aria-labelledby="tab-2-2">
          <H1>This Is Content Of Item 2 2 </H1>
        </div>
      </div>
    </div>