Dropdowns

Dropdown components with various styles and states using the theme.

Variants #

Dropdown variants with their default styling.

<%= primary_dropdown "Primary" do |menu| %>
  <% menu.with_item "Action 1", "#" %>
  <% menu.with_item "Action 2", "#" %>
<% end %>

<%= secondary_dropdown "Secondary" do |menu| %>
  <% menu.with_item "Action 1", "#" %>
  <% menu.with_item "Action 2", "#" %>
<% end %>

<%= naked_dropdown "Naked" do |menu| %>
  <% menu.with_item "Action 1", "#" %>
  <% menu.with_item "Action 2", "#" %>
<% end %>

<%= success_dropdown "Success" do |menu| %>
  <% menu.with_item "Action 1", "#" %>
  <% menu.with_item "Action 2", "#" %>
<% end %>

<%= warning_dropdown "Warning" do |menu| %>
  <% menu.with_item "Action 1", "#" %>
  <% menu.with_item "Action 2", "#" %>
<% end %>

<%= danger_dropdown "Danger" do |menu| %>
  <% menu.with_item "Action 1", "#" %>
  <% menu.with_item "Action 2", "#" %>
<% end %>

new_primary_dropdown("Primary") do |dropdown|
  dropdown.build_menu do |menu|
    menu.build_item("Action 1", "#")
    menu.build_item("Action 2", "#")
  end
end

new_secondary_dropdown("Secondary") do |dropdown|
  dropdown.build_menu do |menu|
    menu.build_item("Action 1", "#")
    menu.build_item("Action 2", "#")
  end
end

new_naked_dropdown("Naked") do |dropdown|
  dropdown.build_menu do |menu|
    menu.build_item("Action 1", "#")
    menu.build_item("Action 2", "#")
  end
end

new_success_dropdown("Success") do |dropdown|
  dropdown.build_menu do |menu|
    menu.build_item("Action 1", "#")
    menu.build_item("Action 2", "#")
  end
end

new_warning_dropdown("Warning") do |dropdown|
  dropdown.build_menu do |menu|
    menu.build_item("Action 1", "#")
    menu.build_item("Action 2", "#")
  end
end

new_danger_dropdown("Danger") do |dropdown|
  dropdown.build_menu do |menu|
    menu.build_item("Action 1", "#")
    menu.build_item("Action 2", "#")
  end
end

<div class="dropdown dropdown-primary dropdown-down" data-controller="dropdown">
  <button data-action="click->dropdown#toggle" class="btn btn-primary btn">
    Primary
    <svg class="dropdown-arrow" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"></path></svg>
  </button>

  <div class="dropdown-menu" data-dropdown-target="menu" data-action="click->dropdown#close">
    <a class="dropdown-menu-item" href="#">Action 1</a>
    <a class="dropdown-menu-item" href="#">Action 2</a>
  </div>
</div>

<div class="dropdown dropdown-secondary dropdown-down" data-controller="dropdown">
  <button data-action="click->dropdown#toggle" class="btn btn-secondary btn">
    Secondary
    <svg class="dropdown-arrow" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"></path></svg>
  </button>

  <div class="dropdown-menu" data-dropdown-target="menu" data-action="click->dropdown#close">
    <a class="dropdown-menu-item" href="#">Action 1</a>
    <a class="dropdown-menu-item" href="#">Action 2</a>
  </div>
</div>

<div class="dropdown dropdown-naked dropdown-down" data-controller="dropdown">
  <button data-action="click->dropdown#toggle" class="btn btn-naked btn">
    Naked
    <svg class="dropdown-arrow" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"></path></svg>
  </button>

  <div class="dropdown-menu" data-dropdown-target="menu" data-action="click->dropdown#close">
    <a class="dropdown-menu-item" href="#">Action 1</a>
    <a class="dropdown-menu-item" href="#">Action 2</a>
  </div>
</div>

<div class="dropdown dropdown-success dropdown-down" data-controller="dropdown">
  <button data-action="click->dropdown#toggle" class="btn btn-success btn">
    Success
    <svg class="dropdown-arrow" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"></path></svg>
  </button>

  <div class="dropdown-menu" data-dropdown-target="menu" data-action="click->dropdown#close">
    <a class="dropdown-menu-item" href="#">Action 1</a>
    <a class="dropdown-menu-item" href="#">Action 2</a>
  </div>
</div>

<div class="dropdown dropdown-warning dropdown-down" data-controller="dropdown">
  <button data-action="click->dropdown#toggle" class="btn btn-warning btn">
    Warning
    <svg class="dropdown-arrow" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"></path></svg>
  </button>

  <div class="dropdown-menu" data-dropdown-target="menu" data-action="click->dropdown#close">
    <a class="dropdown-menu-item" href="#">Action 1</a>
    <a class="dropdown-menu-item" href="#">Action 2</a>
  </div>
</div>

<div class="dropdown dropdown-danger dropdown-down" data-controller="dropdown">
  <button data-action="click->dropdown#toggle" class="btn btn-danger btn">
    Danger
    <svg class="dropdown-arrow" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"></path></svg>
  </button>

  <div class="dropdown-menu" data-dropdown-target="menu" data-action="click->dropdown#close">
    <a class="dropdown-menu-item" href="#">Action 1</a>
    <a class="dropdown-menu-item" href="#">Action 2</a>
  </div>
</div>

Outline Variants #

Outline dropdown variants with transparent backgrounds and colored borders.

<%= outline_primary_dropdown "Outline Primary" do |menu| %>
  <% menu.with_item "Action 1", "#" %>
  <% menu.with_item "Action 2", "#" %>
<% end %>

<%= outline_success_dropdown "Outline Success" do |menu| %>
  <% menu.with_item "Action 1", "#" %>
  <% menu.with_item "Action 2", "#" %>
<% end %>

<%= outline_warning_dropdown "Outline Warning" do |menu| %>
  <% menu.with_item "Action 1", "#" %>
  <% menu.with_item "Action 2", "#" %>
<% end %>

<%= outline_danger_dropdown "Outline Danger" do |menu| %>
  <% menu.with_item "Action 1", "#" %>
  <% menu.with_item "Action 2", "#" %>
<% end %>

new_outline_primary_dropdown("Outline Primary") do |dropdown|
  dropdown.build_menu do |menu|
    menu.build_item("Action 1", "#")
    menu.build_item("Action 2", "#")
  end
end

new_outline_success_dropdown("Outline Success") do |dropdown|
  dropdown.build_menu do |menu|
    menu.build_item("Action 1", "#")
    menu.build_item("Action 2", "#")
  end
end

new_outline_warning_dropdown("Outline Warning") do |dropdown|
  dropdown.build_menu do |menu|
    menu.build_item("Action 1", "#")
    menu.build_item("Action 2", "#")
  end
end

new_outline_danger_dropdown("Outline Danger") do |dropdown|
  dropdown.build_menu do |menu|
    menu.build_item("Action 1", "#")
    menu.build_item("Action 2", "#")
  end
end

<div class="dropdown dropdown-outline-primary dropdown-down" data-controller="dropdown">
  <button data-action="click->dropdown#toggle" class="btn btn-outline-primary btn">
    Outline Primary
    <svg class="dropdown-arrow" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"></path></svg>
  </button>

  <div class="dropdown-menu" data-dropdown-target="menu" data-action="click->dropdown#close">
    <a class="dropdown-menu-item" href="#">Action 1</a>
    <a class="dropdown-menu-item" href="#">Action 2</a>
  </div>
</div>

<div class="dropdown dropdown-outline-success dropdown-down" data-controller="dropdown">
  <button data-action="click->dropdown#toggle" class="btn btn-outline-success btn">
    Outline Success
    <svg class="dropdown-arrow" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"></path></svg>
  </button>

  <div class="dropdown-menu" data-dropdown-target="menu" data-action="click->dropdown#close">
    <a class="dropdown-menu-item" href="#">Action 1</a>
    <a class="dropdown-menu-item" href="#">Action 2</a>
  </div>
</div>

<div class="dropdown dropdown-outline-warning dropdown-down" data-controller="dropdown">
  <button data-action="click->dropdown#toggle" class="btn btn-outline-warning btn">
    Outline Warning
    <svg class="dropdown-arrow" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"></path></svg>
  </button>

  <div class="dropdown-menu" data-dropdown-target="menu" data-action="click->dropdown#close">
    <a class="dropdown-menu-item" href="#">Action 1</a>
    <a class="dropdown-menu-item" href="#">Action 2</a>
  </div>
</div>

<div class="dropdown dropdown-outline-danger dropdown-down" data-controller="dropdown">
  <button data-action="click->dropdown#toggle" class="btn btn-outline-danger btn">
    Outline Danger
    <svg class="dropdown-arrow" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"></path></svg>
  </button>

  <div class="dropdown-menu" data-dropdown-target="menu" data-action="click->dropdown#close">
    <a class="dropdown-menu-item" href="#">Action 1</a>
    <a class="dropdown-menu-item" href="#">Action 2</a>
  </div>
</div>

Icons #

Dropdowns with icons in both trigger and menu items.

<%= primary_dropdown icon("user"), "Profile" do |menu| %>
  <% menu.with_item "Profile", "#", icon: "user" %>
  <% menu.with_item "Settings", "#", icon: "settings" %>
  <% menu.with_item "Sign Out", "#", icon: "x" %>
<% end %>

<%= secondary_dropdown icon("settings"), "Options" do |menu| %>
  <% menu.with_item "Search", "#", icon: "search" %>
  <% menu.with_item "Help", "#", icon: "info" %>
  <% menu.with_item "Delete", "#", icon: "trash" %>
<% end %>

<%= success_dropdown "Skip Caret", skip_caret: true do |menu| %>
  <% menu.with_item "Search", "#", icon: "search" %>
  <% menu.with_item "Help", "#", icon: "info" %>
  <% menu.with_item "Delete", "#", icon: "trash" %>
<% end %>

<%= danger_dropdown "" do |menu| %>
  <% menu.with_item "Search", "#", icon: "search" %>
  <% menu.with_item "Help", "#", icon: "info" %>
  <% menu.with_item "Delete", "#", icon: "trash" %>
<% end %>

new_primary_dropdown(icon("user"), "Profile") do |dropdown|
  dropdown.build_menu do |menu|
    menu.build_item("Profile", "#", icon: "user")
    menu.build_item("Settings", "#", icon: "settings")
    menu.build_item("Sign Out", "#", icon: "x")
  end
end

new_secondary_dropdown(icon("settings"), "Options") do |dropdown|
  dropdown.build_menu do |menu|
    menu.build_item("Search", "#", icon: "search")
    menu.build_item("Help", "#", icon: "info")
    menu.build_item("Delete", "#", icon: "trash")
  end
end

new_success_dropdown("Skip Caret", skip_caret: true) do |dropdown|
  dropdown.build_menu do |menu|
    menu.build_item("Search", "#", icon: "search")
    menu.build_item("Help", "#", icon: "info")
    menu.build_item("Delete", "#", icon: "trash")
  end
end

new_danger_dropdown("") do |dropdown|
  dropdown.build_menu do |menu|
    menu.build_item("Search", "#", icon: "search")
    menu.build_item("Help", "#", icon: "info")
    menu.build_item("Delete", "#", icon: "trash")
  end
end

<div class="dropdown dropdown-primary dropdown-down" data-controller="dropdown">
  <button data-action="click->dropdown#toggle" class="btn btn-primary btn">
    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>
    Profile
    <svg class="dropdown-arrow" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"></path></svg>
  </button>

  <div class="dropdown-menu" data-dropdown-target="menu" data-action="click->dropdown#close">
    <a class="dropdown-menu-item" href="#">
      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>
      Profile
    </a>

    <a class="dropdown-menu-item" href="#">
      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915"></path><circle cx="12" cy="12" r="3"></circle></svg>
      Settings
    </a>

    <a class="dropdown-menu-item" href="#">
      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6 6 18"></path><path d="m6 6 12 12"></path></svg>
      Sign Out
    </a>
  </div>
</div>

<div class="dropdown dropdown-secondary dropdown-down" data-controller="dropdown">
  <button data-action="click->dropdown#toggle" class="btn btn-secondary btn">
    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915"></path><circle cx="12" cy="12" r="3"></circle></svg>
    Options
    <svg class="dropdown-arrow" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"></path></svg>
  </button>

  <div class="dropdown-menu" data-dropdown-target="menu" data-action="click->dropdown#close">
    <a class="dropdown-menu-item" href="#">
      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m21 21-4.34-4.34"></path><circle cx="11" cy="11" r="8"></circle></svg>
      Search
    </a>

    <a class="dropdown-menu-item" href="#">
      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><path d="M12 16v-4"></path><path d="M12 8h.01"></path></svg>
      Help
    </a>

    <a class="dropdown-menu-item" href="#">
      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"></path><path d="M3 6h18"></path><path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path></svg>
      Delete
    </a>
  </div>
</div>

<div class="dropdown dropdown-success dropdown-down" data-controller="dropdown">
  <button data-action="click->dropdown#toggle" class="btn btn-success btn">Skip Caret</button>
  <div class="dropdown-menu" data-dropdown-target="menu" data-action="click->dropdown#close">
    <a class="dropdown-menu-item" href="#">
      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m21 21-4.34-4.34"></path><circle cx="11" cy="11" r="8"></circle></svg>
      Search
    </a>

    <a class="dropdown-menu-item" href="#">
      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><path d="M12 16v-4"></path><path d="M12 8h.01"></path></svg>
      Help
    </a>

    <a class="dropdown-menu-item" href="#">
      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"></path><path d="M3 6h18"></path><path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path></svg>
      Delete
    </a>
  </div>
</div>

<div class="dropdown dropdown-danger dropdown-down" data-controller="dropdown">
  <button data-action="click->dropdown#toggle" class="btn btn-danger btn">
    <svg class="dropdown-arrow" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"></path></svg>
  </button>

  <div class="dropdown-menu" data-dropdown-target="menu" data-action="click->dropdown#close">
    <a class="dropdown-menu-item" href="#">
      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m21 21-4.34-4.34"></path><circle cx="11" cy="11" r="8"></circle></svg>
      Search
    </a>

    <a class="dropdown-menu-item" href="#">
      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><path d="M12 16v-4"></path><path d="M12 8h.01"></path></svg>
      Help
    </a>

    <a class="dropdown-menu-item" href="#">
      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6"></path><path d="M3 6h18"></path><path d="M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path></svg>
      Delete
    </a>
  </div>
</div>

Sizes #

Different dropdown sizes using the size parameter.

<%= primary_dropdown "Small", size: "sm" do |menu| %>
  <% menu.with_item "Action 1", "#" %>
  <% menu.with_item "Action 2", "#" %>
  <% menu.with_item "Action 3", "#" %>
<% end %>

<%= primary_dropdown "Medium (Default)" do |menu| %>
  <% menu.with_item "Action 1", "#" %>
  <% menu.with_item "Action 2", "#" %>
  <% menu.with_item "Action 3", "#" %>
<% end %>

<%= primary_dropdown "Large", size: "lg" do |menu| %>
  <% menu.with_item "Action 1", "#" %>
  <% menu.with_item "Action 2", "#" %>
  <% menu.with_item "Action 3", "#" %>
<% end %>

new_primary_dropdown("Small", size: "sm") do |dropdown|
  dropdown.build_menu do |menu|
    menu.build_item("Action 1", "#")
    menu.build_item("Action 2", "#")
    menu.build_item("Action 3", "#")
  end
end

new_primary_dropdown("Medium (Default)") do |dropdown|
  dropdown.build_menu do |menu|
    menu.build_item("Action 1", "#")
    menu.build_item("Action 2", "#")
    menu.build_item("Action 3", "#")
  end
end

new_primary_dropdown("Large", size: "lg") do |dropdown|
  dropdown.build_menu do |menu|
    menu.build_item("Action 1", "#")
    menu.build_item("Action 2", "#")
    menu.build_item("Action 3", "#")
  end
end

<div class="dropdown dropdown-primary dropdown-sm dropdown-down" data-controller="dropdown">
  <button data-action="click->dropdown#toggle" class="btn btn-primary btn-sm btn">
    Small
    <svg class="dropdown-arrow" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"></path></svg>
  </button>

  <div class="dropdown-menu" data-dropdown-target="menu" data-action="click->dropdown#close">
    <a class="dropdown-menu-item" href="#">Action 1</a>
    <a class="dropdown-menu-item" href="#">Action 2</a>
    <a class="dropdown-menu-item" href="#">Action 3</a>
  </div>
</div>

<div class="dropdown dropdown-primary dropdown-down" data-controller="dropdown">
  <button data-action="click->dropdown#toggle" class="btn btn-primary btn">
    Medium (Default)
    <svg class="dropdown-arrow" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"></path></svg>
  </button>

  <div class="dropdown-menu" data-dropdown-target="menu" data-action="click->dropdown#close">
    <a class="dropdown-menu-item" href="#">Action 1</a>
    <a class="dropdown-menu-item" href="#">Action 2</a>
    <a class="dropdown-menu-item" href="#">Action 3</a>
  </div>
</div>

<div class="dropdown dropdown-primary dropdown-lg dropdown-down" data-controller="dropdown">
  <button data-action="click->dropdown#toggle" class="btn btn-primary btn-lg btn">
    Large
    <svg class="dropdown-arrow" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"></path></svg>
  </button>

  <div class="dropdown-menu" data-dropdown-target="menu" data-action="click->dropdown#close">
    <a class="dropdown-menu-item" href="#">Action 1</a>
    <a class="dropdown-menu-item" href="#">Action 2</a>
    <a class="dropdown-menu-item" href="#">Action 3</a>
  </div>
</div>

Disabled #

Disabled state for dropdown variants.

<%= primary_dropdown "Primary Disabled", disabled: true do |menu| %>
  <% menu.with_item "Action 1", "#" %>
  <% menu.with_item "Action 2", "#" %>
  <% menu.with_item "Action 3", "#" %>
<% end %>

<%= secondary_dropdown "Secondary Disabled", disabled: true do |menu| %>
  <% menu.with_item "Action 1", "#" %>
  <% menu.with_item "Action 2", "#" %>
  <% menu.with_item "Action 3", "#" %>
<% end %>

<%= naked_dropdown "Naked Disabled", disabled: true do |menu| %>
  <% menu.with_item "Action 1", "#" %>
  <% menu.with_item "Action 2", "#" %>
  <% menu.with_item "Action 3", "#" %>
<% end %>

new_primary_dropdown("Primary Disabled", disabled: true) do |dropdown|
  dropdown.build_menu do |menu|
    menu.build_item("Action 1", "#")
    menu.build_item("Action 2", "#")
    menu.build_item("Action 3", "#")
  end
end

new_secondary_dropdown("Secondary Disabled", disabled: true) do |dropdown|
  dropdown.build_menu do |menu|
    menu.build_item("Action 1", "#")
    menu.build_item("Action 2", "#")
    menu.build_item("Action 3", "#")
  end
end

new_naked_dropdown("Naked Disabled", disabled: true) do |dropdown|
  dropdown.build_menu do |menu|
    menu.build_item("Action 1", "#")
    menu.build_item("Action 2", "#")
    menu.build_item("Action 3", "#")
  end
end

<div class="dropdown dropdown-primary dropdown-down" data-controller="dropdown">
  <button data-action="click->dropdown#toggle" class="btn btn-primary btn" disabled="disabled">
    Primary Disabled
    <svg class="dropdown-arrow" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"></path></svg>
  </button>

  <div class="dropdown-menu" data-dropdown-target="menu" data-action="click->dropdown#close">
    <a class="dropdown-menu-item" href="#">Action 1</a>
    <a class="dropdown-menu-item" href="#">Action 2</a>
    <a class="dropdown-menu-item" href="#">Action 3</a>
  </div>
</div>

<div class="dropdown dropdown-secondary dropdown-down" data-controller="dropdown">
  <button data-action="click->dropdown#toggle" class="btn btn-secondary btn" disabled="disabled">
    Secondary Disabled
    <svg class="dropdown-arrow" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"></path></svg>
  </button>

  <div class="dropdown-menu" data-dropdown-target="menu" data-action="click->dropdown#close">
    <a class="dropdown-menu-item" href="#">Action 1</a>
    <a class="dropdown-menu-item" href="#">Action 2</a>
    <a class="dropdown-menu-item" href="#">Action 3</a>
  </div>
</div>

<div class="dropdown dropdown-naked dropdown-down" data-controller="dropdown">
  <button data-action="click->dropdown#toggle" class="btn btn-naked btn" disabled="disabled">
    Naked Disabled
    <svg class="dropdown-arrow" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"></path></svg>
  </button>

  <div class="dropdown-menu" data-dropdown-target="menu" data-action="click->dropdown#close">
    <a class="dropdown-menu-item" href="#">Action 1</a>
    <a class="dropdown-menu-item" href="#">Action 2</a>
    <a class="dropdown-menu-item" href="#">Action 3</a>
  </div>
</div>

Positioning #

Dropdowns with different positioning options.

<%= primary_dropdown "Left Aligned" do |menu| %>
  <% menu.with_item "Action 1", "#" %>
  <% menu.with_item "Action 2", "#" %>
  <% menu.with_item "Action 3", "#" %>
<% end %>

<%= primary_dropdown "Right Aligned", align: "right" do |menu| %>
  <% menu.with_item "Action 1", "#" %>
  <% menu.with_item "Action 2", "#" %>
  <% menu.with_item "Action 3", "#" %>
<% end %>

<%= primary_dropdown "Center Aligned", align: "center" do |menu| %>
  <% menu.with_item "Action 1", "#" %>
  <% menu.with_item "Action 2", "#" %>
  <% menu.with_item "Action 3", "#" %>
<% end %>

<%= primary_dropdown "Drop Up", direction: "up" do |menu| %>
  <% menu.with_item "Up", "#" %>
  <% menu.with_item "Position", "#" %>
<% end %>

<%= primary_dropdown "Drop Up-Right", align: "right", direction: "up" do |menu| %>
  <% menu.with_item "Up", "#" %>
  <% menu.with_item "Position", "#" %>
<% end %>

<%= primary_dropdown "Drop Up-Center", align: "center", direction: "up" do |menu| %>
  <% menu.with_item "Up", "#" %>
  <% menu.with_item "Position", "#" %>
<% end %>

new_primary_dropdown("Left Aligned") do |dropdown|
  dropdown.build_menu do |menu|
    menu.build_item("Action 1", "#")
    menu.build_item("Action 2", "#")
    menu.build_item("Action 3", "#")
  end
end

new_primary_dropdown("Right Aligned", align: "right") do |dropdown|
  dropdown.build_menu do |menu|
    menu.build_item("Action 1", "#")
    menu.build_item("Action 2", "#")
    menu.build_item("Action 3", "#")
  end
end

new_primary_dropdown("Center Aligned", align: "center") do |dropdown|
  dropdown.build_menu do |menu|
    menu.build_item("Action 1", "#")
    menu.build_item("Action 2", "#")
    menu.build_item("Action 3", "#")
  end
end

new_primary_dropdown("Drop Up", direction: "up") do |dropdown|
  dropdown.build_menu do |menu|
    menu.build_item("Up", "#")
    menu.build_item("Position", "#")
  end
end

new_primary_dropdown("Drop Up-Right", align: "right", direction: "up") do |dropdown|
  dropdown.build_menu do |menu|
    menu.build_item("Up", "#")
    menu.build_item("Position", "#")
  end
end

new_primary_dropdown("Drop Up-Center", align: "center", direction: "up") do |dropdown|
  dropdown.build_menu do |menu|
    menu.build_item("Up", "#")
    menu.build_item("Position", "#")
  end
end

<div class="dropdown dropdown-primary dropdown-down" data-controller="dropdown">
  <button data-action="click->dropdown#toggle" class="btn btn-primary btn">
    Left Aligned
    <svg class="dropdown-arrow" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"></path></svg>
  </button>

  <div class="dropdown-menu" data-dropdown-target="menu" data-action="click->dropdown#close">
    <a class="dropdown-menu-item" href="#">Action 1</a>
    <a class="dropdown-menu-item" href="#">Action 2</a>
    <a class="dropdown-menu-item" href="#">Action 3</a>
  </div>
</div>

<div class="dropdown dropdown-primary dropdown-right dropdown-down" data-controller="dropdown">
  <button data-action="click->dropdown#toggle" class="btn btn-primary btn">
    Right Aligned
    <svg class="dropdown-arrow" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"></path></svg>
  </button>

  <div class="dropdown-menu" data-dropdown-target="menu" data-action="click->dropdown#close">
    <a class="dropdown-menu-item" href="#">Action 1</a>
    <a class="dropdown-menu-item" href="#">Action 2</a>
    <a class="dropdown-menu-item" href="#">Action 3</a>
  </div>
</div>

<div class="dropdown dropdown-primary dropdown-center dropdown-down" data-controller="dropdown">
  <button data-action="click->dropdown#toggle" class="btn btn-primary btn">
    Center Aligned
    <svg class="dropdown-arrow" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"></path></svg>
  </button>

  <div class="dropdown-menu" data-dropdown-target="menu" data-action="click->dropdown#close">
    <a class="dropdown-menu-item" href="#">Action 1</a>
    <a class="dropdown-menu-item" href="#">Action 2</a>
    <a class="dropdown-menu-item" href="#">Action 3</a>
  </div>
</div>

<div class="dropdown dropdown-primary dropdown-up" data-controller="dropdown">
  <button data-action="click->dropdown#toggle" class="btn btn-primary btn">
    Drop Up
    <svg class="dropdown-arrow" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m18 15-6-6-6 6"></path></svg>
  </button>

  <div class="dropdown-menu" data-dropdown-target="menu" data-action="click->dropdown#close">
    <a class="dropdown-menu-item" href="#">Up</a>
    <a class="dropdown-menu-item" href="#">Position</a>
  </div>
</div>

<div class="dropdown dropdown-primary dropdown-right dropdown-up" data-controller="dropdown">
  <button data-action="click->dropdown#toggle" class="btn btn-primary btn">
    Drop Up-Right
    <svg class="dropdown-arrow" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m18 15-6-6-6 6"></path></svg>
  </button>

  <div class="dropdown-menu" data-dropdown-target="menu" data-action="click->dropdown#close">
    <a class="dropdown-menu-item" href="#">Up</a>
    <a class="dropdown-menu-item" href="#">Position</a>
  </div>
</div>

<div class="dropdown dropdown-primary dropdown-center dropdown-up" data-controller="dropdown">
  <button data-action="click->dropdown#toggle" class="btn btn-primary btn">
    Drop Up-Center
    <svg class="dropdown-arrow" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m18 15-6-6-6 6"></path></svg>
  </button>

  <div class="dropdown-menu" data-dropdown-target="menu" data-action="click->dropdown#close">
    <a class="dropdown-menu-item" href="#">Up</a>
    <a class="dropdown-menu-item" href="#">Position</a>
  </div>
</div>

Active & Disabled #

Dropdown menu items can have active and disabled states.

<%= primary_dropdown "Active & Disabled" do |menu| %>
  <% menu.with_item "Active Item", "#", active: true %>
  <% menu.with_item "Normal Item", "#" %>
  <% menu.with_item "Disabled Item", "#", disabled: true %>
<% end %>

<%= secondary_dropdown "With Icons" do |menu| %>
  <% menu.with_item "Active Profile", "#", icon: "user", active: true %>
  <% menu.with_item "Settings", "#", icon: "settings" %>
  <% menu.with_item "Disabled Billing", "#", icon: "hash", disabled: true %>
<% end %>

<%= success_dropdown "Success Variant" do |menu| %>
  <% menu.with_item "Active Success", "#", active: true %>
  <% menu.with_item "Normal Success", "#" %>
  <% menu.with_item "Disabled Success", "#", disabled: true %>
<% end %>

<%= danger_dropdown "Danger Variant" do |menu| %>
  <% menu.with_item "Active Danger", "#", active: true %>
  <% menu.with_item "Normal Danger", "#" %>
  <% menu.with_item "Disabled Danger", "#", disabled: true %>
<% end %>

new_primary_dropdown("Active & Disabled") do |dropdown|
  dropdown.build_menu do |menu|
    menu.build_item("Active Item", "#", active: true)
    menu.build_item("Normal Item", "#")
    menu.build_item("Disabled Item", "#", disabled: true)
  end
end

new_secondary_dropdown("With Icons") do |dropdown|
  dropdown.build_menu do |menu|
    menu.build_item("Active Profile", "#", icon: "user", active: true)
    menu.build_item("Settings", "#", icon: "settings")
    menu.build_item("Disabled Billing", "#", icon: "hash", disabled: true)
  end
end

new_success_dropdown("Success Variant") do |dropdown|
  dropdown.build_menu do |menu|
    menu.build_item("Active Success", "#", active: true)
    menu.build_item("Normal Success", "#")
    menu.build_item("Disabled Success", "#", disabled: true)
  end
end

new_danger_dropdown("Danger Variant") do |dropdown|
  dropdown.build_menu do |menu|
    menu.build_item("Active Danger", "#", active: true)
    menu.build_item("Normal Danger", "#")
    menu.build_item("Disabled Danger", "#", disabled: true)
  end
end

<div class="dropdown dropdown-primary dropdown-down" data-controller="dropdown">
  <button data-action="click->dropdown#toggle" class="btn btn-primary btn">
    Active & Disabled
    <svg class="dropdown-arrow" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"></path></svg>
  </button>

  <div class="dropdown-menu" data-dropdown-target="menu" data-action="click->dropdown#close">
    <a class="active dropdown-menu-item" href="#">Active Item</a>
    <a class="dropdown-menu-item" href="#">Normal Item</a>
    <span class="disabled dropdown-menu-item">Disabled Item</span>
  </div>
</div>

<div class="dropdown dropdown-secondary dropdown-down" data-controller="dropdown">
  <button data-action="click->dropdown#toggle" class="btn btn-secondary btn">
    With Icons
    <svg class="dropdown-arrow" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"></path></svg>
  </button>

  <div class="dropdown-menu" data-dropdown-target="menu" data-action="click->dropdown#close">
    <a class="active dropdown-menu-item" href="#">
      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"></path><circle cx="12" cy="7" r="4"></circle></svg>
      Active Profile
    </a>

    <a class="dropdown-menu-item" href="#">
      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M9.671 4.136a2.34 2.34 0 0 1 4.659 0 2.34 2.34 0 0 0 3.319 1.915 2.34 2.34 0 0 1 2.33 4.033 2.34 2.34 0 0 0 0 3.831 2.34 2.34 0 0 1-2.33 4.033 2.34 2.34 0 0 0-3.319 1.915 2.34 2.34 0 0 1-4.659 0 2.34 2.34 0 0 0-3.32-1.915 2.34 2.34 0 0 1-2.33-4.033 2.34 2.34 0 0 0 0-3.831A2.34 2.34 0 0 1 6.35 6.051a2.34 2.34 0 0 0 3.319-1.915"></path><circle cx="12" cy="12" r="3"></circle></svg>
      Settings
    </a>

    <span class="disabled dropdown-menu-item">
      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="4" x2="20" y1="9" y2="9"></line><line x1="4" x2="20" y1="15" y2="15"></line><line x1="10" x2="8" y1="3" y2="21"></line><line x1="16" x2="14" y1="3" y2="21"></line></svg>
      Disabled Billing
    </span>
  </div>
</div>

<div class="dropdown dropdown-success dropdown-down" data-controller="dropdown">
  <button data-action="click->dropdown#toggle" class="btn btn-success btn">
    Success Variant
    <svg class="dropdown-arrow" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"></path></svg>
  </button>

  <div class="dropdown-menu" data-dropdown-target="menu" data-action="click->dropdown#close">
    <a class="active dropdown-menu-item" href="#">Active Success</a>
    <a class="dropdown-menu-item" href="#">Normal Success</a>
    <span class="disabled dropdown-menu-item">Disabled Success</span>
  </div>
</div>

<div class="dropdown dropdown-danger dropdown-down" data-controller="dropdown">
  <button data-action="click->dropdown#toggle" class="btn btn-danger btn">
    Danger Variant
    <svg class="dropdown-arrow" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"></path></svg>
  </button>

  <div class="dropdown-menu" data-dropdown-target="menu" data-action="click->dropdown#close">
    <a class="active dropdown-menu-item" href="#">Active Danger</a>
    <a class="dropdown-menu-item" href="#">Normal Danger</a>
    <span class="disabled dropdown-menu-item">Disabled Danger</span>
  </div>
</div>

Headers & Dividers #

Dropdowns with headers, dividers, and various menu item types for each variant.

<%= primary_dropdown "Primary" do |menu| %>
  <% menu.with_header "Account" %>
  <% menu.with_item "Profile", "#" %>
  <% menu.with_divider %>
  <% menu.with_item "Sign Out", "#" %>
<% end %>

<%= secondary_dropdown "Secondary" do |menu| %>
  <% menu.with_header "Account" %>
  <% menu.with_item "Profile", "#" %>
  <% menu.with_divider %>
  <% menu.with_item "Sign Out", "#" %>
<% end %>

<%= naked_dropdown "Naked" do |menu| %>
  <% menu.with_header "Account" %>
  <% menu.with_item "Profile", "#" %>
  <% menu.with_divider %>
  <% menu.with_item "Sign Out", "#" %>
<% end %>

<%= success_dropdown "Success" do |menu| %>
  <% menu.with_header "Account" %>
  <% menu.with_item "Profile", "#" %>
  <% menu.with_divider %>
  <% menu.with_item "Sign Out", "#" %>
<% end %>

<%= warning_dropdown "Warning" do |menu| %>
  <% menu.with_header "Account" %>
  <% menu.with_item "Profile", "#" %>
  <% menu.with_divider %>
  <% menu.with_item "Sign Out", "#" %>
<% end %>

<%= danger_dropdown "Danger" do |menu| %>
  <% menu.with_header "Account" %>
  <% menu.with_item "Profile", "#" %>
  <% menu.with_divider %>
  <% menu.with_item "Sign Out", "#" %>
<% end %>

<%= outline_primary_dropdown "Outline Primary" do |menu| %>
  <% menu.with_header "Account" %>
  <% menu.with_item "Profile", "#" %>
  <% menu.with_divider %>
  <% menu.with_item "Sign Out", "#" %>
<% end %>

<%= outline_success_dropdown "Outline Success" do |menu| %>
  <% menu.with_header "Account" %>
  <% menu.with_item "Profile", "#" %>
  <% menu.with_divider %>
  <% menu.with_item "Sign Out", "#" %>
<% end %>

<%= outline_warning_dropdown "Outline Warning" do |menu| %>
  <% menu.with_header "Account" %>
  <% menu.with_item "Profile", "#" %>
  <% menu.with_divider %>
  <% menu.with_item "Sign Out", "#" %>
<% end %>

<%= outline_danger_dropdown "Outline Danger" do |menu| %>
  <% menu.with_header "Account" %>
  <% menu.with_item "Profile", "#" %>
  <% menu.with_divider %>
  <% menu.with_item "Sign Out", "#" %>
<% end %>

new_primary_dropdown("Primary") do |dropdown|
  dropdown.build_menu do |menu|
    menu.build_header("Account")
    menu.build_item("Profile", "#")
    menu.build_divider
    menu.build_item("Sign Out", "#")
  end
end

new_secondary_dropdown("Secondary") do |dropdown|
  dropdown.build_menu do |menu|
    menu.build_header("Account")
    menu.build_item("Profile", "#")
    menu.build_divider
    menu.build_item("Sign Out", "#")
  end
end

new_naked_dropdown("Naked") do |dropdown|
  dropdown.build_menu do |menu|
    menu.build_header("Account")
    menu.build_item("Profile", "#")
    menu.build_divider
    menu.build_item("Sign Out", "#")
  end
end

new_success_dropdown("Success") do |dropdown|
  dropdown.build_menu do |menu|
    menu.build_header("Account")
    menu.build_item("Profile", "#")
    menu.build_divider
    menu.build_item("Sign Out", "#")
  end
end

new_warning_dropdown("Warning") do |dropdown|
  dropdown.build_menu do |menu|
    menu.build_header("Account")
    menu.build_item("Profile", "#")
    menu.build_divider
    menu.build_item("Sign Out", "#")
  end
end

new_danger_dropdown("Danger") do |dropdown|
  dropdown.build_menu do |menu|
    menu.build_header("Account")
    menu.build_item("Profile", "#")
    menu.build_divider
    menu.build_item("Sign Out", "#")
  end
end

new_outline_primary_dropdown("Outline Primary") do |dropdown|
  dropdown.build_menu do |menu|
    menu.build_header("Account")
    menu.build_item("Profile", "#")
    menu.build_divider
    menu.build_item("Sign Out", "#")
  end
end

new_outline_success_dropdown("Outline Success") do |dropdown|
  dropdown.build_menu do |menu|
    menu.build_header("Account")
    menu.build_item("Profile", "#")
    menu.build_divider
    menu.build_item("Sign Out", "#")
  end
end

new_outline_warning_dropdown("Outline Warning") do |dropdown|
  dropdown.build_menu do |menu|
    menu.build_header("Account")
    menu.build_item("Profile", "#")
    menu.build_divider
    menu.build_item("Sign Out", "#")
  end
end

new_outline_danger_dropdown("Outline Danger") do |dropdown|
  dropdown.build_menu do |menu|
    menu.build_header("Account")
    menu.build_item("Profile", "#")
    menu.build_divider
    menu.build_item("Sign Out", "#")
  end
end

<div class="dropdown dropdown-primary dropdown-down" data-controller="dropdown">
  <button data-action="click->dropdown#toggle" class="btn btn-primary btn">
    Primary
    <svg class="dropdown-arrow" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"></path></svg>
  </button>

  <div class="dropdown-menu" data-dropdown-target="menu" data-action="click->dropdown#close">
    <div class="dropdown-header">Account</div>
    <a class="dropdown-menu-item" href="#">Profile</a>
    <hr class="dropdown-divider">
    <a class="dropdown-menu-item" href="#">Sign Out</a>
  </div>
</div>

<div class="dropdown dropdown-secondary dropdown-down" data-controller="dropdown">
  <button data-action="click->dropdown#toggle" class="btn btn-secondary btn">
    Secondary
    <svg class="dropdown-arrow" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"></path></svg>
  </button>

  <div class="dropdown-menu" data-dropdown-target="menu" data-action="click->dropdown#close">
    <div class="dropdown-header">Account</div>
    <a class="dropdown-menu-item" href="#">Profile</a>
    <hr class="dropdown-divider">
    <a class="dropdown-menu-item" href="#">Sign Out</a>
  </div>
</div>

<div class="dropdown dropdown-naked dropdown-down" data-controller="dropdown">
  <button data-action="click->dropdown#toggle" class="btn btn-naked btn">
    Naked
    <svg class="dropdown-arrow" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"></path></svg>
  </button>

  <div class="dropdown-menu" data-dropdown-target="menu" data-action="click->dropdown#close">
    <div class="dropdown-header">Account</div>
    <a class="dropdown-menu-item" href="#">Profile</a>
    <hr class="dropdown-divider">
    <a class="dropdown-menu-item" href="#">Sign Out</a>
  </div>
</div>

<div class="dropdown dropdown-success dropdown-down" data-controller="dropdown">
  <button data-action="click->dropdown#toggle" class="btn btn-success btn">
    Success
    <svg class="dropdown-arrow" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"></path></svg>
  </button>

  <div class="dropdown-menu" data-dropdown-target="menu" data-action="click->dropdown#close">
    <div class="dropdown-header">Account</div>
    <a class="dropdown-menu-item" href="#">Profile</a>
    <hr class="dropdown-divider">
    <a class="dropdown-menu-item" href="#">Sign Out</a>
  </div>
</div>

<div class="dropdown dropdown-warning dropdown-down" data-controller="dropdown">
  <button data-action="click->dropdown#toggle" class="btn btn-warning btn">
    Warning
    <svg class="dropdown-arrow" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"></path></svg>
  </button>

  <div class="dropdown-menu" data-dropdown-target="menu" data-action="click->dropdown#close">
    <div class="dropdown-header">Account</div>
    <a class="dropdown-menu-item" href="#">Profile</a>
    <hr class="dropdown-divider">
    <a class="dropdown-menu-item" href="#">Sign Out</a>
  </div>
</div>

<div class="dropdown dropdown-danger dropdown-down" data-controller="dropdown">
  <button data-action="click->dropdown#toggle" class="btn btn-danger btn">
    Danger
    <svg class="dropdown-arrow" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"></path></svg>
  </button>

  <div class="dropdown-menu" data-dropdown-target="menu" data-action="click->dropdown#close">
    <div class="dropdown-header">Account</div>
    <a class="dropdown-menu-item" href="#">Profile</a>
    <hr class="dropdown-divider">
    <a class="dropdown-menu-item" href="#">Sign Out</a>
  </div>
</div>

<div class="dropdown dropdown-outline-primary dropdown-down" data-controller="dropdown">
  <button data-action="click->dropdown#toggle" class="btn btn-outline-primary btn">
    Outline Primary
    <svg class="dropdown-arrow" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"></path></svg>
  </button>

  <div class="dropdown-menu" data-dropdown-target="menu" data-action="click->dropdown#close">
    <div class="dropdown-header">Account</div>
    <a class="dropdown-menu-item" href="#">Profile</a>
    <hr class="dropdown-divider">
    <a class="dropdown-menu-item" href="#">Sign Out</a>
  </div>
</div>

<div class="dropdown dropdown-outline-success dropdown-down" data-controller="dropdown">
  <button data-action="click->dropdown#toggle" class="btn btn-outline-success btn">
    Outline Success
    <svg class="dropdown-arrow" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"></path></svg>
  </button>

  <div class="dropdown-menu" data-dropdown-target="menu" data-action="click->dropdown#close">
    <div class="dropdown-header">Account</div>
    <a class="dropdown-menu-item" href="#">Profile</a>
    <hr class="dropdown-divider">
    <a class="dropdown-menu-item" href="#">Sign Out</a>
  </div>
</div>

<div class="dropdown dropdown-outline-warning dropdown-down" data-controller="dropdown">
  <button data-action="click->dropdown#toggle" class="btn btn-outline-warning btn">
    Outline Warning
    <svg class="dropdown-arrow" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"></path></svg>
  </button>

  <div class="dropdown-menu" data-dropdown-target="menu" data-action="click->dropdown#close">
    <div class="dropdown-header">Account</div>
    <a class="dropdown-menu-item" href="#">Profile</a>
    <hr class="dropdown-divider">
    <a class="dropdown-menu-item" href="#">Sign Out</a>
  </div>
</div>

<div class="dropdown dropdown-outline-danger dropdown-down" data-controller="dropdown">
  <button data-action="click->dropdown#toggle" class="btn btn-outline-danger btn">
    Outline Danger
    <svg class="dropdown-arrow" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"></path></svg>
  </button>

  <div class="dropdown-menu" data-dropdown-target="menu" data-action="click->dropdown#close">
    <div class="dropdown-header">Account</div>
    <a class="dropdown-menu-item" href="#">Profile</a>
    <hr class="dropdown-divider">
    <a class="dropdown-menu-item" href="#">Sign Out</a>
  </div>
</div>

Dropdowns with HTML content in the menu instead of menu items.

<%= render new_primary_dropdown("Profile") do |dropdown| %>
  <% dropdown.with_menu do %>
    <p class="m-2 text-white">This is some HTML content in the menu.</p>
  <% end %>
<% end %>

<%= render new_secondary_dropdown("Options") do |dropdown| %>
  <% dropdown.with_menu do %>
    <ul class="m-4">
      <li>Item 1.</li>
      <li>Item 2.</li>
      <li>Item 3.</li>
    </ul>
  <% end %>
<% end %>

new_primary_dropdown("Profile") do |dropdown|
  dropdown.build_menu do |menu|
    menu.with_content tag.p("This is some HTML content in the menu.", class: "m-2 text-white")
  end
end

new_secondary_dropdown("Options") do |dropdown|
  dropdown.build_menu do |menu|
    menu.with_content(
      tag.ul(class: "m-4") do
        tag.li("Item 1.") << tag.li("Item 2.") << tag.li("Item 3.")
      end
    )
  end
end

<div class="dropdown dropdown-primary dropdown-down" data-controller="dropdown">
  <button data-action="click->dropdown#toggle" class="btn btn-primary btn">
    Profile
    <svg class="dropdown-arrow" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"></path></svg>
  </button>

  <div class="dropdown-menu" data-dropdown-target="menu" data-action="click->dropdown#close">
    <p class="m-2 text-white">This is some HTML content in the menu.</p>
  </div>
</div>

<div class="dropdown dropdown-secondary dropdown-down" data-controller="dropdown">
  <button data-action="click->dropdown#toggle" class="btn btn-secondary btn">
    Options
    <svg class="dropdown-arrow" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"></path></svg>
  </button>

  <div class="dropdown-menu" data-dropdown-target="menu" data-action="click->dropdown#close">
    <ul class="m-4">
      <li>Item 1.</li>
      <li>Item 2.</li>
      <li>Item 3.</li>
    </ul>
  </div>
</div>

ViewComponent Slots gives you full control over the HTML content of the dropdown's button and menu.

<%= render new_success_dropdown do |dropdown| %>
  <% dropdown.with_button icon("info"), "My Button" %>
  <% dropdown.with_menu tag.p("This is some HTML content in the menu.", class: "m-4") %>
<% end %>

<%= render new_outline_warning_dropdown do |dropdown| %>
  <% dropdown.with_button do %>
    <code>My Button</code> <%= icon("info", class: "inline") %>
  <% end %>

  <% dropdown.with_menu do %>
    <p class="m-4">This is some HTML content in the menu.</p>
  <% end %>
<% end %>

<%= render new_outline_warning_dropdown do |dropdown| %>
  <% dropdown.with_button icon("info"), skip_caret: true %>
  <% dropdown.with_menu do %>
    <p class="m-4">This is some HTML content in the menu.</p>
  <% end %>
<% end %>

<div class="dropdown dropdown-success dropdown-down" data-controller="dropdown">
  <button data-action="click->dropdown#toggle" class="btn btn-success btn">
    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><path d="M12 16v-4"></path><path d="M12 8h.01"></path></svg>
    My Button
    <svg class="dropdown-arrow" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m6 9 6 6 6-6"></path></svg>
  </button>

  <div class="dropdown-menu" data-dropdown-target="menu" data-action="click->dropdown#close">
    <p class="m-4">This is some HTML content in the menu.</p>
  </div>
</div>

<div class="dropdown dropdown-outline-warning dropdown-down" data-controller="dropdown">
  <button data-action="click->dropdown#toggle" class="btn btn-outline-warning btn">
    <code>My Button</code>
    <svg class="inline" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><path d="M12 16v-4"></path><path d="M12 8h.01"></path></svg>
  </button>

  <div class="dropdown-menu" data-dropdown-target="menu" data-action="click->dropdown#close">
    <p class="m-4">This is some HTML content in the menu.</p>
  </div>
</div>

<div class="dropdown dropdown-outline-warning dropdown-down" data-controller="dropdown">
  <button data-action="click->dropdown#toggle" class="btn btn-outline-warning btn">
    <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><path d="M12 16v-4"></path><path d="M12 8h.01"></path></svg>
  </button>

  <div class="dropdown-menu" data-dropdown-target="menu" data-action="click->dropdown#close">
    <p class="m-4">This is some HTML content in the menu.</p>
  </div>
</div>