Dropdown

Dropdown menus for actions, navigation, and selection.

Basic Dropdown

A simple dropdown menu with items.

<%= render Rvk::DropdownComponent.new do |dropdown| %>
  <% dropdown.with_trigger do %>
    <%= render Rvk::ButtonComponent.new do %>
      Options
      <%= render Rvk::IconComponent.new(name: :chevron_down, size: :sm) %>
    <% end %>
  <% end %>

  <% dropdown.with_menu do %>
    <%= render Rvk::Dropdown::ItemComponent.new(href: "#") { "Edit" } %>
    <%= render Rvk::Dropdown::ItemComponent.new(href: "#") { "Duplicate" } %>
    <%= render Rvk::Dropdown::ItemComponent.new(href: "#") { "Archive" } %>
    <%= render Rvk::Dropdown::DividerComponent.new %>
    <%= render Rvk::Dropdown::ItemComponent.new(href: "#", destructive: true) { "Delete" } %>
  <% end %>
<% end %>

With Icons

Add icons to menu items.

<%= render Rvk::Dropdown::ItemComponent.new(href: "#") do %>
  <%= render Rvk::IconComponent.new(name: :pencil, size: :sm) %>
  Edit
<% end %>

Positions

Control where the menu appears.

<%= render Rvk::DropdownComponent.new(position: :bottom_start) do |dropdown| %>
  ...
<% end %>

<%= render Rvk::DropdownComponent.new(position: :bottom_end) do |dropdown| %>
  ...
<% end %>

Icon Button Trigger

Common pattern for action menus.

Row item

<%= render Rvk::DropdownComponent.new(position: :bottom_end) do |dropdown| %>
  <% dropdown.with_trigger do %>
    <%= render Rvk::IconButtonComponent.new do %>
      <%= render Rvk::IconComponent.new(name: :ellipsis_vertical) %>
    <% end %>
  <% end %>
  <% dropdown.with_menu do %>
    <%= render Rvk::Dropdown::ItemComponent.new(href: "#") { "View" } %>
    <%= render Rvk::Dropdown::ItemComponent.new(href: "#") { "Edit" } %>
    <%= render Rvk::Dropdown::DividerComponent.new %>
    <%= render Rvk::Dropdown::ItemComponent.new(href: "#", destructive: true) { "Delete" } %>
  <% end %>
<% end %>

Props

Prop	Type	Default	Description
position	Symbol	:bottom_start	Menu position: :bottom_start, :bottom_end

Sub-components

Component	Description
Rvk::Dropdown::ItemComponent	Menu item link with optional destructive styling
Rvk::Dropdown::DividerComponent	Horizontal divider between items