Pinion UI — Dropdown

最小: label でボタン化

<x-dropdown label="Menu">
    <a href="#" class="block px-4 py-2 text-sm hover:bg-base-200 text-base-content">Profile</a>
    <a href="#" class="block px-4 py-2 text-sm hover:bg-base-200 text-base-content">Settings</a>
    <x-menu-divider />
    <a href="#" class="block px-4 py-2 text-sm hover:bg-base-200 text-error">Log out</a>
</x-dropdown>

<div x-data="{ open: false }" @click.outside="open = false" @keydown.escape.window="open = false" class="relative inline-block w-fit">
<button type="button" @click="open = !open" class="inline-flex items-center justify-center gap-1.5 font-medium whitespace-nowrap transition-colors rounded-[var(--radius-field)] border-[length:var(--border)] border-base-300 bg-base-100 text-base-content hover:bg-base-200 cursor-pointer h-[var(--h-field-md)] px-[var(--px-field-md)] text-[length:var(--text-field-md)]">Menu <svg class="w-4 h-4 transition-transform" :class="open &amp;&amp; 'rotate-180'" fill="none" viewbox="0 0 24 24" stroke="currentcolor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5"></path></svg></button>
<div x-show="open" x-transition:enter="transition ease-out duration-150" x-transition:enter-start="opacity-0 scale-95" x-transition:enter-end="opacity-100 scale-100" x-transition:leave="transition ease-in duration-100" x-transition:leave-start="opacity-100 scale-100" x-transition:leave-end="opacity-0 scale-95" class="absolute z-40 right-0 top-full mt-1 w-52 bg-base-100 border-[length:var(--border)] border-base-300 rounded-[var(--radius-box)] shadow-[var(--shadow-box)] py-1 overflow-hidden" x-cloak="">
<a href="#" class="block px-4 py-2 text-sm hover:bg-base-200 text-base-content">Profile</a>
<a href="#" class="block px-4 py-2 text-sm hover:bg-base-200 text-base-content">Settings</a>
<div role="separator" class="my-1 border-t border-base-content/10"></div><a href="#" class="block px-4 py-2 text-sm hover:bg-base-200 text-error">Log out</a>
</div>
</div>

position — bottom-end / bottom-start / top-end / top-start

Opens down, right-aligned Item 2

Opens down, left-aligned Item 2

Opens up, right-aligned Item 2

Opens up, left-aligned Item 2

<x-dropdown label="bottom-end" position="bottom-end">
    <a href="#" class="block px-4 py-2 text-sm hover:bg-base-200 text-base-content">Opens down, right-aligned</a>
    <a href="#" class="block px-4 py-2 text-sm hover:bg-base-200 text-base-content">Item 2</a>
</x-dropdown>
<x-dropdown label="bottom-start" position="bottom-start">
    <a href="#" class="block px-4 py-2 text-sm hover:bg-base-200 text-base-content">Opens down, left-aligned</a>
    <a href="#" class="block px-4 py-2 text-sm hover:bg-base-200 text-base-content">Item 2</a>
</x-dropdown>
<x-dropdown label="top-end" position="top-end">
    <a href="#" class="block px-4 py-2 text-sm hover:bg-base-200 text-base-content">Opens up, right-aligned</a>
    <a href="#" class="block px-4 py-2 text-sm hover:bg-base-200 text-base-content">Item 2</a>
</x-dropdown>
<x-dropdown label="top-start" position="top-start">
    <a href="#" class="block px-4 py-2 text-sm hover:bg-base-200 text-base-content">Opens up, left-aligned</a>
    <a href="#" class="block px-4 py-2 text-sm hover:bg-base-200 text-base-content">Item 2</a>
</x-dropdown>

<div x-data="{ open: false }" @click.outside="open = false" @keydown.escape.window="open = false" class="relative inline-block w-fit">
<button type="button" @click="open = !open" class="inline-flex items-center justify-center gap-1.5 font-medium whitespace-nowrap transition-colors rounded-[var(--radius-field)] border-[length:var(--border)] border-base-300 bg-base-100 text-base-content hover:bg-base-200 cursor-pointer h-[var(--h-field-md)] px-[var(--px-field-md)] text-[length:var(--text-field-md)]">bottom-end <svg class="w-4 h-4 transition-transform" :class="open &amp;&amp; 'rotate-180'" fill="none" viewbox="0 0 24 24" stroke="currentcolor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5"></path></svg></button>
<div x-show="open" x-transition:enter="transition ease-out duration-150" x-transition:enter-start="opacity-0 scale-95" x-transition:enter-end="opacity-100 scale-100" x-transition:leave="transition ease-in duration-100" x-transition:leave-start="opacity-100 scale-100" x-transition:leave-end="opacity-0 scale-95" class="absolute z-40 right-0 top-full mt-1 w-52 bg-base-100 border-[length:var(--border)] border-base-300 rounded-[var(--radius-box)] shadow-[var(--shadow-box)] py-1 overflow-hidden" x-cloak="">
<a href="#" class="block px-4 py-2 text-sm hover:bg-base-200 text-base-content">Opens down, right-aligned</a>
<a href="#" class="block px-4 py-2 text-sm hover:bg-base-200 text-base-content">Item 2</a>
</div>
</div>
<div x-data="{ open: false }" @click.outside="open = false" @keydown.escape.window="open = false" class="relative inline-block w-fit">
<button type="button" @click="open = !open" class="inline-flex items-center justify-center gap-1.5 font-medium whitespace-nowrap transition-colors rounded-[var(--radius-field)] border-[length:var(--border)] border-base-300 bg-base-100 text-base-content hover:bg-base-200 cursor-pointer h-[var(--h-field-md)] px-[var(--px-field-md)] text-[length:var(--text-field-md)]">bottom-start <svg class="w-4 h-4 transition-transform" :class="open &amp;&amp; 'rotate-180'" fill="none" viewbox="0 0 24 24" stroke="currentcolor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5"></path></svg></button>
<div x-show="open" x-transition:enter="transition ease-out duration-150" x-transition:enter-start="opacity-0 scale-95" x-transition:enter-end="opacity-100 scale-100" x-transition:leave="transition ease-in duration-100" x-transition:leave-start="opacity-100 scale-100" x-transition:leave-end="opacity-0 scale-95" class="absolute z-40 left-0 top-full mt-1 w-52 bg-base-100 border-[length:var(--border)] border-base-300 rounded-[var(--radius-box)] shadow-[var(--shadow-box)] py-1 overflow-hidden" x-cloak="">
<a href="#" class="block px-4 py-2 text-sm hover:bg-base-200 text-base-content">Opens down, left-aligned</a>
<a href="#" class="block px-4 py-2 text-sm hover:bg-base-200 text-base-content">Item 2</a>
</div>
</div>
<div x-data="{ open: false }" @click.outside="open = false" @keydown.escape.window="open = false" class="relative inline-block w-fit">
<button type="button" @click="open = !open" class="inline-flex items-center justify-center gap-1.5 font-medium whitespace-nowrap transition-colors rounded-[var(--radius-field)] border-[length:var(--border)] border-base-300 bg-base-100 text-base-content hover:bg-base-200 cursor-pointer h-[var(--h-field-md)] px-[var(--px-field-md)] text-[length:var(--text-field-md)]">top-end <svg class="w-4 h-4 transition-transform" :class="open &amp;&amp; 'rotate-180'" fill="none" viewbox="0 0 24 24" stroke="currentcolor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5"></path></svg></button>
<div x-show="open" x-transition:enter="transition ease-out duration-150" x-transition:enter-start="opacity-0 scale-95" x-transition:enter-end="opacity-100 scale-100" x-transition:leave="transition ease-in duration-100" x-transition:leave-start="opacity-100 scale-100" x-transition:leave-end="opacity-0 scale-95" class="absolute z-40 right-0 bottom-full mb-1 w-52 bg-base-100 border-[length:var(--border)] border-base-300 rounded-[var(--radius-box)] shadow-[var(--shadow-box)] py-1 overflow-hidden" x-cloak="">
<a href="#" class="block px-4 py-2 text-sm hover:bg-base-200 text-base-content">Opens up, right-aligned</a>
<a href="#" class="block px-4 py-2 text-sm hover:bg-base-200 text-base-content">Item 2</a>
</div>
</div>
<div x-data="{ open: false }" @click.outside="open = false" @keydown.escape.window="open = false" class="relative inline-block w-fit">
<button type="button" @click="open = !open" class="inline-flex items-center justify-center gap-1.5 font-medium whitespace-nowrap transition-colors rounded-[var(--radius-field)] border-[length:var(--border)] border-base-300 bg-base-100 text-base-content hover:bg-base-200 cursor-pointer h-[var(--h-field-md)] px-[var(--px-field-md)] text-[length:var(--text-field-md)]">top-start <svg class="w-4 h-4 transition-transform" :class="open &amp;&amp; 'rotate-180'" fill="none" viewbox="0 0 24 24" stroke="currentcolor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5"></path></svg></button>
<div x-show="open" x-transition:enter="transition ease-out duration-150" x-transition:enter-start="opacity-0 scale-95" x-transition:enter-end="opacity-100 scale-100" x-transition:leave="transition ease-in duration-100" x-transition:leave-start="opacity-100 scale-100" x-transition:leave-end="opacity-0 scale-95" class="absolute z-40 left-0 bottom-full mb-1 w-52 bg-base-100 border-[length:var(--border)] border-base-300 rounded-[var(--radius-box)] shadow-[var(--shadow-box)] py-1 overflow-hidden" x-cloak="">
<a href="#" class="block px-4 py-2 text-sm hover:bg-base-200 text-base-content">Opens up, left-aligned</a>
<a href="#" class="block px-4 py-2 text-sm hover:bg-base-200 text-base-content">Item 2</a>
</div>
</div>

size — sm / md / lg

Small item 1 Small item 2

Standard item 1 Standard item 2

Large item 1 Large item 2

<x-dropdown label="sm" size="sm">
    <a href="#" class="block px-3 py-1.5 text-xs hover:bg-base-200 text-base-content">Small item 1</a>
    <a href="#" class="block px-3 py-1.5 text-xs hover:bg-base-200 text-base-content">Small item 2</a>
</x-dropdown>
<x-dropdown label="md (default)" size="md">
    <a href="#" class="block px-4 py-2 text-sm hover:bg-base-200 text-base-content">Standard item 1</a>
    <a href="#" class="block px-4 py-2 text-sm hover:bg-base-200 text-base-content">Standard item 2</a>
</x-dropdown>
<x-dropdown label="lg" size="lg">
    <a href="#" class="block px-5 py-2.5 text-base hover:bg-base-200 text-base-content">Large item 1</a>
    <a href="#" class="block px-5 py-2.5 text-base hover:bg-base-200 text-base-content">Large item 2</a>
</x-dropdown>

<div x-data="{ open: false }" @click.outside="open = false" @keydown.escape.window="open = false" class="relative inline-block w-fit">
<button type="button" @click="open = !open" class="inline-flex items-center justify-center gap-1.5 font-medium whitespace-nowrap transition-colors rounded-[var(--radius-field)] border-[length:var(--border)] border-base-300 bg-base-100 text-base-content hover:bg-base-200 cursor-pointer h-[var(--h-field-sm)] px-[var(--px-field-sm)] text-[length:var(--text-field-sm)]">sm <svg class="w-4 h-4 transition-transform" :class="open &amp;&amp; 'rotate-180'" fill="none" viewbox="0 0 24 24" stroke="currentcolor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5"></path></svg></button>
<div x-show="open" x-transition:enter="transition ease-out duration-150" x-transition:enter-start="opacity-0 scale-95" x-transition:enter-end="opacity-100 scale-100" x-transition:leave="transition ease-in duration-100" x-transition:leave-start="opacity-100 scale-100" x-transition:leave-end="opacity-0 scale-95" class="absolute z-40 right-0 top-full mt-1 w-52 bg-base-100 border-[length:var(--border)] border-base-300 rounded-[var(--radius-box)] shadow-[var(--shadow-box)] py-1 overflow-hidden" x-cloak="">
<a href="#" class="block px-3 py-1.5 text-xs hover:bg-base-200 text-base-content">Small item 1</a>
<a href="#" class="block px-3 py-1.5 text-xs hover:bg-base-200 text-base-content">Small item 2</a>
</div>
</div>
<div x-data="{ open: false }" @click.outside="open = false" @keydown.escape.window="open = false" class="relative inline-block w-fit">
<button type="button" @click="open = !open" class="inline-flex items-center justify-center gap-1.5 font-medium whitespace-nowrap transition-colors rounded-[var(--radius-field)] border-[length:var(--border)] border-base-300 bg-base-100 text-base-content hover:bg-base-200 cursor-pointer h-[var(--h-field-md)] px-[var(--px-field-md)] text-[length:var(--text-field-md)]">md (default) <svg class="w-4 h-4 transition-transform" :class="open &amp;&amp; 'rotate-180'" fill="none" viewbox="0 0 24 24" stroke="currentcolor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5"></path></svg></button>
<div x-show="open" x-transition:enter="transition ease-out duration-150" x-transition:enter-start="opacity-0 scale-95" x-transition:enter-end="opacity-100 scale-100" x-transition:leave="transition ease-in duration-100" x-transition:leave-start="opacity-100 scale-100" x-transition:leave-end="opacity-0 scale-95" class="absolute z-40 right-0 top-full mt-1 w-52 bg-base-100 border-[length:var(--border)] border-base-300 rounded-[var(--radius-box)] shadow-[var(--shadow-box)] py-1 overflow-hidden" x-cloak="">
<a href="#" class="block px-4 py-2 text-sm hover:bg-base-200 text-base-content">Standard item 1</a>
<a href="#" class="block px-4 py-2 text-sm hover:bg-base-200 text-base-content">Standard item 2</a>
</div>
</div>
<div x-data="{ open: false }" @click.outside="open = false" @keydown.escape.window="open = false" class="relative inline-block w-fit">
<button type="button" @click="open = !open" class="inline-flex items-center justify-center gap-1.5 font-medium whitespace-nowrap transition-colors rounded-[var(--radius-field)] border-[length:var(--border)] border-base-300 bg-base-100 text-base-content hover:bg-base-200 cursor-pointer h-[var(--h-field-lg)] px-[var(--px-field-lg)] text-[length:var(--text-field-lg)]">lg <svg class="w-4 h-4 transition-transform" :class="open &amp;&amp; 'rotate-180'" fill="none" viewbox="0 0 24 24" stroke="currentcolor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5"></path></svg></button>
<div x-show="open" x-transition:enter="transition ease-out duration-150" x-transition:enter-start="opacity-0 scale-95" x-transition:enter-end="opacity-100 scale-100" x-transition:leave="transition ease-in duration-100" x-transition:leave-start="opacity-100 scale-100" x-transition:leave-end="opacity-0 scale-95" class="absolute z-40 right-0 top-full mt-1 w-52 bg-base-100 border-[length:var(--border)] border-base-300 rounded-[var(--radius-box)] shadow-[var(--shadow-box)] py-1 overflow-hidden" x-cloak="">
<a href="#" class="block px-5 py-2.5 text-base hover:bg-base-200 text-base-content">Large item 1</a>
<a href="#" class="block px-5 py-2.5 text-base hover:bg-base-200 text-base-content">Large item 2</a>
</div>
</div>

width — w-40 / w-52 (default) / w-72 / w-96

Narrow

Standard

Wide

Extra wide

<x-dropdown label="w-40" width="w-40">
    <a href="#" class="block px-4 py-2 text-sm hover:bg-base-200 text-base-content">Narrow</a>
</x-dropdown>
<x-dropdown label="w-52 (default)" width="w-52">
    <a href="#" class="block px-4 py-2 text-sm hover:bg-base-200 text-base-content">Standard</a>
</x-dropdown>
<x-dropdown label="w-72" width="w-72">
    <a href="#" class="block px-4 py-2 text-sm hover:bg-base-200 text-base-content">Wide</a>
</x-dropdown>
<x-dropdown label="w-96" width="w-96">
    <a href="#" class="block px-4 py-2 text-sm hover:bg-base-200 text-base-content">Extra wide</a>
</x-dropdown>

<div x-data="{ open: false }" @click.outside="open = false" @keydown.escape.window="open = false" class="relative inline-block w-fit">
<button type="button" @click="open = !open" class="inline-flex items-center justify-center gap-1.5 font-medium whitespace-nowrap transition-colors rounded-[var(--radius-field)] border-[length:var(--border)] border-base-300 bg-base-100 text-base-content hover:bg-base-200 cursor-pointer h-[var(--h-field-md)] px-[var(--px-field-md)] text-[length:var(--text-field-md)]">w-40 <svg class="w-4 h-4 transition-transform" :class="open &amp;&amp; 'rotate-180'" fill="none" viewbox="0 0 24 24" stroke="currentcolor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5"></path></svg></button>
<div x-show="open" x-transition:enter="transition ease-out duration-150" x-transition:enter-start="opacity-0 scale-95" x-transition:enter-end="opacity-100 scale-100" x-transition:leave="transition ease-in duration-100" x-transition:leave-start="opacity-100 scale-100" x-transition:leave-end="opacity-0 scale-95" class="absolute z-40 right-0 top-full mt-1 w-40 bg-base-100 border-[length:var(--border)] border-base-300 rounded-[var(--radius-box)] shadow-[var(--shadow-box)] py-1 overflow-hidden" x-cloak="">
<a href="#" class="block px-4 py-2 text-sm hover:bg-base-200 text-base-content">Narrow</a>
</div>
</div>
<div x-data="{ open: false }" @click.outside="open = false" @keydown.escape.window="open = false" class="relative inline-block w-fit">
<button type="button" @click="open = !open" class="inline-flex items-center justify-center gap-1.5 font-medium whitespace-nowrap transition-colors rounded-[var(--radius-field)] border-[length:var(--border)] border-base-300 bg-base-100 text-base-content hover:bg-base-200 cursor-pointer h-[var(--h-field-md)] px-[var(--px-field-md)] text-[length:var(--text-field-md)]">w-52 (default) <svg class="w-4 h-4 transition-transform" :class="open &amp;&amp; 'rotate-180'" fill="none" viewbox="0 0 24 24" stroke="currentcolor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5"></path></svg></button>
<div x-show="open" x-transition:enter="transition ease-out duration-150" x-transition:enter-start="opacity-0 scale-95" x-transition:enter-end="opacity-100 scale-100" x-transition:leave="transition ease-in duration-100" x-transition:leave-start="opacity-100 scale-100" x-transition:leave-end="opacity-0 scale-95" class="absolute z-40 right-0 top-full mt-1 w-52 bg-base-100 border-[length:var(--border)] border-base-300 rounded-[var(--radius-box)] shadow-[var(--shadow-box)] py-1 overflow-hidden" x-cloak="">
<a href="#" class="block px-4 py-2 text-sm hover:bg-base-200 text-base-content">Standard</a>
</div>
</div>
<div x-data="{ open: false }" @click.outside="open = false" @keydown.escape.window="open = false" class="relative inline-block w-fit">
<button type="button" @click="open = !open" class="inline-flex items-center justify-center gap-1.5 font-medium whitespace-nowrap transition-colors rounded-[var(--radius-field)] border-[length:var(--border)] border-base-300 bg-base-100 text-base-content hover:bg-base-200 cursor-pointer h-[var(--h-field-md)] px-[var(--px-field-md)] text-[length:var(--text-field-md)]">w-72 <svg class="w-4 h-4 transition-transform" :class="open &amp;&amp; 'rotate-180'" fill="none" viewbox="0 0 24 24" stroke="currentcolor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5"></path></svg></button>
<div x-show="open" x-transition:enter="transition ease-out duration-150" x-transition:enter-start="opacity-0 scale-95" x-transition:enter-end="opacity-100 scale-100" x-transition:leave="transition ease-in duration-100" x-transition:leave-start="opacity-100 scale-100" x-transition:leave-end="opacity-0 scale-95" class="absolute z-40 right-0 top-full mt-1 w-72 bg-base-100 border-[length:var(--border)] border-base-300 rounded-[var(--radius-box)] shadow-[var(--shadow-box)] py-1 overflow-hidden" x-cloak="">
<a href="#" class="block px-4 py-2 text-sm hover:bg-base-200 text-base-content">Wide</a>
</div>
</div>
<div x-data="{ open: false }" @click.outside="open = false" @keydown.escape.window="open = false" class="relative inline-block w-fit">
<button type="button" @click="open = !open" class="inline-flex items-center justify-center gap-1.5 font-medium whitespace-nowrap transition-colors rounded-[var(--radius-field)] border-[length:var(--border)] border-base-300 bg-base-100 text-base-content hover:bg-base-200 cursor-pointer h-[var(--h-field-md)] px-[var(--px-field-md)] text-[length:var(--text-field-md)]">w-96 <svg class="w-4 h-4 transition-transform" :class="open &amp;&amp; 'rotate-180'" fill="none" viewbox="0 0 24 24" stroke="currentcolor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5"></path></svg></button>
<div x-show="open" x-transition:enter="transition ease-out duration-150" x-transition:enter-start="opacity-0 scale-95" x-transition:enter-end="opacity-100 scale-100" x-transition:leave="transition ease-in duration-100" x-transition:leave-start="opacity-100 scale-100" x-transition:leave-end="opacity-0 scale-95" class="absolute z-40 right-0 top-full mt-1 w-96 bg-base-100 border-[length:var(--border)] border-base-300 rounded-[var(--radius-box)] shadow-[var(--shadow-box)] py-1 overflow-hidden" x-cloak="">
<a href="#" class="block px-4 py-2 text-sm hover:bg-base-200 text-base-content">Extra wide</a>
</div>
</div>

trigger を自前で組む (アバター・アイコンボタン等)

Edit Duplicate Delete

YT

Yamada Taro

taro@example.com

Profile Account settings

Log out

<x-dropdown>
    <x-slot:trigger>
        <button class="inline-flex items-center gap-2 px-3 py-2 rounded-[var(--radius-field)] bg-primary text-primary-content text-sm font-medium">
            <x-i type="hamburger-menu" variant="linear" class="w-4 h-4" />
            Actions
        </button>
    </x-slot:trigger>
    <a href="#" class="block px-4 py-2 text-sm hover:bg-base-200 text-base-content">Edit</a>
    <a href="#" class="block px-4 py-2 text-sm hover:bg-base-200 text-base-content">Duplicate</a>
    <a href="#" class="block px-4 py-2 text-sm hover:bg-base-200 text-error">Delete</a>
</x-dropdown>
<x-dropdown position="bottom-start">
    <x-slot:trigger>
        <div class="inline-flex items-center justify-center w-10 h-10 rounded-full bg-base-300 text-base-content font-semibold cursor-pointer">YT</div>
    </x-slot:trigger>
    <div class="px-4 py-2 border-b border-base-300">
        <div class="text-sm font-medium text-base-content">Yamada Taro</div>
        <div class="text-xs text-base-content/60">taro@example.com</div>
    </div>
    <a href="#" class="block px-4 py-2 text-sm hover:bg-base-200 text-base-content">Profile</a>
    <a href="#" class="block px-4 py-2 text-sm hover:bg-base-200 text-base-content">Account settings</a>
    <x-menu-divider />
    <a href="#" class="block px-4 py-2 text-sm hover:bg-base-200 text-error">Log out</a>
</x-dropdown>

<div x-data="{ open: false }" @click.outside="open = false" @keydown.escape.window="open = false" class="relative inline-block w-fit">
<div @click="open = !open" class="cursor-pointer">
<button class="inline-flex items-center gap-2 px-3 py-2 rounded-[var(--radius-field)] bg-primary text-primary-content text-sm font-medium"><svg class="w-4 h-4" viewbox="0 0 24 24">
<path fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="1.5" d="M20 7H4m16 5H4m16 5H4"></path></svg> Actions</button>
</div>
<div x-show="open" x-transition:enter="transition ease-out duration-150" x-transition:enter-start="opacity-0 scale-95" x-transition:enter-end="opacity-100 scale-100" x-transition:leave="transition ease-in duration-100" x-transition:leave-start="opacity-100 scale-100" x-transition:leave-end="opacity-0 scale-95" class="absolute z-40 right-0 top-full mt-1 w-52 bg-base-100 border-[length:var(--border)] border-base-300 rounded-[var(--radius-box)] shadow-[var(--shadow-box)] py-1 overflow-hidden" x-cloak="">
<a href="#" class="block px-4 py-2 text-sm hover:bg-base-200 text-base-content">Edit</a>
<a href="#" class="block px-4 py-2 text-sm hover:bg-base-200 text-base-content">Duplicate</a>
<a href="#" class="block px-4 py-2 text-sm hover:bg-base-200 text-error">Delete</a>
</div>
</div>
<div x-data="{ open: false }" @click.outside="open = false" @keydown.escape.window="open = false" class="relative inline-block w-fit">
<div @click="open = !open" class="cursor-pointer">
<div class="inline-flex items-center justify-center w-10 h-10 rounded-full bg-base-300 text-base-content font-semibold cursor-pointer">
            YT
        </div>
</div>
<div x-show="open" x-transition:enter="transition ease-out duration-150" x-transition:enter-start="opacity-0 scale-95" x-transition:enter-end="opacity-100 scale-100" x-transition:leave="transition ease-in duration-100" x-transition:leave-start="opacity-100 scale-100" x-transition:leave-end="opacity-0 scale-95" class="absolute z-40 left-0 top-full mt-1 w-52 bg-base-100 border-[length:var(--border)] border-base-300 rounded-[var(--radius-box)] shadow-[var(--shadow-box)] py-1 overflow-hidden" x-cloak="">
<div class="px-4 py-2 border-b border-base-300">
<div class="text-sm font-medium text-base-content">
                Yamada Taro
            </div>
<div class="text-xs text-base-content/60">
                taro@example.com
            </div>
</div><a href="#" class="block px-4 py-2 text-sm hover:bg-base-200 text-base-content">Profile</a>
<a href="#" class="block px-4 py-2 text-sm hover:bg-base-200 text-base-content">Account settings</a>
<div role="separator" class="my-1 border-t border-base-content/10"></div><a href="#" class="block px-4 py-2 text-sm hover:bg-base-200 text-error">Log out</a>
</div>
</div>

menu-divider でグループ分け (区切り線がパネル両端まで届く)

<x-dropdown label="Account">
    <x-menu-item icon="user">Profile</x-menu-item>
    <x-menu-item icon="settings">Settings</x-menu-item>
    <x-menu-divider />
    <x-menu-item icon="logout">Sign out</x-menu-item>
</x-dropdown>

<div x-data="{ open: false }" @click.outside="open = false" @keydown.escape.window="open = false" class="relative inline-block w-fit">
<button type="button" @click="open = !open" class="inline-flex items-center justify-center gap-1.5 font-medium whitespace-nowrap transition-colors rounded-[var(--radius-field)] border-[length:var(--border)] border-base-300 bg-base-100 text-base-content hover:bg-base-200 cursor-pointer h-[var(--h-field-md)] px-[var(--px-field-md)] text-[length:var(--text-field-md)]">Account <svg class="w-4 h-4 transition-transform" :class="open &amp;&amp; 'rotate-180'" fill="none" viewbox="0 0 24 24" stroke="currentcolor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5"></path></svg></button>
<div x-show="open" x-transition:enter="transition ease-out duration-150" x-transition:enter-start="opacity-0 scale-95" x-transition:enter-end="opacity-100 scale-100" x-transition:leave="transition ease-in duration-100" x-transition:leave-start="opacity-100 scale-100" x-transition:leave-end="opacity-0 scale-95" class="absolute z-40 right-0 top-full mt-1 w-52 bg-base-100 border-[length:var(--border)] border-base-300 rounded-[var(--radius-box)] shadow-[var(--shadow-box)] py-1 overflow-hidden" x-cloak="">
<button class="w-full flex items-center gap-2 transition-colors min-h-[var(--h-field-sm)] px-[var(--px-field-md)] text-[length:var(--text-field-md)] text-base-content hover:bg-base-200 cursor-pointer" type="button"><svg class="w-4 h-4 shrink-0" viewbox="0 0 24 24">
<circle cx="12" cy="6" r="4" fill="currentColor"></circle>
<path fill="currentColor" d="M20 17.5c0 2.485 0 4.5-8 4.5s-8-2.015-8-4.5S7.582 13 12 13s8 2.015 8 4.5" opacity=".3"></path></svg> Profile</button>
<button class="w-full flex items-center gap-2 transition-colors min-h-[var(--h-field-sm)] px-[var(--px-field-md)] text-[length:var(--text-field-md)] text-base-content hover:bg-base-200 cursor-pointer" type="button"><svg class="w-4 h-4 shrink-0" viewbox="0 0 24 24">
<path fill="currentColor" fill-rule="evenodd" d="M14.279 2.152C13.909 2 13.439 2 12.5 2s-1.408 0-1.779.152a2 2 0 0 0-1.09 1.083c-.094.223-.13.484-.145.863a1.62 1.62 0 0 1-.796 1.353a1.64 1.64 0 0 1-1.579.008c-.338-.178-.583-.276-.825-.308a2.03 2.03 0 0 0-1.49.396c-.318.242-.553.646-1.022 1.453c-.47.807-.704 1.21-.757 1.605c-.07.526.074 1.058.4 1.479c.148.192.357.353.68.555c.477.297.783.803.783 1.361s-.306 1.064-.782 1.36c-.324.203-.533.364-.682.556a2 2 0 0 0-.399 1.479c.053.394.287.798.757 1.605s.704 1.21 1.022 1.453c.424.323.96.465 1.49.396c.242-.032.487-.13.825-.308a1.64 1.64 0 0 1 1.58.008c.486.28.774.795.795 1.353c.015.38.051.64.145.863c.204.49.596.88 1.09 1.083c.37.152.84.152 1.779.152s1.409 0 1.779-.152a2 2 0 0 0 1.09-1.083c.094-.223.13-.483.145-.863c.02-.558.309-1.074.796-1.353a1.64 1.64 0 0 1 1.579-.008c.338.178.583.276.825.308c.53.07 1.066-.073 1.49-.396c.318-.242.553-.646 1.022-1.453c.47-.807.704-1.21.757-1.605a2 2 0 0 0-.4-1.479c-.148-.192-.357-.353-.68-.555c-.477-.297-.783-.803-.783-1.361s.306-1.064.782-1.36c.324-.203.533-.364.682-.556a2 2 0 0 0 .399-1.479c-.053-.394-.287-.798-.757-1.605s-.704-1.21-1.022-1.453a2.03 2.03 0 0 0-1.49-.396c-.242.032-.487.13-.825.308a1.64 1.64 0 0 1-1.58-.008a1.62 1.62 0 0 1-.795-1.353c-.015-.38-.051-.64-.145-.863a2 2 0 0 0-1.09-1.083" clip-rule="evenodd" opacity=".3"></path>
<path fill="currentColor" d="M15.523 12c0 1.657-1.354 3-3.023 3s-3.023-1.343-3.023-3S10.83 9 12.5 9s3.023 1.343 3.023 3"></path></svg> Settings</button>
<div role="separator" class="my-1 border-t border-base-content/10"></div><button class="w-full flex items-center gap-2 transition-colors min-h-[var(--h-field-sm)] px-[var(--px-field-md)] text-[length:var(--text-field-md)] text-base-content hover:bg-base-200 cursor-pointer" type="button"><svg class="w-4 h-4 shrink-0" viewbox="0 0 24 24">
<path fill="currentColor" d="M12 20a8 8 0 1 1 0-16z" opacity=".3"></path>
<path fill="currentColor" fill-rule="evenodd" d="M16.47 8.47a.75.75 0 0 0 0 1.06l1.72 1.72H10a.75.75 0 0 0 0 1.5h8.19l-1.72 1.72a.75.75 0 1 0 1.06 1.06l3-3a.75.75 0 0 0 0-1.06l-3-3a.75.75 0 0 0-1.06 0" clip-rule="evenodd"></path></svg> Sign out</button>
</div>
</div>

block: 親幅いっぱいに広げる (サイドバー下部・フォーム行)

<div class="w-64 rounded-[var(--radius-box)] border border-dashed border-base-300 p-sm">
    <x-dropdown label="Workspace" block>
        <x-menu-item icon="user">Profile</x-menu-item>
        <x-menu-item icon="settings">Settings</x-menu-item>
        <x-menu-divider />
        <x-menu-item icon="logout">Sign out</x-menu-item>
    </x-dropdown>
</div>
<div class="w-64 rounded-[var(--radius-box)] border border-dashed border-base-300 p-sm">
    <x-dropdown label="Workspace (top-start)" position="top-start" block>
        <x-menu-item icon="user">Profile</x-menu-item>
        <x-menu-item icon="settings">Settings</x-menu-item>
        <x-menu-divider />
        <x-menu-item icon="logout">Sign out</x-menu-item>
    </x-dropdown>
</div>

<div class="w-64 rounded-[var(--radius-box)] border border-dashed border-base-300 p-sm">
<div x-data="{ open: false }" @click.outside="open = false" @keydown.escape.window="open = false" class="relative block w-full">
<button type="button" @click="open = !open" class="inline-flex items-center justify-center gap-1.5 font-medium whitespace-nowrap transition-colors rounded-[var(--radius-field)] border-[length:var(--border)] border-base-300 bg-base-100 text-base-content hover:bg-base-200 cursor-pointer h-[var(--h-field-md)] px-[var(--px-field-md)] text-[length:var(--text-field-md)]">Workspace <svg class="w-4 h-4 transition-transform" :class="open &amp;&amp; 'rotate-180'" fill="none" viewbox="0 0 24 24" stroke="currentcolor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5"></path></svg></button>
<div x-show="open" x-transition:enter="transition ease-out duration-150" x-transition:enter-start="opacity-0 scale-95" x-transition:enter-end="opacity-100 scale-100" x-transition:leave="transition ease-in duration-100" x-transition:leave-start="opacity-100 scale-100" x-transition:leave-end="opacity-0 scale-95" class="absolute z-40 left-0 right-0 top-full mt-1 bg-base-100 border-[length:var(--border)] border-base-300 rounded-[var(--radius-box)] shadow-[var(--shadow-box)] py-1 overflow-hidden" x-cloak="">
<button class="w-full flex items-center gap-2 transition-colors min-h-[var(--h-field-sm)] px-[var(--px-field-md)] text-[length:var(--text-field-md)] text-base-content hover:bg-base-200 cursor-pointer" type="button"><svg class="w-4 h-4 shrink-0" viewbox="0 0 24 24">
<circle cx="12" cy="6" r="4" fill="currentColor"></circle>
<path fill="currentColor" d="M20 17.5c0 2.485 0 4.5-8 4.5s-8-2.015-8-4.5S7.582 13 12 13s8 2.015 8 4.5" opacity=".3"></path></svg> Profile</button>
<button class="w-full flex items-center gap-2 transition-colors min-h-[var(--h-field-sm)] px-[var(--px-field-md)] text-[length:var(--text-field-md)] text-base-content hover:bg-base-200 cursor-pointer" type="button"><svg class="w-4 h-4 shrink-0" viewbox="0 0 24 24">
<path fill="currentColor" fill-rule="evenodd" d="M14.279 2.152C13.909 2 13.439 2 12.5 2s-1.408 0-1.779.152a2 2 0 0 0-1.09 1.083c-.094.223-.13.484-.145.863a1.62 1.62 0 0 1-.796 1.353a1.64 1.64 0 0 1-1.579.008c-.338-.178-.583-.276-.825-.308a2.03 2.03 0 0 0-1.49.396c-.318.242-.553.646-1.022 1.453c-.47.807-.704 1.21-.757 1.605c-.07.526.074 1.058.4 1.479c.148.192.357.353.68.555c.477.297.783.803.783 1.361s-.306 1.064-.782 1.36c-.324.203-.533.364-.682.556a2 2 0 0 0-.399 1.479c.053.394.287.798.757 1.605s.704 1.21 1.022 1.453c.424.323.96.465 1.49.396c.242-.032.487-.13.825-.308a1.64 1.64 0 0 1 1.58.008c.486.28.774.795.795 1.353c.015.38.051.64.145.863c.204.49.596.88 1.09 1.083c.37.152.84.152 1.779.152s1.409 0 1.779-.152a2 2 0 0 0 1.09-1.083c.094-.223.13-.483.145-.863c.02-.558.309-1.074.796-1.353a1.64 1.64 0 0 1 1.579-.008c.338.178.583.276.825.308c.53.07 1.066-.073 1.49-.396c.318-.242.553-.646 1.022-1.453c.47-.807.704-1.21.757-1.605a2 2 0 0 0-.4-1.479c-.148-.192-.357-.353-.68-.555c-.477-.297-.783-.803-.783-1.361s.306-1.064.782-1.36c.324-.203.533-.364.682-.556a2 2 0 0 0 .399-1.479c-.053-.394-.287-.798-.757-1.605s-.704-1.21-1.022-1.453a2.03 2.03 0 0 0-1.49-.396c-.242.032-.487.13-.825.308a1.64 1.64 0 0 1-1.58-.008a1.62 1.62 0 0 1-.795-1.353c-.015-.38-.051-.64-.145-.863a2 2 0 0 0-1.09-1.083" clip-rule="evenodd" opacity=".3"></path>
<path fill="currentColor" d="M15.523 12c0 1.657-1.354 3-3.023 3s-3.023-1.343-3.023-3S10.83 9 12.5 9s3.023 1.343 3.023 3"></path></svg> Settings</button>
<div role="separator" class="my-1 border-t border-base-content/10"></div><button class="w-full flex items-center gap-2 transition-colors min-h-[var(--h-field-sm)] px-[var(--px-field-md)] text-[length:var(--text-field-md)] text-base-content hover:bg-base-200 cursor-pointer" type="button"><svg class="w-4 h-4 shrink-0" viewbox="0 0 24 24">
<path fill="currentColor" d="M12 20a8 8 0 1 1 0-16z" opacity=".3"></path>
<path fill="currentColor" fill-rule="evenodd" d="M16.47 8.47a.75.75 0 0 0 0 1.06l1.72 1.72H10a.75.75 0 0 0 0 1.5h8.19l-1.72 1.72a.75.75 0 1 0 1.06 1.06l3-3a.75.75 0 0 0 0-1.06l-3-3a.75.75 0 0 0-1.06 0" clip-rule="evenodd"></path></svg> Sign out</button>
</div>
</div>
</div>
<div class="w-64 rounded-[var(--radius-box)] border border-dashed border-base-300 p-sm">
<div x-data="{ open: false }" @click.outside="open = false" @keydown.escape.window="open = false" class="relative block w-full">
<button type="button" @click="open = !open" class="inline-flex items-center justify-center gap-1.5 font-medium whitespace-nowrap transition-colors rounded-[var(--radius-field)] border-[length:var(--border)] border-base-300 bg-base-100 text-base-content hover:bg-base-200 cursor-pointer h-[var(--h-field-md)] px-[var(--px-field-md)] text-[length:var(--text-field-md)]">Workspace (top-start) <svg class="w-4 h-4 transition-transform" :class="open &amp;&amp; 'rotate-180'" fill="none" viewbox="0 0 24 24" stroke="currentcolor" stroke-width="2">
<path stroke-linecap="round" stroke-linejoin="round" d="M19.5 8.25l-7.5 7.5-7.5-7.5"></path></svg></button>
<div x-show="open" x-transition:enter="transition ease-out duration-150" x-transition:enter-start="opacity-0 scale-95" x-transition:enter-end="opacity-100 scale-100" x-transition:leave="transition ease-in duration-100" x-transition:leave-start="opacity-100 scale-100" x-transition:leave-end="opacity-0 scale-95" class="absolute z-40 left-0 right-0 bottom-full mb-1 bg-base-100 border-[length:var(--border)] border-base-300 rounded-[var(--radius-box)] shadow-[var(--shadow-box)] py-1 overflow-hidden" x-cloak="">
<button class="w-full flex items-center gap-2 transition-colors min-h-[var(--h-field-sm)] px-[var(--px-field-md)] text-[length:var(--text-field-md)] text-base-content hover:bg-base-200 cursor-pointer" type="button"><svg class="w-4 h-4 shrink-0" viewbox="0 0 24 24">
<circle cx="12" cy="6" r="4" fill="currentColor"></circle>
<path fill="currentColor" d="M20 17.5c0 2.485 0 4.5-8 4.5s-8-2.015-8-4.5S7.582 13 12 13s8 2.015 8 4.5" opacity=".3"></path></svg> Profile</button>
<button class="w-full flex items-center gap-2 transition-colors min-h-[var(--h-field-sm)] px-[var(--px-field-md)] text-[length:var(--text-field-md)] text-base-content hover:bg-base-200 cursor-pointer" type="button"><svg class="w-4 h-4 shrink-0" viewbox="0 0 24 24">
<path fill="currentColor" fill-rule="evenodd" d="M14.279 2.152C13.909 2 13.439 2 12.5 2s-1.408 0-1.779.152a2 2 0 0 0-1.09 1.083c-.094.223-.13.484-.145.863a1.62 1.62 0 0 1-.796 1.353a1.64 1.64 0 0 1-1.579.008c-.338-.178-.583-.276-.825-.308a2.03 2.03 0 0 0-1.49.396c-.318.242-.553.646-1.022 1.453c-.47.807-.704 1.21-.757 1.605c-.07.526.074 1.058.4 1.479c.148.192.357.353.68.555c.477.297.783.803.783 1.361s-.306 1.064-.782 1.36c-.324.203-.533.364-.682.556a2 2 0 0 0-.399 1.479c.053.394.287.798.757 1.605s.704 1.21 1.022 1.453c.424.323.96.465 1.49.396c.242-.032.487-.13.825-.308a1.64 1.64 0 0 1 1.58.008c.486.28.774.795.795 1.353c.015.38.051.64.145.863c.204.49.596.88 1.09 1.083c.37.152.84.152 1.779.152s1.409 0 1.779-.152a2 2 0 0 0 1.09-1.083c.094-.223.13-.483.145-.863c.02-.558.309-1.074.796-1.353a1.64 1.64 0 0 1 1.579-.008c.338.178.583.276.825.308c.53.07 1.066-.073 1.49-.396c.318-.242.553-.646 1.022-1.453c.47-.807.704-1.21.757-1.605a2 2 0 0 0-.4-1.479c-.148-.192-.357-.353-.68-.555c-.477-.297-.783-.803-.783-1.361s.306-1.064.782-1.36c.324-.203.533-.364.682-.556a2 2 0 0 0 .399-1.479c-.053-.394-.287-.798-.757-1.605s-.704-1.21-1.022-1.453a2.03 2.03 0 0 0-1.49-.396c-.242.032-.487.13-.825.308a1.64 1.64 0 0 1-1.58-.008a1.62 1.62 0 0 1-.795-1.353c-.015-.38-.051-.64-.145-.863a2 2 0 0 0-1.09-1.083" clip-rule="evenodd" opacity=".3"></path>
<path fill="currentColor" d="M15.523 12c0 1.657-1.354 3-3.023 3s-3.023-1.343-3.023-3S10.83 9 12.5 9s3.023 1.343 3.023 3"></path></svg> Settings</button>
<div role="separator" class="my-1 border-t border-base-content/10"></div><button class="w-full flex items-center gap-2 transition-colors min-h-[var(--h-field-sm)] px-[var(--px-field-md)] text-[length:var(--text-field-md)] text-base-content hover:bg-base-200 cursor-pointer" type="button"><svg class="w-4 h-4 shrink-0" viewbox="0 0 24 24">
<path fill="currentColor" d="M12 20a8 8 0 1 1 0-16z" opacity=".3"></path>
<path fill="currentColor" fill-rule="evenodd" d="M16.47 8.47a.75.75 0 0 0 0 1.06l1.72 1.72H10a.75.75 0 0 0 0 1.5h8.19l-1.72 1.72a.75.75 0 1 0 1.06 1.06l3-3a.75.75 0 0 0 0-1.06l-3-3a.75.75 0 0 0-1.06 0" clip-rule="evenodd"></path></svg> Sign out</button>
</div>
</div>
</div>