Button Data List Detail Disclosure Field Set Icon Label Link Link Select Menu Modal Panel Select Tabs Tag Text Field Text Field With Prefix

Menu

A popover of grouped, selectable actions, opened from any trigger and anchored to it.

PropTypeDefaultNotes
placement String "bottom-left" One of PLACEMENTS — where the popover anchors relative to the trigger. Default "bottom-left".
**html_options Hash — Extra HTML attributes for the popover `<div class="menu">`.

Slots: sections trigger

Bottom center

1
<%= render MenuComponent.new(placement: "bottom-center") do |m| %>

2
  <% m.with_trigger { render ButtonComponent.new(label: "Account", variant: "secondary") } %>

3
  <% m.with_section(heading: "Account") do |s| %>

4
    <% s.with_item(label: "Profile",       icon: "user",            href: "#") %>

5
    <% s.with_item(label: "Notifications", icon: "bell",            href: "#") %>

6
    <% s.with_item(label: "Settings",      icon: "settings-gear-1", href: "#") %>

7
  <% end %>

8
  <% m.with_section(separator: true) do |s| %>

9
    <% s.with_item(label: "Delete account", icon: "trash-can", destructive: true, href: "#") %>

10
  <% end %>

11
<% end %>

Bottom left

1
<%= render MenuComponent.new(placement: "bottom-left") do |m| %>

2
  <% m.with_trigger { render ButtonComponent.new(label: "Account", variant: "secondary") } %>

3
  <% m.with_section(heading: "Account") do |s| %>

4
    <% s.with_item(label: "Profile",       icon: "user",            href: "#") %>

5
    <% s.with_item(label: "Notifications", icon: "bell",            href: "#") %>

6
    <% s.with_item(label: "Settings",      icon: "settings-gear-1", href: "#") %>

7
  <% end %>

8
  <% m.with_section(separator: true) do |s| %>

9
    <% s.with_item(label: "Delete account", icon: "trash-can", destructive: true, href: "#") %>

10
  <% end %>

11
<% end %>

Bottom right

1
<%= render MenuComponent.new(placement: "bottom-right") do |m| %>

2
  <% m.with_trigger { render ButtonComponent.new(label: "Account", variant: "secondary") } %>

3
  <% m.with_section(heading: "Account") do |s| %>

4
    <% s.with_item(label: "Profile",       icon: "user",            href: "#") %>

5
    <% s.with_item(label: "Notifications", icon: "bell",            href: "#") %>

6
    <% s.with_item(label: "Settings",      icon: "settings-gear-1", href: "#") %>

7
  <% end %>

8
  <% m.with_section(separator: true) do |s| %>

9
    <% s.with_item(label: "Delete account", icon: "trash-can", destructive: true, href: "#") %>

10
  <% end %>

11
<% end %>

Top center

1
<%= render MenuComponent.new(placement: "top-center") do |m| %>

2
  <% m.with_trigger { render ButtonComponent.new(label: "Account", variant: "secondary") } %>

3
  <% m.with_section(heading: "Account") do |s| %>

4
    <% s.with_item(label: "Profile",       icon: "user",            href: "#") %>

5
    <% s.with_item(label: "Notifications", icon: "bell",            href: "#") %>

6
    <% s.with_item(label: "Settings",      icon: "settings-gear-1", href: "#") %>

7
  <% end %>

8
  <% m.with_section(separator: true) do |s| %>

9
    <% s.with_item(label: "Delete account", icon: "trash-can", destructive: true, href: "#") %>

10
  <% end %>

11
<% end %>

Top left

1
<%= render MenuComponent.new(placement: "top-left") do |m| %>

2
  <% m.with_trigger { render ButtonComponent.new(label: "Account", variant: "secondary") } %>

3
  <% m.with_section(heading: "Account") do |s| %>

4
    <% s.with_item(label: "Profile",       icon: "user",            href: "#") %>

5
    <% s.with_item(label: "Notifications", icon: "bell",            href: "#") %>

6
    <% s.with_item(label: "Settings",      icon: "settings-gear-1", href: "#") %>

7
  <% end %>

8
  <% m.with_section(separator: true) do |s| %>

9
    <% s.with_item(label: "Delete account", icon: "trash-can", destructive: true, href: "#") %>

10
  <% end %>

11
<% end %>

Top right

1
<%= render MenuComponent.new(placement: "top-right") do |m| %>

2
  <% m.with_trigger { render ButtonComponent.new(label: "Account", variant: "secondary") } %>

3
  <% m.with_section(heading: "Account") do |s| %>

4
    <% s.with_item(label: "Profile",       icon: "user",            href: "#") %>

5
    <% s.with_item(label: "Notifications", icon: "bell",            href: "#") %>

6
    <% s.with_item(label: "Settings",      icon: "settings-gear-1", href: "#") %>

7
  <% end %>

8
  <% m.with_section(separator: true) do |s| %>

9
    <% s.with_item(label: "Delete account", icon: "trash-can", destructive: true, href: "#") %>

10
  <% end %>

11
<% end %>