Dropdown (menus)

Dropdown menus display a list of choices on a temporary surface.

Overview

Dropdown menus appear when users interact with a button, action, or other control. They can be opened from a variety of elements, most commonly icon buttons, buttons, and text fields.

              
<!-- dropdown menus -->
<div x-data="{ isOpen: false }" class="relative">
  <button @click="isOpen = !isOpen" class="btn relative flex lsdfdfsdafd pdskdmsdnjw jkuthslatgh h-12 gap-x-2 py-2.5 px-6 rounded-[6.25rem] hover:shadow-md text-sm tracking-[.00714em] font-medium bg-primary-600 text-white dark:bg-primary-200 dark:text-primary-800">
    Show menu
    <span class="material-symbols-outlined">settings</span>
  </button>

  <!-- menus -->
  <ul 
    x-show="isOpen" 
    @click.outside="isOpen = false" 
    @keydown.escape.window="isOpen = false"
    x-transition:enter="transition-all duration-200 ease-out" 
    x-transition:enter-start="opacity-0 scale-75" 
    x-transition:enter-end="opacity-100 scale-100" 
    x-transition:leave="transition-all duration-200 ease-in" 
    x-transition:leave-start="opacity-100 scale-100" 
    x-transition:leave-end="opacity-0 scale-75"
    class="!opacity-100 !visible absolute top-14 z-30 end-0 min-w-[200px] inline-flex oskasdadiaa py-2 rounded overflow-hidden bg-surface-200 dark:bg-surfacedark-200 shadow-md dark:shadow-gray-50/10"
  >
    <li class="relative">
      <a href="#" class="min-h-[3rem] flex lsdfdfsdafd pdskdmsdnjw pajskalamsn py-2.5 px-6 hover-icon hover:bg-secondary-100 dark:hover:bg-secondary-700 hover:bg-opacity-30 dark:hover:bg-opacity-30">
        <span class="material-symbols-outlined">person</span>
        Profile
      </a>
    </li>
    <li class="relative">
      <a href="#" class="min-h-[3rem] flex lsdfdfsdafd pdskdmsdnjw pajskalamsn py-2.5 px-6 hover-icon hover:bg-secondary-100 dark:hover:bg-secondary-700 hover:bg-opacity-30 dark:hover:bg-opacity-30">
        <span class="material-symbols-outlined">settings</span>
        Setting
      </a>
    </li>
    <li class="relative">
      <a href="#" class="min-h-[3rem] flex lsdfdfsdafd pdskdmsdnjw pajskalamsn py-2.5 px-6 hover-icon hover:bg-secondary-100 dark:hover:bg-secondary-700 hover:bg-opacity-30 dark:hover:bg-opacity-30">
        <span class="material-symbols-outlined">help_center</span>
        Help
      </a>
    </li>
    <li class="relative border-t border-gray-200 dark:border-gray-700">
      <a href="#" class="min-h-[3rem] flex lsdfdfsdafd pdskdmsdnjw pajskalamsn py-2.5 px-6 hover-icon hover:bg-secondary-100 dark:hover:bg-secondary-700 hover:bg-opacity-30 dark:hover:bg-opacity-30">
        <span class="material-symbols-outlined">power_settings_new</span>
        Logout
      </a>
    </li>
  </ul>
</div>