<!-- Do not copy the div tag below -->
<div class="flex min-w-[250px] p-4 relative before:absolute before:bg-brand-dark before:-top-5 before:-bottom-5 before:-left-5 before:-right-5">
<div class="dropdown" :class="show ? 'dropdown-show' : ''" x-data="{show: false}" role="combobox" :aria-expanded="show" aria-controls="dropdown-menu" aria-haspopup="listbox" aria-label="Label text">
<button type="button" x-ref="dropdownButton" @click="show = !show" aria-haspopup="true" aria-expanded="false" :aria-expanded="show" class=" btn btn-light btn-size-lg btn-icons">
<svg class=" shrink-0" width="24" height="24" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z" stroke="currentColor" stroke-width="1.5" fill="none" />
</svg> Label text
<span class="dropdown-chevron ml-auto" aria-hidden="true">
<span class="flex transition-transform" :class="show ? 'rotate-180' : ''">
<svg class=" shrink-0" width="16" height="16" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path fill-rule="evenodd" clip-rule="evenodd" d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z" fill="currentColor" />
</svg> </span>
</span>
</button>
<div class="dropdown-content" x-show="show" :aria-expanded="show" x-anchor.bottom-start.offset.0="$refs.dropdownButton" x-transition.opacity x-transition:enter.duration.200ms x-cloak @click.outside="show = false">
<!-- Button item -->
<button type="button" class="dropdown-item ">
Item text
</button>
<!-- Link item -->
<a href="https://www.google.com" target="_blank" rel="noopenner noreferer" class="dropdown-item ">
Link item text
</a>
<!-- Button item -->
<button type="button" class="dropdown-item ">
Item text
</button>
<!-- Button item -->
<button type="button" class="dropdown-item ">
<svg class=" shrink-0" width="24" height="24" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z" stroke="currentColor" stroke-width="1.5" fill="none" />
</svg> Item with icon
</button>
</div>
</div>
</div>
<!-- Do not copy the div tag below -->
<div class="flex min-w-[250px] p-4 ">
<div class="dropdown" :class="show ? 'dropdown-show' : ''" x-data="{show: false}" role="combobox" :aria-expanded="show" aria-controls="dropdown-menu" aria-haspopup="listbox" aria-label="Label text">
<button type="button" x-ref="dropdownButton" @click="show = !show" aria-haspopup="true" aria-expanded="false" :aria-expanded="show" class=" btn btn-dark btn-size-lg btn-icons">
<svg class=" shrink-0" width="24" height="24" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z" stroke="currentColor" stroke-width="1.5" fill="none" />
</svg> Label text
<span class="dropdown-chevron ml-auto" aria-hidden="true">
<span class="flex transition-transform" :class="show ? 'rotate-180' : ''">
<svg class=" shrink-0" width="16" height="16" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path fill-rule="evenodd" clip-rule="evenodd" d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z" fill="currentColor" />
</svg> </span>
</span>
</button>
<div class="dropdown-content" x-show="show" :aria-expanded="show" x-anchor.bottom-start.offset.0="$refs.dropdownButton" x-transition.opacity x-transition:enter.duration.200ms x-cloak @click.outside="show = false">
<!-- Button item -->
<button type="button" class="dropdown-item ">
Item text
</button>
<!-- Link item -->
<a href="https://www.google.com" target="_blank" rel="noopenner noreferer" class="dropdown-item ">
Link item text
</a>
<!-- Button item -->
<button type="button" class="dropdown-item ">
Item text
</button>
<!-- Button item -->
<button type="button" class="dropdown-item ">
<svg class=" shrink-0" width="24" height="24" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z" stroke="currentColor" stroke-width="1.5" fill="none" />
</svg> Item with icon
</button>
</div>
</div>
</div>
{% for color in colors %}
<!-- Do not copy the div tag below -->
<div class="flex min-w-[250px] p-4 {{ 'light' in color.color ? 'relative before:absolute before:bg-brand-dark before:-top-5 before:-bottom-5 before:-left-5 before:-right-5' }}">
{% include "@template-dropdown" with {
size: size.size,
color: color.color,
icon_type: icon_type,
disabled: color.disabled,
label: label,
class: class
} %}
</div>
{% endfor %}
{
"label": "Label text",
"colors": [
{
"name": "light",
"color": "light"
},
{
"name": "dark",
"color": "dark"
}
],
"icon_type": "leading-icon"
}
{% render "@template-dropdown" with {...} %}light, darktrue, false | default: falseleading-icon, classic | default: classicstring | default: Label textarray | default: []string | default: Label textleading-icon, classic | default: classicstring | default: null | (tranform the item in a link)true, false | default: false object:string | default: heroicons--user-outlinestring | default: nullobject:string | default: heroicons--user-outlinestring | default: null