Dropdown

Dropdown can open a menu or any other element when the button is clicked.

Class name		 Type
dropdown Component Container element
dropdown-content Component Container for content
dropdown-end
Modifier
Aligns to end
dropdown-top
Modifier
Open from top
dropdown-bottom
Modifier
Open from bottom
dropdown-left
Modifier
Open from left
dropdown-right
Modifier
Open from right
dropdown-hover
Modifier
Opens on hover too
dropdown-open
Modifier
Force open

Method 1: using details and summary tags

# Dropdown menu using <details> tag
Stays open until gets clicked again. Or you can close it using JS by removing the `open` attribute
open or close

Method 2: using label and CSS focus

We use a <label tabindex="0"> instead of a <button> because Safari has a bug that prevents the button from being focused.
Using tabindex="0" is required so the dropdown can be focused.
# Dropdown menu
Click outside to close

Positions

# Dropdown / aligns to end
# Dropdown top
# Dropdown top / aligns to end
# Dropdown bottom
# Dropdown bottom / aligns to end
# Dropdown left
# Dropdown left / aligns to end
# Dropdown right
# Dropdown right / aligns to end

Open on hover

# Dropdown on hover

Force open

# Force open

More examples

# Card as dropdown

Card title!

you can use any element as a dropdown.

# Dropdown in navbar
daisyUI
Button
# Helper dropdown
A normal text and a helper dropdown

You needed more info?

Here is a description!

Do you have a question? ask the community
Do you see a bug? open an issue on GitHub
Do you like daisyUI? tweet about it!
Support daisyUI's development: Open Collective

Sponsors

Never google
a command again

Become a sponsor