Skip to content
This component requires JavaScript to function. Please refer to the Installation section to set it up.

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 SelectMenu.

Arguments

NameTypeDefaultDescription
overlaySymbol:defaultOne of :dark, :default, or :none.
with_caretBooleanfalseWhether or not a caret should be rendered in the button.
system_argumentsHashN/ASystem arguments

Slots

Button

Required trigger for the dropdown. Has the same arguments as Button, but it is locked as a summary tag.

Required context menu for the dropdown.

NameTypeDefaultDescription
asSymbolN/AWhen as is :list, wraps the menu in a <ul> with a <li> for each item.
directionSymbolN/AOne of :e, :ne, :s, :se, :sw, or :w.
schemeSymbolN/APass :dark for dark mode theming
headerStringN/AOptional string to display as the header
system_argumentsHashN/ASystem arguments

Examples

Default

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

With dividers

Dividers can be used to separate a group of items. They don't have any content.

<%= render(Primer::Dropdown.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" }
menu.item(divider: true)
menu.item { "Item 5" }
menu.item { "Item 6" }
end %>
<% end %>

With direction

<%= render(Primer::Dropdown.new(display: :inline_block)) 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 { "Item 3" }
menu.item { "Item 4" }
end %>
<% end %>

With caret

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

Customizing the button

<%= render(Primer::Dropdown.new) do |c| %>
<% c.button(scheme: :primary, variant: :small) do %>
Dropdown
<% end %>
<% c.menu(header: "Options") do |menu|
menu.item { "Item 1" }
menu.item { "Item 2" }
menu.item { "Item 3" }
menu.item { "Item 4" }
end %>
<% end %>
<%= render(Primer::Dropdown.new) do |c| %>
<% c.button do %>
Dropdown
<% end %>
<% c.menu(as: :list, 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 %>

Customizing menu items

<%= render(Primer::Dropdown.new) do |c| %>
<% c.button do %>
Dropdown
<% end %>
<% c.menu(header: "Options") do |menu|
menu.item(tag: :button) { "Item 1" }
menu.item(classes: "custom-class") { "Item 2" }
menu.item { "Item 3" }
end %>
<% end %>