data-theme = lofi
Dropdown
Alpine-driven generic dropdown. Swap trigger via slot, or use label prop for a simple button. position (bottom-end default / bottom-start / top-end / top-start), size (sm/md/lg), width (any Tailwind w-* class). Fill the menu slot with links, buttons, or anything.
default
position=bottom-end / size=md / width=w-52 / label="メニュー"
↑ クリックで開閉、外側クリック / Esc で閉じる
positions — bottom-end / bottom-start / top-end / top-start
sizes — sm / md / lg
widths — w-40 / w-52 (default) / w-72 / w-96
custom trigger — slot=trigger でアイコン / アバター等に差し替え
使い方
{{-- 1. 最小: label でボタン化 --}}
<x-dropdown label="メニュー">
<a href="#" class="block px-4 py-2 text-sm hover:bg-base-200">プロフィール</a>
<a href="#" class="block px-4 py-2 text-sm hover:bg-base-200">ログアウト</a>
</x-dropdown>
{{-- 2. 位置・サイズ・幅を変える --}}
<x-dropdown label="設定" position="top-start" size="sm" width="w-64">
...
</x-dropdown>
{{-- 3. trigger を自前で組む (アバター・アイコンボタン等) --}}
<x-dropdown position="bottom-start">
<x-slot:trigger>
<img src="/avatar.png" class="w-10 h-10 rounded-full cursor-pointer">
</x-slot:trigger>
<a href="#" class="block px-4 py-2">プロフィール</a>
</x-dropdown>
data-theme = night
Dropdown
Alpine-driven generic dropdown. Swap trigger via slot, or use label prop for a simple button. position (bottom-end default / bottom-start / top-end / top-start), size (sm/md/lg), width (any Tailwind w-* class). Fill the menu slot with links, buttons, or anything.
default
position=bottom-end / size=md / width=w-52 / label="メニュー"
↑ クリックで開閉、外側クリック / Esc で閉じる
positions — bottom-end / bottom-start / top-end / top-start
sizes — sm / md / lg
widths — w-40 / w-52 (default) / w-72 / w-96
custom trigger — slot=trigger でアイコン / アバター等に差し替え
使い方
{{-- 1. 最小: label でボタン化 --}}
<x-dropdown label="メニュー">
<a href="#" class="block px-4 py-2 text-sm hover:bg-base-200">プロフィール</a>
<a href="#" class="block px-4 py-2 text-sm hover:bg-base-200">ログアウト</a>
</x-dropdown>
{{-- 2. 位置・サイズ・幅を変える --}}
<x-dropdown label="設定" position="top-start" size="sm" width="w-64">
...
</x-dropdown>
{{-- 3. trigger を自前で組む (アバター・アイコンボタン等) --}}
<x-dropdown position="bottom-start">
<x-slot:trigger>
<img src="/avatar.png" class="w-10 h-10 rounded-full cursor-pointer">
</x-slot:trigger>
<a href="#" class="block px-4 py-2">プロフィール</a>
</x-dropdown>