<div class="flex gap-4 flex-wrap">
    <!-- Bottom (default) -->
    <c-lb.dropdown>
        <c-lb.dropdown.trigger class="btn m-1">Bottom ⬇️</c-lb.dropdown.trigger>
        <c-lb.dropdown.content class="bg-base-100 rounded-box w-52 p-2 shadow-sm">
            <c-lb.menu class="w-full">
                <c-lb.menu.item>Item 1</c-lb.menu.item>
                <c-lb.menu.item>Item 2</c-lb.menu.item>
            </c-lb.menu>
        </c-lb.dropdown.content>
    </c-lb.dropdown>

    <!-- Top -->
    <c-lb.dropdown placement="top">
        <c-lb.dropdown.trigger class="btn m-1">Top ⬆️</c-lb.dropdown.trigger>
        <c-lb.dropdown.content class="bg-base-100 rounded-box w-52 p-2 shadow-sm">
            <c-lb.menu class="w-full">
                <c-lb.menu.item>Item 1</c-lb.menu.item>
                <c-lb.menu.item>Item 2</c-lb.menu.item>
            </c-lb.menu>
        </c-lb.dropdown.content>
    </c-lb.dropdown>

    <!-- Left -->
    <c-lb.dropdown placement="left">
        <c-lb.dropdown.trigger class="btn m-1">Left ⬅️</c-lb.dropdown.trigger>
        <c-lb.dropdown.content class="bg-base-100 rounded-box w-52 p-2 shadow-sm">
            <c-lb.menu class="w-full">
                <c-lb.menu.item>Item 1</c-lb.menu.item>
                <c-lb.menu.item>Item 2</c-lb.menu.item>
            </c-lb.menu>
        </c-lb.dropdown.content>
    </c-lb.dropdown>

    <!-- Right -->
    <c-lb.dropdown placement="right">
        <c-lb.dropdown.trigger class="btn m-1">Right ➡️</c-lb.dropdown.trigger>
        <c-lb.dropdown.content class="bg-base-100 rounded-box w-52 p-2 shadow-sm">
            <c-lb.menu class="w-full">
                <c-lb.menu.item>Item 1</c-lb.menu.item>
                <c-lb.menu.item>Item 2</c-lb.menu.item>
            </c-lb.menu>
        </c-lb.dropdown.content>
    </c-lb.dropdown>
</div>
