Skip to content
Primer
ViewComponents
What's new
Design
Interface guidelinesOcticonsPresentationsCommand lineMobileDesktop
Development
CSSReactViewComponents
About
Getting started
ContributingSystem arguments
Components
AvatarAvatarStackBlankslateBorderBoxBoxBreadcrumbButtonButtonGroupButtonMarketingCounterDetailsDropdownDropdownMenuFlashFlexFlexItemHeadingLabelLayoutLinkMenuMarkdownOcticonPopoverProgressBarSpinnerStateSubheadTabContainerTabNavTextTimelineItemTooltipTruncateUnderlineNav
GitHub

Dropdown

Table of contents
Alpha
View sourceView storybook
Table of contents

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

Dropdown
Options
  • Item 1
  • Item 2
  • Item 3
  • Item 4
<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

Dropdown
Options
  • Item 1
  • Item 2
  • Item 3
  • Item 4
<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

NameTypeDefaultDescription
overlaySymbol:defaultOne of :none, :default, or :dark.
resetBooleantrueWhether to hide the default caret on the button
summary_classesString""Custom classes to add to the button
system_argumentsHashN/ASystem 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

NameTypeDefaultDescription
directionSymbolN/AOne of :se, :sw, :w, :e, :ne, or :s.
schemeSymbolN/APass :dark for dark mode theming
headerStringN/AOptional string to display as the header
system_argumentsHashN/ASystem arguments
Edit this page on GitHub