Check out BugBytes overview of labb
UI

Search

Search features are coming soon!

Dropdown

<c-lb.dropdown /> Markdown

Dropdown component for Django: build menus and contextual actions with keyboard navigation. Built with django-cotton, Tailwind CSS, and daisyUI 5.

Dropdown renders a container that reveals a positioned menu when toggled. Use it for navigation submenus, action menus on data rows, or contextual option lists. The trigger can be any element that wraps a c-lb.dropdown.menu.

Basic Dropdown

Click 
<c-lb.dropdown>
    <c-lb.dropdown.trigger class="btn m-1">Click</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.item>Item 3</c-lb.menu.item>
        </c-lb.menu>
    </c-lb.dropdown.content>
</c-lb.dropdown>

With Placement

Bottom ⬇️
Top ⬆️
Left ⬅️
Right ➡️ 
<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>

With Alignment

Bottom Placement

Bottom Start
Bottom Center
Bottom End

Top Placement

Top Start
Top Center
Top End

Left Placement

Left Start
Left Center
Left End

Right Placement

Right Start
Right Center
Right End 
<div class="space-y-8">
    <!-- Bottom placement with different alignments -->
    <div>
        <h3 class="text-lg font-semibold mb-4">Bottom Placement</h3>
        <div class="flex gap-4 flex-wrap">
            <c-lb.dropdown alignment="start">
                <c-lb.dropdown.trigger class="btn m-1">Bottom Start</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>

            <c-lb.dropdown alignment="center">
                <c-lb.dropdown.trigger class="btn m-1">Bottom Center</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>

            <c-lb.dropdown alignment="end">
                <c-lb.dropdown.trigger class="btn m-1">Bottom End</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>
    </div>

    <!-- Top placement with different alignments -->
    <div>
        <h3 class="text-lg font-semibold mb-4">Top Placement</h3>
        <div class="flex gap-4 flex-wrap">
            <c-lb.dropdown placement="top" alignment="start">
                <c-lb.dropdown.trigger class="btn m-1">Top Start</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>

            <c-lb.dropdown placement="top" alignment="center">
                <c-lb.dropdown.trigger class="btn m-1">Top Center</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>

            <c-lb.dropdown placement="top" alignment="end">
                <c-lb.dropdown.trigger class="btn m-1">Top End</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>
    </div>

    <!-- Left placement with different alignments -->
    <div>
        <h3 class="text-lg font-semibold mb-4">Left Placement</h3>
        <div class="flex gap-4 flex-wrap">
            <c-lb.dropdown placement="left" alignment="start">
                <c-lb.dropdown.trigger class="btn m-1">Left Start</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>

            <c-lb.dropdown placement="left" alignment="center">
                <c-lb.dropdown.trigger class="btn m-1">Left Center</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>

            <c-lb.dropdown placement="left" alignment="end">
                <c-lb.dropdown.trigger class="btn m-1">Left End</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>
    </div>

    <!-- Right placement with different alignments -->
    <div>
        <h3 class="text-lg font-semibold mb-4">Right Placement</h3>
        <div class="flex gap-4 flex-wrap">
            <c-lb.dropdown placement="right" alignment="start">
                <c-lb.dropdown.trigger class="btn m-1">Right Start</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>

            <c-lb.dropdown placement="right" alignment="center">
                <c-lb.dropdown.trigger class="btn m-1">Right Center</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>

            <c-lb.dropdown placement="right" alignment="end">
                <c-lb.dropdown.trigger class="btn m-1">Right End</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>
    </div>
</div>

Hover Activation

Hover me 
<c-lb.dropdown hover>
    <c-lb.dropdown.trigger class="btn m-1">Hover me</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.item>Item 3</c-lb.menu.item>
        </c-lb.menu>
    </c-lb.dropdown.content>
</c-lb.dropdown>

Forced Open

Always Open 
<c-lb.dropdown open>
    <c-lb.dropdown.trigger class="btn m-1">Always Open</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.item>Item 3</c-lb.menu.item>
        </c-lb.menu>
    </c-lb.dropdown.content>
</c-lb.dropdown>

With Card Content

Card Content

Dropdown Card

This is a card used as dropdown content. You can use any element as a dropdown.

<c-lb.dropdown>
    <c-lb.dropdown.trigger class="btn m-1">Card Content</c-lb.dropdown.trigger>
    <c-lb.dropdown.content class="card card-sm bg-base-100 z-1 w-64 shadow-sm">
        <c-lb.card.body>
            <h2 class="card-title">Dropdown Card</h2>
            <p>This is a card used as dropdown content. You can use any element as a dropdown.</p>
            <c-lb.card.actions>
                <c-lb.button variant="primary">Action</c-lb.button>
            </c-lb.card.actions>
        </c-lb.card.body>
    </c-lb.dropdown.content>
</c-lb.dropdown>

API Reference

c-lb.dropdown

Property Type Default Required Description
class string - No Additional CSS classes to apply
placement
bottom top left right
bottom No Dropdown placement relative to trigger
alignment
start center end
- No Horizontal alignment of dropdown content
hover boolean False No Enable hover activation instead of focus
open boolean False No Force dropdown to be open
Slot Name Description
default Dropdown content using dropdown.trigger and dropdown.content components

c-lb.dropdown.trigger

Property Type Default Required Description
class string - No Additional CSS classes to apply
as
div button label
div No HTML element to render as

c-lb.dropdown.content

Property Type Default Required Description
class string - No Additional CSS classes to apply
Prev Button
Next FAB / Speed Dial