How to create beautiful dropdown menu in bootstrap-CodePudding

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

<li >
    <a href="" id="dropdownMenu2" data-bs-toggle="dropdown" aria-expanded="false" >
        <i  style="font-size: 24px"></i>
    </a>
    <ul  aria-labelledby="dropdownMenu2">
        <li><a  href="#">Another action</a></li>
        <li><a  href="#">Something else here</a></li>
        <li><a  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

CodePudding user response：

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  href="#">Another action</a>
      <a  href="#">Something else here</a>
      <a  href="#">Nothing else</a>
    </div>
    <div class='col'>
      <a  href="#">Another action</a>
      <a  href="#">Something else here</a>
      <a  href="#">Nothing else</a>
    </div>
    <div class='col'>
      <a  href="#">Another action</a>
      <a  href="#">Something else here</a>
      <a  href="#">Nothing else</a>
    </div>
  </div>
</li>

CodePudding user response：

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 >
  <a  href="#">Navbar</a>
  <div  id="navbarNavDropdown">
    <ul >
      <li >
        <a  aria-current="page" href="#">Action</a>
      </li>
      <li >
        <a  href="#">Action</a>
      </li>
      <li >
        <a  href="#">Action</a>
      </li>
      <li >
        <a  href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
          Action
        </a>
        <ul  aria-labelledby="navbarDropdownMenuLink">
          <li><a  href="#">Another action</a></li>
          <li><a  href="#">Something else here</a></li>
          <li><a  href="#">Nothing else</a></li>
        </ul>
      </li>
    </ul>
  </div>
</div>