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 >
ArgumentsName Type Default Description overlay
Symbol
:default
One of :none
, :default
, or :dark
. reset
Boolean
true
Whether to hide the default caret on the button summary_classes
String
""
Custom classes to add to the button system_arguments
Hash
N/A System arguments
SlotsRequired 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
Name Type Default Description direction
Symbol
N/A One of :se
, :sw
, :w
, :e
, :ne
, or :s
. scheme
Symbol
N/A Pass :dark for dark mode theming header
String
N/A Optional string to display as the header system_arguments
Hash
N/A System arguments