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>