Dropdown

A menu that 'drops down' when clicked/tapped, showing options to choose from or actions to take.

Basic Dropdowns

Native <details> implementation

Preview Code Auto

Details(
    Summary('open or close', cls='btn m-1'),
    Ul(
        Li(A('Item 1')),
        Li(A('Item 2')),
        cls='menu dropdown-content bg-base-100 rounded-box z-[1] w-52 p-2 shadow-sm'
    ),
    cls='dropdown'
)

## Accessibility Considerations We use `div` instead of native `<button>` elements due to a [long-standing Safari bug](https://bugs.webkit.org/show_bug.cgi?id=22261) that prevents proper button focus management. **Why this approach works:** - `tabindex="0"` enables keyboard focus - `role="button"` provides proper ARIA semantics - Works consistently across all modern browsers - Maintains full accessibility compliance This pattern follows WAI-ARIA authoring practices for custom controls while working around browser inconsistencies.

CSS focus behavior dropdown

Preview Code Auto

Div(
    Div('Click', tabindex='0', role='button', cls='btn m-1'),
    Ul(
        Li(A('Item 1')),
        Li(A('Item 2')),
        tabindex='0',
        cls='dropdown-content menu bg-base-100 rounded-box z-[1] w-52 p-2 shadow'
    ),
    cls='dropdown'
)

Behaviors

Hover Trigger

Opens on hover

Preview Code Auto

Div(
    Div('Hover', tabindex='0', role='button', cls='btn m-1'),
    Ul(
        Li(A('Item 1')),
        Li(A('Item 2')),
        tabindex='0',
        cls='dropdown-content menu bg-base-100 rounded-box z-[1] w-52 p-2 shadow'
    ),
    cls='dropdown dropdown-hover'
)

Always Open

Permanently visible dropdown

Preview Code Auto

Div(
    Div('Button', tabindex='0', role='button', cls='btn m-1'),
    Ul(
        Li(A('Item 1')),
        Li(A('Item 2')),
        tabindex='0',
        cls='dropdown-content menu bg-base-100 rounded-box z-[1] w-52 p-2 shadow'
    ),
    cls='dropdown dropdown-open'
)

Positioning

Position: Start

Preview Code Auto

Div(
    Div("Start", tabindex="0", role="button", cls="btn m-1"),
    Ul(
        Li(A('Item 1')),
        Li(A('Item 2')),
        tabindex='0',
        cls='dropdown-content menu bg-base-100 rounded-box z-[1] w-52 p-2 shadow'
    ),
    cls="dropdown dropdown-start"
)

Position: End

Preview Code Auto

Div(
    Div("End", tabindex="0", role="button", cls="btn m-1"),
    Ul(
        Li(A('Item 1')),
        Li(A('Item 2')),
        tabindex='0',
        cls='dropdown-content menu bg-base-100 rounded-box z-[1] w-52 p-2 shadow'
    ),
    cls="dropdown dropdown-end"
)

Position: Center

Preview Code Auto

Div(
    Div("Center", tabindex="0", role="button", cls="btn m-1"),
    Ul(
        Li(A('Item 1')),
        Li(A('Item 2')),
        tabindex='0',
        cls='dropdown-content menu bg-base-100 rounded-box z-[1] w-52 p-2 shadow'
    ),
    cls="dropdown dropdown-center"
)

Position: Top

Preview Code Auto

Div(
    Div("Top", tabindex="0", role="button", cls="btn m-1"),
    Ul(
        Li(A('Item 1')),
        Li(A('Item 2')),
        tabindex='0',
        cls='dropdown-content menu bg-base-100 rounded-box z-[1] w-52 p-2 shadow'
    ),
    cls="dropdown dropdown-top"
)

Position: Top Center

Preview Code Auto

Div(
    Div("Top Center", tabindex="0", role="button", cls="btn m-1"),
    Ul(
        Li(A('Item 1')),
        Li(A('Item 2')),
        tabindex='0',
        cls='dropdown-content menu bg-base-100 rounded-box z-[1] w-52 p-2 shadow'
    ),
    cls="dropdown dropdown-top dropdown-center"
)

Position: Top End

Preview Code Auto

Div(
    Div("Top End", tabindex="0", role="button", cls="btn m-1"),
    Ul(
        Li(A('Item 1')),
        Li(A('Item 2')),
        tabindex='0',
        cls='dropdown-content menu bg-base-100 rounded-box z-[1] w-52 p-2 shadow'
    ),
    cls="dropdown dropdown-top dropdown-end"
)

Position: Bottom (default)

Preview Code Auto

Div(
    Div("Bottom (default)", tabindex="0", role="button", cls="btn m-1"),
    Ul(
        Li(A('Item 1')),
        Li(A('Item 2')),
        tabindex='0',
        cls='dropdown-content menu bg-base-100 rounded-box z-[1] w-52 p-2 shadow'
    ),
    cls="dropdown dropdown-bottom"
)

Position: Bottom (default) End

Preview Code Auto

Div(
    Div("Bottom (default) End", tabindex="0", role="button", cls="btn m-1"),
    Ul(
        Li(A('Item 1')),
        Li(A('Item 2')),
        tabindex='0',
        cls='dropdown-content menu bg-base-100 rounded-box z-[1] w-52 p-2 shadow'
    ),
    cls="dropdown dropdown-bottom dropdown-end"
)

Position: Left

Preview Code Auto

Div(
    Div("Left", tabindex="0", role="button", cls="btn m-1"),
    Ul(
        Li(A('Item 1')),
        Li(A('Item 2')),
        tabindex='0',
        cls='dropdown-content menu bg-base-100 rounded-box z-[1] w-52 p-2 shadow'
    ),
    cls="dropdown dropdown-left"
)

Position: Left Center

Preview Code Auto

Div(
    Div("Left Center", tabindex="0", role="button", cls="btn m-1"),
    Ul(
        Li(A('Item 1')),
        Li(A('Item 2')),
        tabindex='0',
        cls='dropdown-content menu bg-base-100 rounded-box z-[1] w-52 p-2 shadow'
    ),
    cls="dropdown dropdown-left dropdown-center"
)

Position: Left End

Preview Code Auto

Div(
    Div("Left End", tabindex="0", role="button", cls="btn m-1"),
    Ul(
        Li(A('Item 1')),
        Li(A('Item 2')),
        tabindex='0',
        cls='dropdown-content menu bg-base-100 rounded-box z-[1] w-52 p-2 shadow'
    ),
    cls="dropdown dropdown-left dropdown-end"
)

Position: Right

Preview Code Auto

Div(
    Div("Right", tabindex="0", role="button", cls="btn m-1"),
    Ul(
        Li(A('Item 1')),
        Li(A('Item 2')),
        tabindex='0',
        cls='dropdown-content menu bg-base-100 rounded-box z-[1] w-52 p-2 shadow'
    ),
    cls="dropdown dropdown-right"
)

Position: Right End

Preview Code Auto

Div(
    Div("Right End", tabindex="0", role="button", cls="btn m-1"),
    Ul(
        Li(A('Item 1')),
        Li(A('Item 2')),
        tabindex='0',
        cls='dropdown-content menu bg-base-100 rounded-box z-[1] w-52 p-2 shadow'
    ),
    cls="dropdown dropdown-right dropdown-end"
)

Position: Right Center

Preview Code Auto

Div(
    Div("Right Center", tabindex="0", role="button", cls="btn m-1"),
    Ul(
        Li(A('Item 1')),
        Li(A('Item 2')),
        tabindex='0',
        cls='dropdown-content menu bg-base-100 rounded-box z-[1] w-52 p-2 shadow'
    ),
    cls="dropdown dropdown-right dropdown-center"
)

Advanced Examples

Custom dropdown content

Preview Code Auto

Div(
    Div('Click', tabindex='0', role='button', cls='btn m-1'),
    Div(
        Div(
            H3('Card title!', cls='card-title'),
            P('you can use any element as a dropdown.'),
            cls='card-body'
        ),
        tabindex='0',
        cls='dropdown-content card card-compact bg-primary text-primary-content z-[1] w-64 p-2 shadow'
    ),
    cls='dropdown'
)

Dropdown in navigation bar

Preview Code Auto

Div(
    Div(A('daisyUI', cls='ps-4 text-lg font-bold')),
    Div(
        Div(
            A('Button', cls='btn btn-ghost rounded-field'),
            Div(
                Div('Dropdown',
                    tabindex='0',
                    role='button',
                    cls='btn btn-ghost rounded-field'),
                Ul(
                    Li(A('Item 1')),
                    Li(A('Item 2')),
                    tabindex='0',
                    cls='menu dropdown-content bg-base-200 rounded-box z-[1] mt-4 w-52 p-2 shadow-sm'
                ),
                cls='dropdown dropdown-end'
            ),
            cls='flex items-stretch'
        ),
        cls='flex grow justify-end px-2'
    ),
    cls='navbar bg-base-200'
)

Information tooltip pattern

Preview Code Auto

Div(
    "A normal text and a helper dropdown",
    Div(
        Div(
            SVG,
            tabindex="0",
            role="button",
            cls="btn btn-circle btn-ghost btn-xs text-info"
        ),
        Div(
            Div(
                H2("Need more info?", cls="card-title"),
                P("Detailed description here"),
                tabindex="0",
                cls="card-body"
            ),
            tabindex="0",
            cls="dropdown-content card compact bg-base-100 rounded-box z-[1] w-64 shadow"
        ),
        cls="dropdown dropdown-end"
    )
)

Class Reference

Class	Type	Description
dropdown	Component	Base dropdown container
dropdown-content	Part	Dropdown menu container
dropdown-start	Placement	Aligns dropdown to start of button [Default]
dropdown-center	Placement	Aligns dropdown to center of button
dropdown-end	Placement	Aligns dropdown to end of button
dropdown-top	Placement	Opens above trigger
dropdown-bottom	Placement	Opens below trigger [Default]
dropdown-left	Placement	Opens to the left
dropdown-right	Placement	Opens to the right
dropdown-hover	Modifier	Opens on hover
dropdown-open	Modifier	Force open state

Do you have a question? ask the community

Do you see a bug? open an issue on GitHub

LLMs Context: Full Markdown | This Component

Resources: DaisyUI | TailwindCSS | FastHTML Repo

Dropdown

Basic Dropdowns

Details Tag Dropdown

Focus-based Dropdown

Behaviors

Hover Trigger

Always Open

Positioning

Position: Start

Position: End

Position: Center

Position: Top

Position: Top Center

Position: Top End

Position: Bottom (default)

Position: Bottom (default) End

Position: Left

Position: Left Center

Position: Left End

Position: Right

Position: Right End

Position: Right Center

Advanced Examples

Card Dropdown

Card Title

Navbar Integration

Helper Card Dropdown

Need more info?

Class Reference