How to create beautiful dropdown menu in bootstrap - html

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>