Mega menu

A wide-format variant that supports multi-column layouts. This is used for complex navigation or "Feature Discovery" menus where icons and descriptions are necessary for clarity.

<ul class="nav dropdown">
  <li class="nav-item position-static"><a class="nav-link dropdown-toggle" href="#" data-bs-toggle="dropdown">Mega menu</a>
    <div class="dropdown-menu mega-menu">
      <div class="p-3">
        <div class="row">
          <div class="col-6">
            <ul class="nav flex-column">
              <li class="nav-item"><a class="nav-link active" href="#">Item 1</a></li>
              <li class="nav-item"><a class="nav-link" href="#">Item 2</a></li>
              <li class="nav-item"><a class="nav-link" href="#">Item 3</a></li>
            </ul>
          </div>
          <div class="col-6">
            <ul class="nav flex-column">
              <li class="nav-item"><a class="nav-link active" href="#">Item 1</a></li>
              <li class="nav-item"><a class="nav-link" href="#">Item 2</a></li>
              <li class="nav-item"><a class="nav-link" href="#">Item 3</a></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </li>
</ul>