Dropdown Menu Edit

<%= render_dropdown_menu do %>
  <%= dropdown_menu_trigger do %>
    <%= render_button "Open Dropdown", variant: :outline %>
  <% end %>

  <%= dropdown_menu_content do %>
    <%= dropdown_menu_label "My Account" %>
    <%= render_separator class: "my-1" %>
    <%= dropdown_menu_item "Profile" %>
    <%= dropdown_menu_item  do %>
      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-4 h-4 mr-2">
        <rect width="20" height="14" x="2" y="5" rx="2"></rect><line x1="2" x2="22" y1="10" y2="10"></line>
      </svg>
      <span>Billing</span>
      <span class="ml-auto text-xs tracking-widest opacity-60">⌘B</span>
    <% end %>
    <%= dropdown_menu_item "Settings" %>
  <% end %>
<% end %>

Installation

  rails generate shadcn-ui dropdown-menu

Usage

<%= render_dropdown_menu do %>
  <%= dropdown_menu_trigger do %>
  <% end %>

  <%= dropdown_menu_content do %>
    <%= dropdown_menu_label %>

    <%= dropdown_menu_item %>
    <%= dropdown_menu_item do %>
    <% end %>
    <%= dropdown_menu_item %>
  <% end %>
<% end %>

The Dropdown Menu component introduces:

• app/helpers/components/dropdown_menu_helper.rb
• app/views/components/ui/_dropdown_menu.html.erb
• app/javascript/controllers/ui/dropdown-menu_controller.js

The method render_dropdown_menu defined in app/helpers/components/dropdown_menu_helper.rb accepts a block for the two inner components, dropdown_menu_trigger and dropdown_menu_content. Each of those accepts a block for their respective content.

Within the dropdown_menu_content block, you can use the following methods:

• dropdown_menu_label - accepts an argument for the label section of the dropdown menu. This is optional.
• dropdown_menu_item - an arbitrary amount of these can be used for each menu item you want to include. This method either accepts a string or a block for the content you want.