Dropdowns for UI in Rails

Dropdowns

Dropdown menus are incredibly common in web applications, so of course they're a component in Instrumental Components.

A dropdown menu essentially consists of 3 parts:

The trigger: The element or icon that a user clicks or hovers over to open the dropdown
The dropdown menu: The container that appears when the trigger is activated
The dropdown items: The individual items (typically links) that appear in the dropdown menu

Instrumental dropdown menus can be a simple collection of links, or they can include icons for each link, and a wide range of other customization options.

Demos

Preview

Code

Click to open:

Hover to open:

Copy

<% grid_cell_classes = "text-center flex flex-col items-center justify-center space-y-4" %>
<div class="grid grid-cols-1 gap-10 py-8
            sm:grid-cols-2">

  <div class="<%= grid_cell_classes %>">

    <div>
      Click to open:
    </div>

    <%= render "shared/components/dropdown/dropdown" do %>
      <%= render "shared/components/dropdown/dropdown_link",
                  link_path: "#",
                  icon_name: "house",
                  link_text: "Link A" %>
      <%= render "shared/components/dropdown/dropdown_link",
                  link_path: "#",
                  icon_name: "rocket",
                  link_text: "Link B" %>
      <%= render "shared/components/dropdown/dropdown_link",
                  link_path: "#",
                  icon_name: "send",
                  link_text: "Link C" %>
    <% end %>

  </div>

  <div class="<%= grid_cell_classes %>">

    <div>
      Hover to open:
    </div>

    <%= render "shared/components/dropdown/dropdown",
                toggle_on_hover: true do %>
      <%= render "shared/components/dropdown/dropdown_link",
                  link_path: "#",
                  link_text: "Link A" %>
      <%= render "shared/components/dropdown/dropdown_link",
                  link_path: "#",
                  link_text: "Link B" %>
      <%= render "shared/components/dropdown/dropdown_link",
                  link_path: "#",
                  link_text: "Link C" %>
    <% end %>

  </div>
</div>

Installation

Copy

rails g instrumental:dropdowns

To insert a component into a view:

Copy

rails g instrumental:dropdowns:insert

To insert a link into a dropdown menu in a view:

Copy

rails g instrumental:dropdowns:link:insert

To insert a dropdown menu into a view:

Customization

Find all of your customization options (via local variables) in these files:

app/views/shared/components/dropdowns/_dropdown.html.erb
app/views/shared/components/dropdowns/_dropdown_link.html.erb

I created Instrumental Components to make designing and building professional apps with Ruby on Rails easy, fast, and fun. I use it on all of my projects and I hope it helps you build something great.

Brian Casel

Creator of Instrumental Components

Learn more Send me a question or request