Dropdown

A compact menu of related actions, opened from a text trigger. Dropdowns close when the user clicks elsewhere.

Pass a trigger label and a block for a single item. Use the with_trigger and with_item slots for custom trigger content or multiple items.

Set style: :bordered for a button-like trigger, align: :left, :center, or :right to position the menu, and open: true only when the menu should be expanded on first render.

Single item

= app_theme_dropdown("Options") do
  = app_theme_link "Edit", href: "#"

Trigger styles

.demo-row
  = app_theme_dropdown("Plain trigger") do
    = app_theme_link "View details", href: "#"
  = app_theme_dropdown("Bordered trigger", style: :bordered) do
    = app_theme_link "View details", href: "#"

Action menu

= app_theme_dropdown(style: :bordered, align: :right) do |dropdown|
  - dropdown.with_trigger do
    %span Manage record
  - dropdown.with_item do
    = app_theme_link "View details", href: "#"
  - dropdown.with_item do
    = app_theme_link "Edit", href: "#"
  - dropdown.with_item do
    = app_theme_link "Delete", href: "#", variant: :danger

Alignment

.demo-row
  - %i[left center right].each do |align|
    = app_theme_dropdown(align: align) do |dropdown|
      - dropdown.with_trigger do
        %span= "Align #{align}"
      - dropdown.with_item do
        = app_theme_link "Menu item", href: "#"

Open on first render

= app_theme_dropdown("Already open", open: true, style: :bordered) do
  = app_theme_link "Menu item", href: "#"