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>