Dropdowns - Flex UI Library

Dropdowns

Standard Dropdown

This dropdown is a Bootstrap dropdown with styles overridden by the UI Library.

<div class="dropdown">
  <button class="btn btn-primary" type="button" data-toggle="dropdown">
    Dropdown Toggle
  </button>
  <ul class="dropdown-menu">
    <li> <a href="">Fields - Main Listings</a> </li>
    <li> <a href="">Change Listing</a> </li>
    <li> <a href="">Contact Management</a> </li>
    <li class="divider"></li>
    <li class="dropdown-header">Example Section Header</li>
    <li> <a href="">Main List Fields &amp; Scroll</a> </li>
    <li> <a href="">Status Change</a> </li>
    <li> <a href="">Custom Fields</a> </li>
    <li> <a href="">Constraints</a> </li>
    <li> <a href="">Property Types</a> </li>
    <li> <a href="">Location Search</a> </li>
    <li> <a href="">Groups - Details</a> </li>
    <li> <a href="">This item is way too long. Really, why would someone do this. Let me tell you a story.</a> </li>
    <li class="divider"></li>
    <li> <a href="">Details &amp; Scroll</a> </li>
    <li> <a href="">Fields - Rooms</a> </li>
    <li> <a href="">Portal Preferences</a> </li>
  </ul>
</div>

Dropdown Over iframe

iframes don't automatically propagate click events so the dropdown won't close when an iframe is clicked. You can use the blur event to close the dropdown.

The following example uses the data attribute and backdrop.

<div id="dropdownOverIframe" class="dropdown">
  <button class="btn btn-primary" type="button" data-toggle="dropdown">
    Dropdown Toggle
  </button>
  <ul class="dropdown-menu">
    <li> <a href="">Fields - Main Listings</a> </li>
    <li> <a href="">Change Listing</a> </li>
    <li> <a href="">Contact Management</a> </li>
  </ul>
</div>
<br>
<iframe src="http://www.flexmls.com" frameborder="0" style="width: 300px; height: 300px;"></iframe>
<script>
  $(window).on('blur',function() { 
    $('#dropdownOverIframe').removeClass('open'); 
  });
</script>

Alternate Dropdown Triggers

Default

<div class="dropdown">
  <button class="btn btn-plain c-dropdown--trigger" data-toggle="dropdown">
    Default
    <span class="flexicon flexicon-chevron--small flexicon-90"></span>
  </button>
  <ul class="dropdown-menu">
    <li> <a href="">Fields - Main Listings</a> </li>
    <li> <a href="">Change Listing</a> </li>
    <li> <a href="">Contact Management</a> </li>
  </ul>
</div>

Secondary

<div class="dropdown">
  <button class="btn btn-plain c-dropdown--trigger c-dropdown--secondary" data-toggle="dropdown">
    Secondary
    <span class="flexicon flexicon-chevron--small flexicon-90"></span>
  </button>
  <ul class="dropdown-menu">
    <li> <a href="">Fields - Main Listings</a> </li>
    <li> <a href="">Change Listing</a> </li>
    <li> <a href="">Contact Management</a> </li>
  </ul>
</div>

Button

<div class="dropdown">
  <button class="btn btn-tertiary c-dropdown--trigger"
          type="button" data-toggle="dropdown">
    Button
    <span class="flexicon flexicon-chevron--small flexicon-90"></span>
  </button>
  <ul class="dropdown-menu">
    <li> <a href="">Fields - Main Listings</a> </li>
    <li> <a href="">Change Listing</a> </li>
    <li> <a href="">Contact Management</a> </li>
  </ul>
</div>

Title

<div class="dropdown">
  <button class="btn btn-title c-dropdown--trigger" data-toggle="dropdown">
    <span class="t-title">Title Example</span>
    <span class="flexicon flexicon-chevron--small flexicon-90"></span>
  </button>
  <ul class="dropdown-menu">
    <li> <a href="">Fields - Main Listings</a> </li>
    <li> <a href="">Change Listing</a> </li>
    <li> <a href="">Contact Management</a> </li>
  </ul>
</div>

Title Large

<div class="dropdown">
  <button class="btn btn-title c-dropdown--trigger" data-toggle="dropdown">
    <span class="t-title--large">Title Large Example</span>
    <span class="flexicon flexicon-chevron--small flexicon-90"></span>
  </button>
  <ul class="dropdown-menu">
    <li> <a href="">Fields - Main Listings</a> </li>
    <li> <a href="">Change Listing</a> </li>
    <li> <a href="">Contact Management</a> </li>
  </ul>
</div>

Title Larger

<div class="dropdown">
  <button class="btn btn-title c-dropdown--trigger" data-toggle="dropdown">
    <span class="t-title--larger">Title Larger Example</span>
    <span class="flexicon flexicon-chevron--small flexicon-90"></span>
  </button>
  <ul class="dropdown-menu">
    <li> <a href="">Fields - Main Listings</a> </li>
    <li> <a href="">Change Listing</a> </li>
    <li> <a href="">Contact Management</a> </li>
  </ul>
</div>

Title Largest

<div class="dropdown">
  <button class="btn btn-title c-dropdown--trigger" data-toggle="dropdown">
    <span class="t-title--largest">Title Largest Example</span>
    <span class="flexicon flexicon-chevron--small flexicon-90"></span>
  </button>
  <ul class="dropdown-menu">
    <li> <a href="">Fields - Main Listings</a> </li>
    <li> <a href="">Change Listing</a> </li>
    <li> <a href="">Contact Management</a> </li>
  </ul>
</div>