Dropdowns

Dropdown With Chevron

• main
• one
• two
• three and four

= link_to "Dropdown With Chevron", "#", class: "dropdown-button with-chevron", data: { activates: "dropdown1" }

%ul#dropdown1.dropdown-content
  %li
    %a.black-text{ href: "#!" } main
  %li.divider
  %li
    %a.black-text{ href: "#!" } one
  %li
    %a.black-text{ href: "#!" } two
  %li
    %a.black-text{ href: "#!" } three and four

Dropdown In Header

• January 2017
• February 2017
• March 2017
• April 2017

= link_to "Dropdown In Header", "#", class: "dropdown-button in-header", data: { activates: "month-dropdown" }

%ul.dropdown-content#month-dropdown
  %li
    %a.black-text{ href: "#!" } January 2017
  %li
    %a.black-text{ href: "#!" } February 2017
  %li
    %a.black-text{ href: "#!" } March 2017
  %li
    %a.black-text{ href: "#!" } April 2017

.dropdown-container.relative
  = link_to "Dropdown Right", "#", class: "dropdown-button in-header", data: { activates: "dropdown-right" }

  %ul.dropdown-content.dropdown-content-right#dropdown-right
    %li
      %a.black-text{ href: "#!" } Option 1
    %li
      %a.black-text{ href: "#!" } Option 2
    %li
      %a.black-text{ href: "#!" } Option 3
    %li
      %a.black-text{ href: "#!" } Option 4

.dropdown-container.relative
  // Note: you can position the options up and to the right of the link with mt-x, ml-x classes on the a tag
  = link_to "Dropdown Auto", "#", class: "dropdown-button in-header", data: { activates: "dropdown-auto" }

  %ul.dropdown-content.dropdown-content-auto#dropdown-auto
    %li
      %a.black-text{ href: "#!" } Option 1
    %li
      %a.black-text{ href: "#!" } Option 2
    %li
      %a.black-text{ href: "#!" } Option 3
    %li
      %a.black-text{ href: "#!" } Option 4