Bootstrap 5 navs tabbable panes

<!DOCTYPE html>
<title>My Example</title>

<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
Footwear
</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#dropdown-shoes" role="tab" id="dropdown-shoes-tab" data-bs-toggle="tab" aria-controls="dropdownShoes">Shoes</a>
<a class="dropdown-item" href="#dropdown-boots" role="tab" id="dropdown-boots-tab" data-bs-toggle="tab" aria-controls="dropdownBoots">Boots</a>
</div>
</li>

</ul>

<div id="clothing-nav-content" class="tab-content">

<div role="tabpanel" class="tab-pane fade show active" id="home" aria-labelledby="home-tab">
<p>Welcome home! Click on the tabs to see the content change.</p>
</div>

<div role="tabpanel" class="tab-pane fade" id="hats" aria-labelledby="hats-tab">
<p>A hat is a head covering. It can be worn for protection against the elements, ceremonial reasons, religious reasons, safety, or as a fashion accessory.</p>
</div>

<div role="tabpanel" class="tab-pane fade" id="dropdown-shoes" aria-labelledby="dropdown-shoes-tab">
<p>A shoe is an item of footwear intended to protect and comfort the human foot while doing various activities. Shoes are also used as an item of decoration.</p>
</div>

<div role="tabpanel" class="tab-pane fade" id="dropdown-boots" aria-labelledby="dropdown-boots-tab">
<p>A boot is a type of footwear and a specific type of shoe. Most boots mainly cover the foot and the ankle, while some also cover some part of the lower calf. Some boots extend up the leg, sometimes as far as the knee or even the hip.</p>
</div>

</div>

</div>
		

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>