Dropdown

Table of contents

Examples
Arguments
Slots

Alpha

View source View storybook

Table of contents

Examples
Arguments
Slots

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

Name	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

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

`Menu`

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

Edit this page on GitHub