Skip to content

Dropdown

Table of contents
Table of contents

Dropdown is a lightweight context menu 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