Hakumi :: Rails ViewComponents

Basic

The most basic dropdown menu. Hover to show menu items.

Code

<%= render Hakumi::Dropdown::Component.new do |dropdown| %>
  <% dropdown.with_trigger do %>
    <%= render Hakumi::Space::Component.new do %>
      <span>Hover me</span>
      <%= render Hakumi::Icon::Component.new(name: :down) %>
    <% end %>
  <% end %>
  <% dropdown.with_item(key: "1", label: "1st menu item", href: "https://www.antgroup.com", target: "_blank") %>
  <% dropdown.with_item(key: "2", label: "2nd menu item", href: "https://www.aliyun.com", icon: :smile, disabled: true) %>
  <% dropdown.with_item(key: "3", label: "3rd menu item", disabled: true) %>
  <% dropdown.with_divider %>
  <% dropdown.with_item(key: "4", label: "a danger item", danger: true) %>
<% end %>

Trigger Mode

The default trigger mode is hover. You can change it to click.

Code

<%= render Hakumi::Space::Component.new(size: :large) do %>
  <%= render Hakumi::Dropdown::Component.new(trigger: :hover) do |dropdown| %>
    <% dropdown.with_trigger do %>
      <%= render Hakumi::Button::Component.new do %>Hover<% end %>
    <% end %>
    <% dropdown.with_item(key: "1", label: "Hover item 1") %>
    <% dropdown.with_item(key: "2", label: "Hover item 2") %>
  <% end %>

  <%= render Hakumi::Dropdown::Component.new(trigger: :click) do |dropdown| %>
    <% dropdown.with_trigger do %>
      <%= render Hakumi::Button::Component.new do %>Click<% end %>
    <% end %>
    <% dropdown.with_item(key: "1", label: "Click item 1") %>
    <% dropdown.with_item(key: "2", label: "Click item 2") %>
  <% end %>
<% end %>

Placement

Support 6 placements: bottomLeft, bottom, bottomRight, topLeft, top, topRight.

Code

<%= render Hakumi::Space::Component.new(wrap: true, size: :large) do %>
  <% %i[bottom_left bottom bottom_right top_left top top_right].each do |placement| %>
    <%= render Hakumi::Dropdown::Component.new(placement: placement) do |dropdown| %>
      <% dropdown.with_trigger do %>
        <%= render Hakumi::Button::Component.new do %><%= placement.to_s.titleize %><% end %>
      <% end %>
      <% dropdown.with_item(key: "1", label: "1st menu item") %>
      <% dropdown.with_item(key: "2", label: "2nd menu item") %>
      <% dropdown.with_item(key: "3", label: "3rd menu item") %>
    <% end %>
  <% end %>
<% end %>

Dropdown API

Prop	Type	Default	Description
`trigger`	`:hover \| :click or :context_menu`	`:hover`	The trigger mode which executes the dropdown action.
`placement`	`:bottom \| :bottom_left \| :bottom_right \| :top \| :top_left or :top_right`	`:bottom_left`	Placement of popup menu.
`disabled`	`Boolean`	`false`	Whether the dropdown menu is disabled.
`trigger (slot)`	`Slot`	`-`	The trigger element that opens the dropdown.
`items (slot)`	`Slot`	`-`	Menu items defined via with_item or with_divider.

Dropdown Item API

Prop	Type	Default	Description
`key`	`String`	`-`	Unique key of menu item (required).
`label`	`String`	`-`	Menu item label text.
`href`	`String`	`-`	URL for link items.
`target`	`String`	`-`	Link target attribute.
`icon`	`Symbol or Component`	`-`	Icon displayed before the label.
`disabled`	`Boolean`	`false`	Whether the item is disabled.
`danger`	`Boolean`	`false`	Display item in danger style.
`block`	`Block`	`-`	Custom content for the item.