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.

You have to add .show classes to show components. Use javascript or your favorite framework to add classes.

              
<!-- dropdown menus -->
<div class="relative inline-block">
  <!-- trigger menus -->
  <button data-type="dropdown" data-target="#dropdown_x1">Show menu</button>

  <!-- menus -->
  <ul id="dropdown_x1" data-type="dropdownmenu" class="[&.show]:!opacity-100 [&.show]:!visible opacity-0 invisible absolute top-14 z-30 transition duration-400 ease-in-out right-0 min-w-[200px] inline-flex flex-col 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 flex-row items-center gap-4 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 flex-row items-center gap-4 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 flex-row items-center gap-4 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 flex-row items-center gap-4 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>