Dropdown Menu Edit

Displays a menu to the user — such as a set of actions or functions — triggered by a button.

Examples

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.