Ellipsis menu

[jshine1]

Hello to the community,

I was hoping for direction or guidance on creating an ellipsis menu that when clicked becomes a select menu of links similar to what is shown below. I searched this site and others and have struggled to determine how I can create a select menu with a custom icon/image that appears when clicked. Any direction is appreciated!!

[karh]

Sounds like you want to create a dropdown menu.

Assuming you’re using bootstrap 5 with bootstrap icons:

1. Make a dropdown menu.

Try out the code here: https://getbootstrap.com/docs/5.0/components/dropdowns/ (or from bootstrap 4 if you’re using that)

2. Replace the text of the button with an icon
   And replace the text “dropdown menu” given in the example code, with a hamburger icon or w/e you want exactly. Like:

<div class="dropdown">
  <a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">
    <i class="bi bi-list"></i>
  </a>

  <ul class="dropdown-menu" aria-labelledby="dropdownMenuLink">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
  </ul>
</div>

When I paste the above code into my project I get this:

2021.11.27 13.15 - 3510 - Argusfish

Is this enough to get you going?

[ben]

Kebab for Bootstrap:
https://jsfiddle.net/djibe89/w0s9yhbv/

[jshine1]

Thank you. I was able to work with it to customize exactly the way I was wanting. This was a big help!

[jshine1]

Thank you Ben. I will look into this method as well!