Skip to content

Dropdown

Dropdowns are lightweight context menus for housing navigation and actions. They're great for instances where you don't need the full power (and code) of the select menu.

Examples

Default

<div>
<%= render(Primer::DropdownComponent.new) do |c| %>
<% c.button do %>
Dropdown
<% end %>
<%= c.menu(header: "Options") do |menu|
menu.item { "Item 1" }
menu.item { "Item 2" }
menu.item(divider: true)
menu.item { "Item 3" }
menu.item { "Item 4" }
end %>
<% end %>
</div>

With Direction

<div>
<%= render(Primer::DropdownComponent.new) do |c| %>
<% c.button do %>
Dropdown
<% end %>
<%= c.menu(header: "Options", direction: :s) do |menu|
menu.item { "Item 1" }
menu.item { "Item 2" }
menu.item(divider: true)
menu.item { "Item 3" }
menu.item { "Item 4" }
end %>
<% end %>
</div>

Arguments

NameTypeDefaultDescription
overlaySymbol:defaultOne of :none, :default, or :dark.
resetBooleantrueWhether to hide the default caret on the button
summary_classesString""Custom classes to add to the button
system_argumentsHashN/ASystem arguments

Slots

Button

Required trigger for the dropdown. Only accepts a content. Its classes can be customized by the summary_classes param in the parent component

Required context menu for the dropdown

NameTypeDefaultDescription
directionSymbolN/AOne of :se, :sw, :w, :e, :ne, or :s.
schemeSymbolN/APass :dark for dark mode theming
headerStringN/AOptional string to display as the header
system_argumentsHashN/ASystem arguments