Navbars can contain dropdown menus — subnavigation that appears on click. Use the Bootstrap Dropdown component inside a .nav-item with .dropdown class and trigger the menu with data-bs-toggle="dropdown".
For complex navigation, you can build a mega menu by using a wider dropdown container and Bootstrap grid classes inside the dropdown menu. This requires some custom CSS to override the default max-width.
<nav class="navbar navbar-expand-lg bg-light">
<div class="container">
<a class="navbar-brand" href="#">Brand</a>
<div class="collapse navbar-collapse">
<ul class="navbar-nav">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#"
data-bs-toggle="dropdown">Products</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Web Apps</a></li>
<li><a class="dropdown-item" href="#">Mobile</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">All Products</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>Use <hr class="dropdown-divider"> to separate groups of related menu items — much cleaner than spacing dividers.