Menu with icons

Bootstrap 5 Menu with icons component

Responsive Menu with icons built with Bootstrap 5. Simple examples of a few menus with icons. Easy to implement and customize.

Basic example

Use dropdown, add .hidden-arrow class next to .dropdown-toggle and change text into icon in <button> element.

If You want an icon in the dropdown, just add the icon next to the text in <li> element.

Edit in sandbox 
<div class="dropdown">
  <button data-mdb-button-init
    data-mdb-ripple-init data-mdb-dropdown-init class="btn btn-primary dropdown-toggle hidden-arrow"
    type="button"
    id="dropdownMenuButton1"
    data-mdb-toggle="dropdown"
    aria-expanded="false"
  >
    <i class="fas fa-ellipsis-v fa-lg"></i>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton1">
    <li><a class="dropdown-item" href="#"> <i class="fas fa-user-alt pe-2"></i>My Profile</a></li>
    <li><a class="dropdown-item" href="#"> <i class="fas fa-cog pe-2"></i>Settings</a></li>
    <li><a class="dropdown-item" href="#"> <i class="fas fa-door-open pe-2"></i>Logout</a></li>
  </ul>
</div>

<div class="dropdown">
  <button data-mdb-button-init
    data-mdb-ripple-init data-mdb-dropdown-init class="btn btn-primary btn-floating dropdown-toggle hidden-arrow bg-dark"
    type="button"
    id="dropdownMenuButton2"
    data-mdb-toggle="dropdown"
    aria-expanded="false"
  >
    <i class="fas fa-ellipsis-v fa-lg"></i>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton2">
    <li><a class="dropdown-item" href="#"> <i class="fas fa-user-alt pe-2"></i>My Profile</a></li>
    <li><a class="dropdown-item" href="#"> <i class="fas fa-cog pe-2"></i>Settings</a></li>
    <li><a class="dropdown-item" href="#"> <i class="fas fa-door-open pe-2"></i>Logout</a></li>
  </ul>
</div>

If you want the icon to be a menu replace the <button> element with <a> and remove the .btn .btn-primary classes.

Edit in sandbox 
<div class="dropdown">
  <a
    data-mdb-dropdown-init class="dropdown-toggle hidden-arrow"
    type="button"
    id="dropdownMenuicon"
    data-mdb-toggle="dropdown"
    aria-expanded="false"
  >
    <i class="fas fa-ellipsis-v fa-lg text-dark"></i>
  </a>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuicon">
    <li><a class="dropdown-item" href="#"> <i class="fas fa-user-alt pe-2"></i>My Profile</a></li>
    <li><a class="dropdown-item" href="#"> <i class="fas fa-cog pe-2"></i>Settings</a></li>
    <li><a class="dropdown-item" href="#"> <i class="fas fa-door-open pe-2"></i>Logout</a></li>
  </ul>
</div>