Dropdown

Everybody get down this is a contextual menu.
Includes a Ruby component and corresponding Rails helper
Ruby
Includes a Stimulus controller
Stimulus

Example

<%= nk_dropdown do |d| %>
  <%= d.trigger "Open" %>
  <%= d.content do %>
    <%= d.title "My hotdogs" %>
    <%= d.separator %>
    <%= d.item "New hotdog", new_hotdog_path %>
    <%= d.item "Edit hotdog", edit_hotdog_path(1) %>
    <%= d.separator %>
    <%= d.destructive_item "Delete hotdog",
      hotdog_path(1),
      data: { turbo_method: "delete", turbo_confirm: "Sure?" } %>
  <% end %>
<% end %>

Install

Set up Nitro Kit then

bin/rails generate nitro_kit:add dropdown

Dependencies

This component adds third-party dependencies:

Usage

nk_dropdown(**attrs) { |dropdown| ... }
PropertyDefaultDescription
**attrsHTML attributes for <div> element
dropdown.trigger(text = nil, **attrs) { ... }
PropertyDefaultDescription
textnilPlain text content
**attrsArguments for NitroKit::Button.new()
dropdown.content(**attrs) { ... }
PropertyDefaultDescription
**attrsHTML attributes for <div> element
dropdown.title(text = nil, **attrs) { ... }
PropertyDefaultDescription
textnilPlain text content
**attrsHTML attributes for <div> element
dropdown.item(text = nil, href = nil, **attrs) { ... }
PropertyDefaultDescription
textnilPlain text content
hrefnil If passed, the item will be an <a> link.
variant:defaultOne of :default / :destructive
**attrsHTML attributes for <div> element
dropdown.destructive_item(text = nil, href = nil, **attrs) { ... }
PropertyDefaultDescription
textnilPlain text content
hrefnil If passed, the item will be an <a> link.
**attrsHTML attributes for <div> element
dropdown.separator(**attrs)
PropertyDefaultDescription
**attrsHTML attributes for <hr> element