Dropdowns are a great way to display a list of items in a compact manner.
A basic dropdown has an icon or a title and a list of items (actions).
= daisy_dropdown(title: "Click to Open") do |dropdown|
- dropdown.with_item do
= link_to "Ruby", "https://www.ruby-lang.org", target: "_blank"
- dropdown.with_item do
= link_to "Rails", "http://www.rubyonrails.org", target: "_blank"
- dropdown.with_item do
= link_to "Hotwire", "https://hotwired.dev/", target: "_blank"
You can pass in your own button element to the dropdown.
= daisy_dropdown do |dropdown|
- dropdown.with_button(icon: "heart", title: "Favorites", css: "btn-primary")
- dropdown.with_item do
= link_to "Ruby", "https://www.ruby-lang.org", target: "_blank"
- dropdown.with_item do
= link_to "Rails", "http://www.rubyonrails.org", target: "_blank"
- dropdown.with_item do
= link_to "Hotwire", "https://hotwired.dev/", target: "_blank"
You can also pass a custom activator allowing you to use any content
instead of just a button to open the dropdown.
Additionally, if no items are setup, the dropdown will simply output any content you provide, meaning you can completely customize the dropdown content as well.
You'll need to manually add the dropdown-content CSS class to the
content wrapper.
We automatically add the role="button" and tabindex="0" attributes
to the custom activator to make it keyboard accessible.
Such a beautiful beach!
Here is some text which will be hidden by the dropdown. We have a lot of extra space below this so you can see the dropdown in action.
You can also click on the Stat item (or focus it using your keyboard) to keep the dropdown open.
Such a beautiful beach!
Here is some text which will be hidden by the dropdown. We have a lot of extra space below this so you can see the dropdown in action.
You can also click on the Stat item (or focus it using your keyboard) to keep the dropdown open.
.flex.flex-col.items-end{ class: "max-w-[500px]" }
= daisy_dropdown(css: "dropdown-end dropdown-hover") do |dropdown|
- # This is the custom activator that will open the dropdown
- dropdown.with_activator(css: "group") do
= daisy_stat(css: "w-60 bg-base-100 border border-base-300 group-focus:border-info rounded-lg",
title: "Places to Visit", description: "Hover to see more.") do
= number_with_delimiter(1208)
- # This is the custom content that will be displayed in the dropdown
- # Note that we manually add the `dropdown-content` class to the wrapper
= daisy_card(css: "mt-2 w-72 dropdown-content bg-base-100 shadow-xl") do |card|
- card.with_top_figure css: "aspect-video", src: image_path("landscapes/beach.jpg")
%p Such a beautiful beach!
- card.with_actions(css: "mt-2 justify-end") do
= daisy_button(css: "btn-primary") do
Book Travel
- # Extra content / space to show the dropdown in action
.mt-4.pb-52.flex.flex-col.gap-4
:markdown
Here is some text which will be hidden by the dropdown. We have a lot of
extra space below this so you can see the dropdown in action.
You can also click on the Stat item (or focus it using your keyboard) to
keep the dropdown open.