Dropdown

A mobile-friendly dropdown menu. The dropdown will appear as a modal on screens below the medium breakpoint.

Variants

Dropdown dropdown

A basic dropdown

Button Dropdown dropdown--button

A dropdown, but styled as a button

  • 

    <%= render "dropdown", label: "dropdown label" do %>
  <a href="#" class="dropdown__option">Option 1</a>
  <a href="#" class="dropdown__option">Option 2</a>
  <a href="#" class="dropdown__option">Option 3</a>
  <a href="#" class="dropdown__option">Option 4</a>
<% end %>

<%= render "dropdown", label: "dropdown label",
  additional_classes: ["dropdown--align-right"] do %>
  <a href="#" class="dropdown__option">Option 1</a>
  <a href="#" class="dropdown__option">Option 2</a>
  <a href="#" class="dropdown__option">Option 3</a>
  <a href="#" class="dropdown__option">Option 4</a>
<% end %>
    

  • 

    <%= render "dropdown", label: "dropdown label",
  additional_classes: ["dropdown--button"] do %>
  <a href="#" class="dropdown__option">Option 1</a>
  <a href="#" class="dropdown__option">Option 2</a>
  <a href="#" class="dropdown__option">Option 3</a>
  <a href="#" class="dropdown__option">Option 4</a>
<% end %>

<%= render "dropdown", label: "dropdown label",
  additional_classes: ["dropdown--button", "dropdown--align-right"] do %>
  <a href="#" class="dropdown__option">Option 1</a>
  <a href="#" class="dropdown__option">Option 2</a>
  <a href="#" class="dropdown__option">Option 3</a>
  <a href="#" class="dropdown__option">Option 4</a>
<% end %>

Usage

Using the partial

The “dropdown” partial should be used for rendering all dropdowns

Using modifiers

Modifier classes can be passed as “additional_classes” to the partial.

Class Name Description
dropdown

the container div of the dropdown
dropdown--align-right

aligns the dropdown options to the right of the dropdown toggle
dropdown--button

styles the dropdown like a primary button