Components

Components Menu

<div class="relative" data-controller="row-menu">
  <button type="button" class="<%= icon_button_class(shape: :circle) %>" aria-haspopup="menu" aria-expanded="false" aria-label="Actions"
    data-row-menu-target="trigger" data-action="row-menu#toggle"><%= heroicon "ellipsis-horizontal", options: { "aria-hidden": "true" } %></button>
  <div class="<%= menu_popover_class %>" role="menu" data-row-menu-target="popover">
    <button type="button" class="<%= menu_option_class %>" role="menuitem"><%= heroicon "pencil-square", options: { class: "size-5", "aria-hidden": "true" } %><span>Edit</span></button>
<button type="button" class="<%= menu_option_class %>" role="menuitem"><%= heroicon "document-duplicate", options: { class: "size-5", "aria-hidden": "true" } %><span>Duplicate</span></button>
<button type="button" class="<%= menu_option_class(tone: :danger) %>" role="menuitem"><%= heroicon "trash", options: { class: "size-5", "aria-hidden": "true" } %><span>Delete</span></button>
  </div>
</div>

Text trigger

<div class="relative" data-controller="row-menu">
  <button type="button" class="<%= button_class(variant: :secondary, size: :sm) %>" aria-haspopup="menu" aria-expanded="false"
    data-row-menu-target="trigger" data-action="row-menu#toggle">Sort<%= heroicon "chevron-down", variant: :mini, options: { "aria-hidden": "true" } %></button>
  <div class="<%= menu_popover_class(align: :start) %>" role="menu" data-row-menu-target="popover">
    <button type="button" class="<%= menu_option_class %>" role="menuitem"><%= heroicon "pencil-square", options: { class: "size-5", "aria-hidden": "true" } %><span>Edit</span></button>
<button type="button" class="<%= menu_option_class %>" role="menuitem"><%= heroicon "document-duplicate", options: { class: "size-5", "aria-hidden": "true" } %><span>Duplicate</span></button>
<button type="button" class="<%= menu_option_class(tone: :danger) %>" role="menuitem"><%= heroicon "trash", options: { class: "size-5", "aria-hidden": "true" } %><span>Delete</span></button>
  </div>
</div>

API reference

button_class

button_class(variant: :default, size: :base, block: false, extra: nil)

Parameter	Default	Values
variant	:default	:default · :accent · :secondary · :glass · :ghost · :danger
size	:base	:sm · :base · :lg · :nav
block	false	true · false
extra	nil	Additional Tailwind classes

icon_button_class

icon_button_class(shape: :square, size: :base, extra: nil)

Parameter	Default	Values
shape	:square	:square · :circle
size	:base	:sm · :base · :lg
extra	nil	Additional Tailwind classes

menu_popover_class(align: :end, extra: nil)

Parameter	Default	Values
align	:end	:start · :end · :center
extra	nil	Additional Tailwind classes

menu_option_class

menu_option_class(tone: :default, extra: nil)

Parameter	Default	Values
tone	:default	:default · :danger
extra	nil	Additional Tailwind classes

Controller options

Attribute	Type	Default
data-row-menu-lift-value	Boolean	true

Default

Text trigger

API reference

button_class

icon_button_class

menu_popover_class

menu_option_class

Controller options