Theme:
Dropdown
Dropdowns show a menu panel relative to a trigger element. They require Alpine.js for toggle behavior.
Basic Dropdown
Click the button to toggle the dropdown (requires Alpine.js).
<div x-data="{ open: false }" class="dui-dropdown">
<button @click="open = !open" class="dui-btn dui-btn-primary">Options</button>
<div x-show="open" @click.outside="open = false"
x-transition class="dui-dropdown-content">
<ul class="dui-menu">
<li><a class="dui-menu-item">Edit profile</a></li>
<li><a class="dui-menu-item">Account settings</a></li>
<li><a class="dui-menu-item">Sign out</a></li>
</ul>
</div>
</div>
Positions
Add dui-dropdown-end, dui-dropdown-top, dui-dropdown-left, or dui-dropdown-right to change the dropdown position.
<div class="dui-dropdown dui-dropdown-end">...</div>
<div class="dui-dropdown dui-dropdown-top">...</div>
<div class="dui-dropdown dui-dropdown-left">...</div>
<div class="dui-dropdown dui-dropdown-right">...</div>