Skip to content

DropdownMenu

Table of contents
Table of contents

DropdownMenus 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

With a header

<div>
<%= render(Primer::DetailsComponent.new(overlay: :default, reset: true, position: :relative)) do |c| %>
<% c.summary do %>
Dropdown
<% end %>
<% c.body do %>
<%= render(Primer::DropdownMenuComponent.new(header: "Options")) do %>
<ul>
<li><a class="dropdown-item" href="#url">Dropdown item</a></li>
<li><a class="dropdown-item" href="#url">Dropdown item</a></li>
<li><a class="dropdown-item" href="#url">Dropdown item</a></li>
</ul>
<% end %>
<% end %>
<% end %>
</div>

Arguments

NameTypeDefaultDescription
directionSymbol:seOne of :se, :sw, :w, :e, :ne, or :s.
schemeSymbol:defaultPass :dark for dark mode theming
headerStringnilOptional string to display as the header
system_argumentsHashN/ASystem arguments