JavaScript Dropdown

An interactive menu that opens to the bottom of a button using plain JavaScript.

Dropdown Examples

For this component to properly work, we had to add the following script inside the code snippet / HTML file:
<script src="https://unpkg.com/@popperjs/[email protected]/dist/umd/popper.min.js" charset="utf-8"></script>

<div class="flex flex-wrap">
  <div class="w-full sm:w-6/12 md:w-4/12 px-4">
    <div class="relative inline-flex align-middle w-full">
      <button class="text-white font-bold uppercase text-sm px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1 bg-blueGray-700 ease-linear transition-all duration-150" type="button" onclick="openDropdown(event,'dropdown-id')">
        White Dropdown
      </button>
      <div class="hidden bg-white  text-base z-50 float-left py-2 list-none text-left rounded shadow-lg mt-1" style="min-width:12rem" id="dropdown-id">
        <a href="#pablo" class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-blueGray-700">
          Action
        </a>
        <a href="#pablo" class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-blueGray-700">
          Another action
        </a>
        <a href="#pablo" class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-blueGray-700">
          Something else here
        </a>
        <div class="h-0 my-2 border border-solid border-t-0 border-blueGray-800 opacity-25"></div>
        <a href="#pablo" class="text-sm py-2 px-4 font-normal block w-full whitespace-nowrap bg-transparent text-blueGray-700">
          Seprated link
        </a>
      </div>
    </div>
  </div>
</div>
<script src="https://unpkg.com/@popperjs/[email protected]/dist/umd/popper.min.js" charset="utf-8"></script>
<script>
  function openDropdown(event,dropdownID){
    let element = event.target;
    while(element.nodeName !== "BUTTON"){
      element = element.parentNode;
    }
    var popper = Popper.createPopper(element, document.getElementById(dropdownID), {
      placement: 'bottom-start'
    });
    document.getElementById(dropdownID).classList.toggle("hidden");
    document.getElementById(dropdownID).classList.toggle("block");
  }
</script>