How to create beautiful dropdown menu in bootstrap

Question

I have created a simple dropdown menu using bootstrap Basic bootstrap dropdown

<li class="nav-item dropdown">
    <a href="" id="dropdownMenu2" data-bs-toggle="dropdown" aria-expanded="false" class="nav-link">
        <i class="fa-solid fa-user" style="font-size: 24px"></i>
    </a>
    <ul class="dropdown-menu w-500 align-items-stretch" aria-labelledby="dropdownMenu2">
        <li><a class="dropdown-item" href="#">Another action</a></li>
        <li><a class="dropdown-item" href="#">Something else here</a></li>
        <li><a class="dropdown-item" href="#">Nothing else</a></li>
    </ul>
</li>

I've searched a lot on how to extend the UX for the user in a more complex window shown when the user clicks on the button but like this one.

Enhanced menu

Any hint on what bootstrap options do I have?

Thank you

Answer 1

You could always put a grid within the <li></li>. Of course you're going to have to use the docs (Grid system) to see what options you have in styling it, but basically:

<li>
  <div class='row'>
    <div class='col'>
      <a class="dropdown-item" href="#">Another action</a>
      <a class="dropdown-item" href="#">Something else here</a>
      <a class="dropdown-item" href="#">Nothing else</a>
    </div>
    <div class='col'>
      <a class="dropdown-item" href="#">Another action</a>
      <a class="dropdown-item" href="#">Something else here</a>
      <a class="dropdown-item" href="#">Nothing else</a>
    </div>
    <div class='col'>
      <a class="dropdown-item" href="#">Another action</a>
      <a class="dropdown-item" href="#">Something else here</a>
      <a class="dropdown-item" href="#">Nothing else</a>
    </div>
  </div>
</li>

Answer 2

Hi there This navbar template is made with bootstrap 5. In my opinion, the structure is the most beautiful bootstrap dropdown like following, I think.

Hope this helps for you.

Thanks, see you again.

<div class="container-fluid">
  <a class="navbar-brand" href="#">Navbar</a>
  <div class=" collapse navbar-collapse" id="navbarNavDropdown">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link active" aria-current="page" href="#">Action</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Action</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Action</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
          Action
        </a>
        <ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
          <li><a class="dropdown-item" href="#">Another action</a></li>
          <li><a class="dropdown-item" href="#">Something else here</a></li>
          <li><a class="dropdown-item" href="#">Nothing else</a></li>
        </ul>
      </li>
    </ul>
  </div>
</div>