Dropdown

Use dropdown for a lightweight context menu for housing navigation and actions.

Alpha
Not reviewed for accessibility

On this page

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::Alpha::Dropdown.new) do |component| %>
  <% component.with_button do %>
    Dropdown
  <% end %>

  <% component.with_menu(header: "Options") do |menu|
    menu.with_item { "Item 1" }
    menu.with_item { "Item 2" }
    menu.with_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::Alpha::Dropdown.new) do |component| %>
  <% component.with_button do %>
    Dropdown
  <% end %>

  <% component.with_menu(header: "Options") do |menu|
    menu.with_item { "Item 1" }
    menu.with_item { "Item 2" }
    menu.with_item(divider: true)
    menu.with_item { "Item 3" }
    menu.with_item { "Item 4" }
    menu.with_item(divider: true)
    menu.with_item { "Item 5" }
    menu.with_item { "Item 6" }
  end %>
<% end %>

With direction

<%= render(Primer::Alpha::Dropdown.new(display: :inline_block)) do |component| %>
  <% component.with_button do %>
    Dropdown
  <% end %>

  <% component.with_menu(header: "Options", direction: :s) do |menu|
    menu.with_item { "Item 1" }
    menu.with_item { "Item 2" }
    menu.with_item { "Item 3" }
    menu.with_item { "Item 4" }
  end %>
<% end %>

With caret

<%= render(Primer::Alpha::Dropdown.new(with_caret: true)) do |component| %>
  <% component.with_button do %>
    Dropdown
  <% end %>

  <% component.with_menu(header: "Options") do |menu|
    menu.with_item { "Item 1" }
    menu.with_item { "Item 2" }
    menu.with_item { "Item 3" }
    menu.with_item { "Item 4" }
  end %>
<% end %>

Customizing the button

<%= render(Primer::Alpha::Dropdown.new) do |component| %>
  <% component.with_button(scheme: :primary, size: :small) do %>
    Dropdown
  <% end %>

  <% component.with_menu(header: "Options") do |menu|
    menu.with_item { "Item 1" }
    menu.with_item { "Item 2" }
    menu.with_item { "Item 3" }
    menu.with_item { "Item 4" }
  end %>
<% end %>

<%= render(Primer::Alpha::Dropdown.new) do |component| %>
  <% component.with_button do %>
    Dropdown
  <% end %>

  <% component.with_menu(as: :list, header: "Options") do |menu|
    menu.with_item { "Item 1" }
    menu.with_item { "Item 2" }
    menu.with_item(divider: true)
    menu.with_item { "Item 3" }
    menu.with_item { "Item 4" }
  end %>
<% end %>

<%= render(Primer::Alpha::Dropdown.new) do |component| %>
  <% component.with_button do %>
    Dropdown
  <% end %>

  <% component.with_menu(header: "Options") do |menu|
    menu.with_item(tag: :button) { "Item 1" }
    menu.with_item(classes: "custom-class") { "Item 2" }
    menu.with_item { "Item 3" }
  end %>
<% end %>

Edit this page on GitHub