Dropdowns

Basic Dropdown

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"

Borderless Menu

The menu ships with a default border-base-300 border and a small gap off the trigger so it stands out against content that shares its background. The defaults have zero specificity, so pass menu_css: "border-0" to remove the border (add my-0 to also drop the gap), or any border-* / margin classes to restyle them.

Preview

Code

= daisy_dropdown(title: "No Border Here", menu_css: "border-0") 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"

Custom Button

You can pass in your own button element to the dropdown.

Preview

Code

= 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"

Selectable Items

Build selectable rows without hand-rolling the markup: pass label:, href:, and selected: to with_item, and use the item's leading / trailing slots for an icon and a checkmark. selected: true adds DaisyUI's menu-active highlight. Items with a plain content block still render exactly as before.

Preview

Code

= daisy_dropdown(title: "Sort by", css: "dropdown-end") do |dropdown|
  - dropdown.with_item(label: "Newest first", href: "#", selected: true) do |item|
    - item.with_leading do
      = loco_icon "bars-arrow-down", css: "size-4"
    - item.with_trailing do
      = loco_icon "check", css: "size-4 text-primary"
  - dropdown.with_item(label: "Oldest first", href: "#") do |item|
    - item.with_leading do
      = loco_icon "bars-arrow-up", css: "size-4"
  - dropdown.with_item(href: "#") do |item|
    - item.with_leading do
      = loco_icon "star", css: "size-4"
    Favorites

Fully Custom Dropdown

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.

Note

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.

Preview

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.

Code

.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-48.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.

Borderless Menu

Custom Button

Selectable Items

Docs

Guides

Loco

Daisy