BetterUi Demo

Basic Dropdown

A simple dropdown menu with action items. Click the button to toggle the menu.

<%= bui_dropdown do |d| %>
  <% d.with_trigger do %>
    <%= bui_button(variant: :primary) { "Actions" } %>
  <% end %>
  <% d.with_item(href: "#edit") { "Edit" } %>
  <% d.with_item(href: "#duplicate") { "Duplicate" } %>
  <% d.with_item(href: "#archive") { "Archive" } %>
<% end %>

Size Variants

Dropdown menus in three widths: sm (w-40), md (w-48), and lg (w-56).

<%= bui_dropdown(size: :sm) do |d| %>
  <% d.with_trigger do %>
    <%= bui_button(variant: :secondary, style: :outline) { "Small" } %>
  <% end %>
  <% d.with_item(href: "#") { "Action" } %>
<% end %>

<%= bui_dropdown(size: :lg) do |d| %>
  <% d.with_trigger do %>
    <%= bui_button(variant: :secondary, style: :outline) { "Large" } %>
  <% end %>
  <% d.with_item(href: "#") { "Action" } %>
<% end %>

With Icons

Menu items can include an icon slot for visual context.

<%= bui_dropdown do |d| %>
  <% d.with_trigger do %>
    <%= bui_button(variant: :accent) { "File actions" } %>
  <% end %>
  <% d.with_item(href: "#edit") do |item| %>
    <% item.with_icon do %>
      <svg class="h-4 w-4">...</svg>
    <% end %>
    Edit
  <% end %>
<% end %>

Dividers & Section Headers

Use dividers to separate groups of actions and headers to label sections.

<%= bui_dropdown(size: :lg) do |d| %>
  <% d.with_trigger do %>
    <%= bui_button(variant: :info) { "Account Menu" } %>
  <% end %>
  <% d.with_header(text: "Account") %>
  <% d.with_item(href: "#profile") { "My Profile" } %>
  <% d.with_item(href: "#settings") { "Settings" } %>
  <% d.with_divider %>
  <% d.with_header(text: "Team") %>
  <% d.with_item(href: "#members") { "Members" } %>
  <% d.with_divider %>
  <% d.with_item(href: "#logout", variant: :danger) { "Sign Out" } %>
<% end %>

Placement

Control where the menu appears relative to the trigger: bottom_start, bottom_end, top_start, top_end.

<%= bui_dropdown(placement: :bottom_start) do |d| %>
  <% d.with_trigger do %>
    <%= bui_button(variant: :success) { "Bottom Start" } %>
  <% end %>
  <% d.with_item(href: "#") { "Action" } %>
<% end %>

<%= bui_dropdown(placement: :top_end) do |d| %>
  <% d.with_trigger do %>
    <%= bui_button(variant: :success) { "Top End" } %>
  <% end %>
  <% d.with_item(href: "#") { "Action" } %>
<% end %>

Disabled Items

Items can be individually disabled. Disabled items are visually dimmed and skipped during keyboard navigation.

<%= bui_dropdown do |d| %>
  <% d.with_trigger do %>
    <%= bui_button(variant: :warning) { "With disabled" } %>
  <% end %>
  <% d.with_item(href: "#edit") { "Edit" } %>
  <% d.with_item(href: "#duplicate", disabled: true) { "Duplicate (disabled)" } %>
  <% d.with_item(href: "#archive") { "Archive" } %>
  <% d.with_divider %>
  <% d.with_item(variant: :danger, disabled: true) { "Delete (disabled)" } %>
<% end %>

Danger Variant

Use variant: :danger on items for destructive actions like delete or remove.

<%= bui_dropdown do |d| %>
  <% d.with_trigger do %>
    <%= bui_button(variant: :danger, style: :outline) { "Manage" } %>
  <% end %>
  <% d.with_item(href: "#edit") { "Edit" } %>
  <% d.with_divider %>
  <% d.with_item(href: "#delete", variant: :danger, method: :delete) do |item| %>
    <% item.with_icon do %>
      <svg class="h-4 w-4">...</svg>
    <% end %>
    Delete permanently
  <% end %>
<% end %>

Shadow Variants

Control the menu shadow intensity: none, sm, md, lg (default), xl.

<%= bui_dropdown(shadow: :xl) do |d| %>
  <% d.with_trigger do %>
    <%= bui_button(variant: :dark) { "Heavy Shadow" } %>
  <% end %>
  <% d.with_item(href: "#") { "Action" } %>
<% end %>

<%= bui_dropdown(shadow: false) do |d| %>
  <% d.with_trigger do %>
    <%= bui_button(variant: :dark) { "No Shadow" } %>
  <% end %>
  <% d.with_item(href: "#") { "Action" } %>
<% end %>

Dropdowns