A static copy of the demo at release 0.3.0. Live Components, Turbo Streams and form submits need Symfony: run the full demo.

Dropdown

component

The dropdown component can be used to show a list of menu items when clicking on an element such as a button and hiding it when focusing outside of the triggering element.

Install

php bin/console ux:install dropdown \
    --kit=https://github.com/xormania/uxor:0.3.0

README Source

What it installs

Copies
assets/ → assets/
templates/ → templates/
Recipes
floating turbo
Composer
symfony/ux-icons
twig/html-extra:^3.24.0
symfony/ux-twig-component:^3.5
tales-from-a-dev/twig-tailwind-extra:^1.3.0

Examples (8)

Default

Light
Dark
Code 
<div class="min-h-76">
    <twig:Dropdown id="demo" open>
        <twig:Dropdown:Trigger>
            <twig:Button {{ ...dropdown_trigger_attrs }}>
                Dropdown button
                <twig:ux:icon name="flowbite:chevron-down-outline" class="size-4" aria-hidden="true" />
            </twig:Button>
        </twig:Dropdown:Trigger>

        <twig:Dropdown:Content>
            <twig:Dropdown:Group>
                <twig:Dropdown:Item href="#">Dashboard</twig:Dropdown:Item>
                <twig:Dropdown:Item href="#">Settings</twig:Dropdown:Item>
                <twig:Dropdown:Item href="#">Earnings</twig:Dropdown:Item>
                <twig:Dropdown:Item href="#">Sign out</twig:Dropdown:Item>
            </twig:Dropdown:Group>
        </twig:Dropdown:Content>
    </twig:Dropdown>
</div>

Delay duration

Light
Dark
Code 
<div class="min-h-76">
    <twig:Dropdown id="delay" triggerType="hover" delay="500">
        <twig:Dropdown:Trigger>
            <twig:Button {{ ...dropdown_trigger_attrs }}>
                Dropdown button
                <twig:ux:icon name="flowbite:chevron-down-outline" class="size-4" aria-hidden="true" />
            </twig:Button>
        </twig:Dropdown:Trigger>

        <twig:Dropdown:Content>
            <twig:Dropdown:Group>
                <twig:Dropdown:Item href="#">Dashboard</twig:Dropdown:Item>
                <twig:Dropdown:Item href="#">Settings</twig:Dropdown:Item>
                <twig:Dropdown:Item href="#">Earnings</twig:Dropdown:Item>
                <twig:Dropdown:Item href="#">Sign out</twig:Dropdown:Item>
            </twig:Dropdown:Group>
        </twig:Dropdown:Content>
    </twig:Dropdown>
</div>

With header

Light
Dark
Code 
<div class="min-h-126">
    <twig:Dropdown id="header">
        <twig:Dropdown:Trigger>
            <twig:Button {{ ...dropdown_trigger_attrs }}>
                Dropdown button
                <twig:ux:icon name="flowbite:chevron-down-outline" class="size-4" aria-hidden="true" />
            </twig:Button>
        </twig:Dropdown:Trigger>

        <twig:Dropdown:Content>
            <twig:Dropdown:Header class="flex items-center space-x-1.5">
                <twig:Avatar>
                    <twig:Avatar:Image src="https://flowbite.com/docs/images/people/profile-picture-5.jpg" alt="Bonnie image" />
                    <twig:Avatar:Fallback>BG</twig:Avatar:Fallback>
                </twig:Avatar>
                <div class="text-sm">
                    <div class="font-medium text-heading">Bonnie Green</div>
                    <div class="truncate text-body">name@flowbite.com</div>
                </div>
                <twig:Badge border="bordered">PRO</twig:Badge>
            </twig:Dropdown:Header>
            <twig:Dropdown:Group>
                <twig:Dropdown:Item href="#">
                    <twig:ux:icon name="flowbite:user-outline" class="size-4 me-2" aria-hidden="true" />
                    Dashboard
                </twig:Dropdown:Item>
                <twig:Dropdown:Item href="#">
                    <twig:ux:icon name="flowbite:adjustments-horizontal-outline" class="size-4 me-2" aria-hidden="true" />
                    Settings
                </twig:Dropdown:Item>
                <twig:Dropdown:Item href="#">
                    <twig:ux:icon name="flowbite:lock-outline" class="size-4 me-2" aria-hidden="true" />
                    Privacy
                </twig:Dropdown:Item>
            </twig:Dropdown:Group>
            <twig:Dropdown:Group>
                <twig:Dropdown:Item class="text-fg-danger" href="#">
                    <twig:ux:icon name="flowbite:arrow-left-to-bracket-outline" class="size-4 me-2" aria-hidden="true" />
                    Sign out
                </twig:Dropdown:Item>
            </twig:Dropdown:Group>
        </twig:Dropdown:Content>
    </twig:Dropdown>
</div>

Multi level dropdown

Light
Dark
Code 
<div class="min-h-126">
    <twig:Dropdown id="demo" open>
        <twig:Dropdown:Trigger>
            <twig:Button {{ ...dropdown_trigger_attrs }}>
                Dropdown button
                <twig:ux:icon name="flowbite:chevron-down-outline" class="size-4" aria-hidden="true" />
            </twig:Button>
        </twig:Dropdown:Trigger>

        <twig:Dropdown:Content>
            <twig:Dropdown:Group>
                <twig:Dropdown:Item href="#">Dashboard</twig:Dropdown:Item>
                <twig:Dropdown:Sub id="level1">
                    <twig:Dropdown:SubTrigger>
                        Settings
                    </twig:Dropdown:SubTrigger>

                    <twig:Dropdown:Content>
                        <twig:Dropdown:Group>
                            <twig:Dropdown:Item href="#">Submenu item</twig:Dropdown:Item>
                            <twig:Dropdown:Item href="#">Submenu item</twig:Dropdown:Item>
                        </twig:Dropdown:Group>
                    </twig:Dropdown:Content>
                </twig:Dropdown:Sub>
                <twig:Dropdown:Item href="#">Earnings</twig:Dropdown:Item>
                <twig:Dropdown:Item href="#">Sign out</twig:Dropdown:Item>
            </twig:Dropdown:Group>
        </twig:Dropdown:Content>
    </twig:Dropdown>
</div>

With icon

Light
Dark
Code 
<div class="min-h-76">
    <div class="flex justify-center space-x-4 rtl:space-x-reverse">
        <twig:Dropdown id="icon-vt">
            <twig:Dropdown:Trigger>
                <twig:Button variant="ghost" size="icon" aria-label="More actions" {{ ...dropdown_trigger_attrs }}>
                    <twig:ux:icon name="flowbite:dots-vertical-outline" class="size-6" aria-hidden="true"/>
                </twig:Button>
            </twig:Dropdown:Trigger>

            <twig:Dropdown:Content>
                <twig:Dropdown:Group>
                    <twig:Dropdown:Item href="#">
                        Dashboard
                    </twig:Dropdown:Item>
                    <twig:Dropdown:Item href="#">
                        Settings
                    </twig:Dropdown:Item>
                    <twig:Dropdown:Item href="#">
                        Earnings
                    </twig:Dropdown:Item>
                    <twig:Dropdown:Item href="#">
                        Sign out
                    </twig:Dropdown:Item>
                </twig:Dropdown:Group>
            </twig:Dropdown:Content>
        </twig:Dropdown>

        <twig:Dropdown id="icon-hz">
            <twig:Dropdown:Trigger>
                <twig:Button variant="ghost" size="icon" aria-label="More actions" {{ ...dropdown_trigger_attrs }}>
                    <twig:ux:icon name="flowbite:dots-horizontal-outline" class="size-6" aria-hidden="true"/>
                </twig:Button>
            </twig:Dropdown:Trigger>

            <twig:Dropdown:Content>
                <twig:Dropdown:Group>
                    <twig:Dropdown:Item href="#">
                        Dashboard
                    </twig:Dropdown:Item>
                    <twig:Dropdown:Item href="#">
                        Settings
                    </twig:Dropdown:Item>
                    <twig:Dropdown:Item href="#">
                        Earnings
                    </twig:Dropdown:Item>
                    <twig:Dropdown:Item href="#">
                        Sign out
                    </twig:Dropdown:Item>
                </twig:Dropdown:Group>
            </twig:Dropdown:Content>
        </twig:Dropdown>
    </div>
</div>

Placement

Light
Dark
Code 
<div class="flex min-h-76 flex-wrap items-center gap-4">
    <twig:Dropdown id="placement-top" placement="top">
        <twig:Dropdown:Trigger>
            <twig:Button {{ ...dropdown_trigger_attrs }}>
                Dropdown top
                <twig:ux:icon name="flowbite:chevron-up-outline" class="size-6" aria-hidden="true" />
            </twig:Button>
        </twig:Dropdown:Trigger>
        <twig:Dropdown:Content>
            <twig:Dropdown:Group>
                <twig:Dropdown:Item href="#">Dashboard</twig:Dropdown:Item>
                <twig:Dropdown:Item href="#">Settings</twig:Dropdown:Item>
                <twig:Dropdown:Item href="#">Earnings</twig:Dropdown:Item>
            </twig:Dropdown:Group>
        </twig:Dropdown:Content>
    </twig:Dropdown>

    <twig:Dropdown id="placement-right" placement="right">
        <twig:Dropdown:Trigger>
            <twig:Button {{ ...dropdown_trigger_attrs }}>
                Dropdown right
                <twig:ux:icon name="flowbite:chevron-right-outline" class="size-6" aria-hidden="true" />
            </twig:Button>
        </twig:Dropdown:Trigger>
        <twig:Dropdown:Content>
            <twig:Dropdown:Group>
                <twig:Dropdown:Item href="#">Dashboard</twig:Dropdown:Item>
                <twig:Dropdown:Item href="#">Settings</twig:Dropdown:Item>
                <twig:Dropdown:Item href="#">Earnings</twig:Dropdown:Item>
            </twig:Dropdown:Group>
        </twig:Dropdown:Content>
    </twig:Dropdown>

    <twig:Dropdown id="placement-bottom" placement="bottom">
        <twig:Dropdown:Trigger>
            <twig:Button {{ ...dropdown_trigger_attrs }}>
                Dropdown bottom
                <twig:ux:icon name="flowbite:chevron-down-outline" class="size-6" aria-hidden="true" />
            </twig:Button>
        </twig:Dropdown:Trigger>
        <twig:Dropdown:Content>
            <twig:Dropdown:Group>
                <twig:Dropdown:Item href="#">Dashboard</twig:Dropdown:Item>
                <twig:Dropdown:Item href="#">Settings</twig:Dropdown:Item>
                <twig:Dropdown:Item href="#">Earnings</twig:Dropdown:Item>
            </twig:Dropdown:Group>
        </twig:Dropdown:Content>
    </twig:Dropdown>

    <twig:Dropdown id="placement-left" placement="left">
        <twig:Dropdown:Trigger>
            <twig:Button {{ ...dropdown_trigger_attrs }}>
                <twig:ux:icon name="flowbite:chevron-left-outline" class="size-6" aria-hidden="true" />
                Dropdown left
            </twig:Button>
        </twig:Dropdown:Trigger>
        <twig:Dropdown:Content>
            <twig:Dropdown:Group>
                <twig:Dropdown:Item href="#">Dashboard</twig:Dropdown:Item>
                <twig:Dropdown:Item href="#">Settings</twig:Dropdown:Item>
                <twig:Dropdown:Item href="#">Earnings</twig:Dropdown:Item>
            </twig:Dropdown:Group>
        </twig:Dropdown:Content>
    </twig:Dropdown>
</div>