# Dropdown (menus)

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

- person Profile
- settings Setting
- help_center Help
- power_settings_new Logout

## 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.

- person Profile
- settings Setting
- help_center Help
- power_settings_new Logout

- Profile arrow_right
  - Sub menu
  - Sub menu
- Setting
- Help
- Logout

    <!-- 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>

### Search

## Theme Settings

### Light & Dark

### Theme Colors

### Layouts