How to insert tabs inside drop-down menu in Bootstrap 5? - html

Question

I am using the bootstrap 5 drop-down menus with tabs inside. Here is the code in I found this link useful to stop click event propagation so that the drop-down menu does not close on click inside itAvoid dropdown menu close on click inside.
I want to put the tabs inside the menu. That I can make something like this later.
How can I put tabs on my menu?
I want to make something like this: https://codepen.io/elhaw/pen/JZjJpJ?editors=1010
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item dropdown">
<form>
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown link
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<div class="container">
<ul id="tabs" class="nav nav-tabs" role="tablist">
<li class="nav-item">
<a id="tab-A" href="#pane-A" class="nav-link active" data-bs-toggle="tab" role="tab">–A–</a>
</li>
<li class="nav-item">
<a id="tab-B" href="#pane-B" class="nav-link" data-toggle="tab" role="tab">–B–</a>
</li>
<li class="nav-item">
<a id="tab-C" href="#pane-C" class="nav-link" data-toggle="tab" role="tab">–C–</a>
</li>
</ul>
<div id="content" class="tab-content" role="tablist">
<div id="pane-A" class="card tab-pane fade show active" role="tabpanel" aria-labelledby="tab-A">
<div class="card-header" role="tab" id="heading-A">
<h5 class="mb-0">
<a data-toggle="collapse" href="#collapse-A" data-parent="#content" aria-expanded="true" aria-controls="collapse-A">
Collapsible Group Item A
</a>
</h5>
</div>
<div id="collapse-A" class="collapse show" role="tabpanel" aria-labelledby="heading-A">
<div class="card-body">
[Tab content A]
</div>
</div>
</div>
<div id="pane-B" class="card tab-pane fade" role="tabpanel" aria-labelledby="tab-B">
<div class="card-header" role="tab" id="heading-B">
<h5 class="mb-0">
<a class="collapsed" data-toggle="collapse" href="#collapse-B" data-parent="#content" aria-expanded="false" aria-controls="collapse-B">
Collapsible Group Item B
</a>
</h5>
</div>
<div id="collapse-B" class="collapse" role="tabpanel" aria-labelledby="heading-B">
<div class="card-body">
[Tab content B]
</div>
</div>
</div>
<div id="pane-C" class="card tab-pane fade" role="tabpanel" aria-labelledby="tab-C">
<div class="card-header" role="tab" id="heading-C">
<h5 class="mb-0">
<a class="collapsed" data-toggle="collapse" href="#collapse-C" data-parent="#content" aria-expanded="false" aria-controls="collapse-C">
Collapsible Group Item C
</a>
</h5>
</div>
<div id="collapse-C" class="collapse" role="tabpanel" aria-labelledby="heading-C">
<div class="card-body">
[Tab content C]
</div>
</div>
</div>
</div>
</div>
</div>
</form>
</li>
</ul>
</div>
</nav>

Answer 1

How about this?
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-U1DAWAznBHeqEIlVSCgzq+c9gqGAJn5c/t99JyeKa9xxaYpSvHU5awsuZVVFIhvj" crossorigin="anonymous"></script>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item dropdown" style="position: initial;">
<form>
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" data-bs-auto-close="outside" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown link
</a>
<div class="dropdown-menu" style="width: 100%;" aria-labelledby="navbarDropdownMenuLink">
<div class="container">
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="pane-A" data-bs-toggle="tab" data-bs-target="#paneA" type="button" role="tab" aria-controls="paneA" aria-selected="true">-A-</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="pane-B" data-bs-toggle="tab" data-bs-target="#paneB" type="button" role="tab" aria-controls="paneB" aria-selected="false">-B-</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="pane-C" data-bs-toggle="tab" data-bs-target="#paneC" type="button" role="tab" aria-controls="paneC" aria-selected="false">-C-</button>
</li>
</ul>
<div class="tab-content" id="myTabContent">
<div class="tab-pane fade show active" id="paneA" role="tabpanel" aria-labelledby="pane-A">
<a class="btn btn-primary" data-bs-toggle="collapse" href="#collapseA" role="button" aria-expanded="false" aria-controls="collapseA">
Collapsible Group Item A
</a>
<div class="collapse" id="collapseA">
<div class="card card-body">
---- Content A ----
</div>
</div>
</div>
<div class="tab-pane fade" id="paneB" role="tabpanel" aria-labelledby="pane-B">
<a class="btn btn-primary" data-bs-toggle="collapse" href="#collapseB" role="button" aria-expanded="false" aria-controls="collapseB">
Collapsible Group Item B
</a>
<div class="collapse" id="collapseB">
<div class="card card-body">
---- Content B ----
</div>
</div>
</div>
<div class="tab-pane fade" id="paneC" role="tabpanel" aria-labelledby="pane-C">
<a class="btn btn-primary" data-bs-toggle="collapse" href="#collapseC" role="button" aria-expanded="false" aria-controls="collapseC">
Collapsible Group Item C
</a>
<div class="collapse" id="collapseC">
<div class="card card-body">
---- Content C ----
</div>
</div>
</div>
</div>
</div>
</div>
</form>
</li>
</ul>
</div>
</nav>
PS: I changed some of the attributes and id's. You can change them as you wish.