Dropdowns are mainly used for filters, but they can be used if you want to show more options behind a button.

We use a universal jQuery function to trigger the dropdown. The items within a dropdown can be shown as a list (usually of links) or a panel.

The data-dropdown attribute contains a value that must match the unique ID of the dropdown element. Furthermore we apply some extra classes like dropdown to make the function work universally.

Dropdown menu Dropdown panel with anchor on the right
  <a class='button' data-dropdown='#dropdown1' href='#' title='Click to show options'> <span>label</span> </a>
  <div class='dropdown dropdown-tip dropdown-relative' id='dropdown1'>
    <ul class='dropdown-menu'>
      <li><a href='#'>option 1</a></li>
      <li><a href='#'>option 2</a></li>
      <li><a href='#'>option 3</a></li>