Dashpro | Tailwind Admin Template

Dropdown

Toggle contextual overlays for displaying lists of links and more with the Alpine js

Dropdown Button

                    
<!-- default dropdown -->
<div x-data="{ show: false }" class="relative me-4">
  <button @click="show = ! show" type="button" class="flex py-2 uajskeiolksb text-center rounded-md leading-normal text-gray-100 bg-purple-500 border border-purple-500 hover:text-white hover:bg-purple-700 hover:ring-0 hover:border-purple-700 focus:bg-purple-700 focus:border-purple-700 focus:outline-none focus:ring-0">
    <span class="pe-2">Dropdown</span> 
    <svg class="fill-current text-gray-100" xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M7 10l5 5 5-5z"/><path d="M0 0h24v24H0z" fill="none"/></svg>
  </button>
  <div x-show="show" @click.away="show = false" style="display: none" class="absolute min-w-56 bg-white z-10 rounded border border-gray-200 dark:bg-gray-800 dark:border-gray-700" style="min-width:12rem">
      <a class="block px-3 py-2 hover:bg-gray-100 focus:bg-gray-100 dark:hover:bg-gray-900 dark:focus:bg-gray-900" href="#">Action</a>
      <a class="block px-3 py-2 hover:bg-gray-100 focus:bg-gray-100 dark:hover:bg-gray-900 dark:focus:bg-gray-900" href="#">Another action</a>
      <a class="block px-3 py-2 hover:bg-gray-100 focus:bg-gray-100 dark:hover:bg-gray-900 dark:focus:bg-gray-900" href="#">Something else here</a>
      <hr class="border-t border-gray-200 dark:border-gray-700 my-0">
      <a class="block px-3 py-2 hover:bg-gray-100 focus:bg-gray-100 dark:hover:bg-gray-900 dark:focus:bg-gray-900" href="#">Separated link</a>
  </div>
</div>

<!-- up dropdown -->
<div x-data="{ show: false }" class="relative me-4">
  <button @click="show = ! show" type="button" class="flex py-2 uajskeiolksb text-center rounded-md leading-normal text-gray-100 bg-purple-500 border border-purple-500 hover:text-white hover:bg-purple-700 hover:ring-0 hover:border-purple-700 focus:bg-purple-700 focus:border-purple-700 focus:outline-none focus:ring-0">
    <span class="pe-2">Dropdown</span> 
    <svg class="fill-current text-gray-100 transform rotate-180" xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M7 10l5 5 5-5z"/><path d="M0 0h24v24H0z" fill="none"/></svg>
  </button>
  <div x-show="show" @click.away="show = false" style="display: none" class="absolute min-w-56 start-0 uansklekamsh top-auto bg-white z-10 rounded border border-gray-200 dark:bg-gray-800 dark:border-gray-700" style="min-width:12rem">
    <a class="block px-3 py-2 hover:bg-gray-100 focus:bg-gray-100 dark:hover:bg-gray-900 dark:focus:bg-gray-900" href="#">Action</a>
    <a class="block px-3 py-2 hover:bg-gray-100 focus:bg-gray-100 dark:hover:bg-gray-900 dark:focus:bg-gray-900" href="#">Another action</a>
    <a class="block px-3 py-2 hover:bg-gray-100 focus:bg-gray-100 dark:hover:bg-gray-900 dark:focus:bg-gray-900" href="#">Something else here</a>
    <hr class="border-t border-gray-200 dark:border-gray-700 my-0">
    <a class="block px-3 py-2 hover:bg-gray-100 focus:bg-gray-100 dark:hover:bg-gray-900 dark:focus:bg-gray-900" href="#">Separated link</a>
  </div>
</div>

<!-- right dropdown -->
<div x-data="{ show: false }" class="relative me-4">
  <button @click="show = ! show" type="button" class="flex py-2 uajskeiolksb text-center rounded-md leading-normal text-gray-100 bg-purple-500 border border-purple-500 hover:text-white hover:bg-purple-700 hover:ring-0 hover:border-purple-700 focus:bg-purple-700 focus:border-purple-700 focus:outline-none focus:ring-0">
    <span class="pe-2">Dropdown</span> 
    <svg class="fill-current text-gray-100 transform -rotate-90" xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M7 10l5 5 5-5z"/><path d="M0 0h24v24H0z" fill="none"/></svg>
  </button>
  <div x-show="show" @click.away="show = false" style="display: none" class="absolute min-w-56 top-0 start-full end-auto bg-white z-10 rounded border border-gray-200 dark:bg-gray-800 dark:border-gray-700" style="min-width:12rem">
    <a class="block px-3 py-2 hover:bg-gray-100 focus:bg-gray-100 dark:hover:bg-gray-900 dark:focus:bg-gray-900" href="#">Action</a>
    <a class="block px-3 py-2 hover:bg-gray-100 focus:bg-gray-100 dark:hover:bg-gray-900 dark:focus:bg-gray-900" href="#">Another action</a>
    <a class="block px-3 py-2 hover:bg-gray-100 focus:bg-gray-100 dark:hover:bg-gray-900 dark:focus:bg-gray-900" href="#">Something else here</a>
    <hr class="border-t border-gray-200 dark:border-gray-700 my-0">
    <a class="block px-3 py-2 hover:bg-gray-100 focus:bg-gray-100 dark:hover:bg-gray-900 dark:focus:bg-gray-900" href="#">Separated link</a>
  </div>
</div>

<!-- left dropdown -->
<div x-data="{ show: false }" class="relative me-4">
  <button @click="show = ! show" type="button" class="flex py-2 uajskeiolksb text-center rounded-md leading-normal text-gray-100 bg-purple-500 border border-purple-500 hover:text-white hover:bg-purple-700 hover:ring-0 hover:border-purple-700 focus:bg-purple-700 focus:border-purple-700 focus:outline-none focus:ring-0">
    <svg class="fill-current text-gray-100 transform rotate-90" xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M7 10l5 5 5-5z"/><path d="M0 0h24v24H0z" fill="none"/></svg> <span class="ps-2">Dropdown</span>
  </button>
  <div x-show="show" @click.away="show = false" style="display: none" class="absolute min-w-56 top-0 start-auto end-full bg-white z-10 rounded border border-gray-200 dark:bg-gray-800 dark:border-gray-700" style="min-width:12rem">
    <a class="block px-3 py-2 hover:bg-gray-100 focus:bg-gray-100 dark:hover:bg-gray-900 dark:focus:bg-gray-900" href="#">Action</a>
    <a class="block px-3 py-2 hover:bg-gray-100 focus:bg-gray-100 dark:hover:bg-gray-900 dark:focus:bg-gray-900" href="#">Another action</a>
    <a class="block px-3 py-2 hover:bg-gray-100 focus:bg-gray-100 dark:hover:bg-gray-900 dark:focus:bg-gray-900" href="#">Something else here</a>
    <hr class="border-t border-gray-200 dark:border-gray-700 my-0">
    <a class="block px-3 py-2 hover:bg-gray-100 focus:bg-gray-100 dark:hover:bg-gray-900 dark:focus:bg-gray-900" href="#">Separated link</a>
  </div>
</div>

<!-- Split dropdown -->
<div x-data="{ show: false }" class="relative inline-flex me-2" role="group">
  <button type="button" class="flex py-2 uajskeiolksb text-center rounded-s leading-normal text-gray-100 bg-purple-500 border border-purple-500 hover:text-white hover:bg-purple-700 hover:ring-0 hover:border-purple-700 focus:bg-purple-700 focus:border-purple-700 focus:outline-none focus:ring-0 -me-0.5">
    <span class="pe-2">Dropdown</span>
  </button>
  <button @click="show = ! show" type="button" class="flex py-2 uajskeiolksb text-center rounded-e leading-normal text-gray-100 bg-purple-500 border border-purple-500 hover:text-white hover:bg-purple-700 hover:ring-0 hover:border-purple-700 focus:bg-purple-700 focus:border-purple-700 focus:outline-none focus:ring-0 -ms-0.5">
    <svg class="fill-current text-gray-100" xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M7 10l5 5 5-5z"/><path d="M0 0h24v24H0z" fill="none"/></svg>
  </button>
  <div x-show="show" @click.away="show = false" style="display: none" class="absolute min-w-56 top-full bottom-auto start-0 bg-white z-10 rounded border border-gray-200 dark:bg-gray-800 dark:border-gray-700" style="min-width:12rem">
    <a class="block px-3 py-2 hover:bg-gray-100 focus:bg-gray-100 dark:hover:bg-gray-900 dark:focus:bg-gray-900" href="#">Action</a>
    <a class="block px-3 py-2 hover:bg-gray-100 focus:bg-gray-100 dark:hover:bg-gray-900 dark:focus:bg-gray-900" href="#">Another action</a>
    <a class="block px-3 py-2 hover:bg-gray-100 focus:bg-gray-100 dark:hover:bg-gray-900 dark:focus:bg-gray-900" href="#">Something else here</a>
    <hr class="border-t border-gray-200 dark:border-gray-700 my-0">
    <a class="block px-3 py-2 hover:bg-gray-100 focus:bg-gray-100 dark:hover:bg-gray-900 dark:focus:bg-gray-900" href="#">Separated link</a>
  </div>
</div>

Dropdown Navbar

                    
<!-- dropdown -->
<li class="relative" x-data="{ open: false }" @keydown.escape.stop="open = false" @mouseleave="open = false">
  <a id="dropdown-01" class="group block py-3 lg:py-7 dkslaoeyhnmj hover:text-purple-500 focus:text-purple-500 dark:hover:text-gray-100 dark:focus:text-gray-100" href="javascript:;" @mouseenter="open = !open" aria-haspopup="true" x-bind:aria-expanded="open" :class="{ 'text-purple-500 dark:text-gray-100': open }">
    <span class="absolute bottom-4 start-1/2 transition-transform ltr:-translate-x-1/2 rtl:translate-x-1/2 w-6 h-0.5 bg-purple-500 duration-700 ease-in-out opacity-0 group-hover:opacity-100" :class="{ 'opacity-100': open }"></span>
    Dropdown
    <!-- caret -->
    <span class="inline-block ms-2">
      <svg xmlns="http://www.w3.org/2000/svg" width=".8rem" height=".8rem" fill="currentColor" viewBox="0 0 512 512"><polyline points="112 184 256 328 400 184" style="fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:48px"/></svg>
    </span>
  </a>
  <!-- dropdown menu -->
  <ul class="block absolute start-1/2 end-auto transform ltr:-translate-x-1/2 rtl:translate-x-1/2 border-t-2 border-purple-500 rounded rounded-t-none top-full z-50 py-0.5 text-start bg-white dark:bg-gray-800 shadow-md" style="min-width: 12rem; display: none" x-description="Dropdown menu" x-show="open" role="menu" aria-orientation="vertical" aria-labelledby="dropdown-01" x-transition:enter="transition duration-200" x-transition:enter-start="transform opacity-0 translate-y-4" x-transition:enter-end="transform opacity-100 translate-y-0" x-transition:leave="transition translate-y-4" x-transition:leave-start="transform opacity-100 translate-y-0" x-transition:leave-end="transform opacity-0 translate-y-4">
    <li class="relative">
      <a class="block w-full py-2 dkslaoeyhnmj clear-both whitespace-nowrap hover:text-purple-500 dark:hover:text-gray-100" href="#">Dropdown item</a>
    </li>
    <li class="relative">
      <a class="block w-full py-2 dkslaoeyhnmj clear-both whitespace-nowrap hover:text-purple-500 dark:hover:text-gray-100" href="#">Dropdown item</a>
    </li>
    <li class="relative">
      <a class="block w-full py-2 dkslaoeyhnmj clear-both whitespace-nowrap hover:text-purple-500 dark:hover:text-gray-100" href="#">Dropdown item</a>
    </li>
  </ul>
</li>
<li class="relative">
  <a class="group block py-3 lg:py-7 dkslaoeyhnmj hover:text-purple-500 focus:text-purple-500 dark:hover:text-gray-100 dark:focus:text-gray-100" href="#">
    <span class="absolute bottom-4 start-1/2 transition-transform ltr:-translate-x-1/2 rtl:translate-x-1/2 w-6 h-0.5 bg-purple-500 duration-700 ease-in-out opacity-0 group-hover:opacity-100"></span>
    Menu
  </a>
</li>

You can change hover dropdown to click dropdown with replace @mouseleave with @click.away and @mouseenter with @click