Dropdown

Alpha

View source View storybook

On this page

Arguments
Slots
Examples

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

Name	Type	Default	Description
`overlay`	`Symbol`	`:default`	One of `:dark`, `:default`, or `:none`.
`with_caret`	`Boolean`	`false`	Whether or not a caret should be rendered in the button.
`system_arguments`	`Hash`	N/A	System arguments

Slots

`Button`

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

`Menu`

Required context menu for the dropdown.

Name	Type	Default	Description
`as`	`Symbol`	N/A	When `as` is `:list`, wraps the menu in a `<ul>` with a `<li>` for each item.
`direction`	`Symbol`	N/A	One of `:e`, `:ne`, `:s`, `:se`, `:sw`, or `:w`.
`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

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 %>

<%= 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 %>

Edit this page on GitHub