Dropdowns

Dropdowns require jQuery and the Mercury UI Framework dropdown plugin to work. Note: You will need to initialize them by calling $().mercuryuiDropdown();.

You can also open and close dropdowns individually via the plugin through actions by targeting the id of the dropdown: $('#dropdown-base').mercuryuiDropdown('open'); and $('#dropdown-base').mercuryuiDropdown('close');.

Callbacks are provided for beforeOpen, afterOpen, beforeClose, and afterClose. An example for afterOpen would be: $('#dropdown-base').mercuryuiDropdown('open', { afterOpen: function(){ alert('Dropdown opened!'); } });

Base

<div class="dropdown margin--off">
    <button type="button" class="button button--white dropdown--button" id="dropdown-base-button" aria-controls="dropdown-base" aria-haspopup="true" aria-expanded="false">
        Dropdown <span class="arrow"></span>
    </button>
    <div class="dropdown--list" id="dropdown-base" aria-labelledby="dropdown-base-button" aria-expanded="false" aria-hidden="true">
        <a href="#" class="dropdown--link">Dropdown Link</a>
        <div class="dropdown--divider"></div>
        <a href="#" class="dropdown--link">Dropdown Link</a>
    </div>
</div>

Colors

<div class="dropdown dropdown--primary-color margin--off">
    <button type="button" class="button button--primary-color dropdown--button" id="dropdown-primary-button" aria-controls="dropdown-primary" aria-expanded="false">
        Dropdown <span class="arrow"></span>
    </button>
    <div class="dropdown--list" id="dropdown-primary" aria-labelledby="dropdown-primary-button" aria-expanded="false" aria-hidden="true">
        <a href="#" class="dropdown--link">Dropdown Link</a>
        <div class="dropdown--divider"></div>
        <a href="#" class="dropdown--link">Dropdown Link</a>
    </div>
</div>

<div class="dropdown dropdown--secondary-color margin--off">
    <button type="button" class="button button--secondary-color dropdown--button" id="dropdown-secondary-button" aria-controls="dropdown-secondary" aria-expanded="false">
        Dropdown <span class="arrow"></span>
    </button>
    <div class="dropdown--list" id="dropdown-secondary" aria-labelledby="dropdown-secondary-button" aria-expanded="false" aria-hidden="true">
        <a href="#" class="dropdown--link">Dropdown Link</a>
        <div class="dropdown--divider"></div>
        <a href="#" class="dropdown--link">Dropdown Link</a>
    </div>
</div>

<div class="dropdown dropdown--tertiary-color margin--off">
    <button type="button" class="button button--tertiary-color dropdown--button" id="dropdown-tertiary-button" aria-controls="dropdown-tertiary" aria-expanded="false">
        Dropdown <span class="arrow"></span>
    </button>
    <div class="dropdown--list" id="dropdown-tertiary" aria-labelledby="dropdown-tertiary-button" aria-expanded="false" aria-hidden="true">
        <a href="#" class="dropdown--link">Dropdown Link</a>
        <div class="dropdown--divider"></div>
        <a href="#" class="dropdown--link">Dropdown Link</a>
    </div>
</div>

Right Aligned

Note: Right aligned dropdowns may extend off of the screen if you're not careful, like the example below. Use the breakpoint classes below for the best results.

<div class="dropdown dropdown--right margin--off">
    <button type="button" class="button button--white dropdown--button" id="dropdown-right-button" aria-controls="dropdown-right" aria-haspopup="true" aria-expanded="false">
        Dropdown <span class="arrow"></span>
    </button>
    <div class="dropdown--list" id="dropdown-right" aria-labelledby="dropdown-right-button" aria-expanded="false" aria-hidden="true">
        <a href="#" class="dropdown--link">Dropdown Link</a>
        <div class="dropdown--divider"></div>
        <a href="#" class="dropdown--link">Dropdown Link</a>
    </div>
</div>

Right Aligned At Breakpoints

Note: Resize your browser window to see the following dropdowns lists align themselves to the right at different breakpoints.

XXS & Up

<div class="dropdown dropdown--right--xxs margin--off">
    <button type="button" class="button button--white dropdown--button" id="dropdown-right-xxs-button" aria-controls="dropdown-right-xxs" aria-haspopup="true" aria-expanded="false">
        Dropdown <span class="arrow"></span>
    </button>
    <div class="dropdown--list id="dropdown-right-xxs" aria-labelledby="dropdown-right-xxs-button" aria-expanded="false" aria-hidden="true"">
        <a href="#" class="dropdown--link">Dropdown Link</a>
        <div class="dropdown--divider"></div>
        <a href="#" class="dropdown--link">Dropdown Link</a>
    </div>
</div>

XS & Up

<div class="dropdown dropdown--right--xs margin--off">
    <button type="button" class="button button--white dropdown--button" id="dropdown-right-xs-button" aria-controls="dropdown-right-xs" aria-haspopup="true" aria-expanded="false">
        Dropdown <span class="arrow"></span>
    </button>
    <div class="dropdown--list" id="dropdown-right-xs" aria-labelledby="dropdown-right-xs-button" aria-expanded="false" aria-hidden="true">
        <a href="#" class="dropdown--link">Dropdown Link</a>
        <div class="dropdown--divider"></div>
        <a href="#" class="dropdown--link">Dropdown Link</a>
    </div>
</div>

SM & Up

<div class="dropdown dropdown--right--sm margin--off">
    <button type="button" class="button button--white dropdown--button" id="dropdown-right-sm-button" aria-controls="dropdown-right-sm" aria-haspopup="true" aria-expanded="false">
        Dropdown <span class="arrow"></span>
    </button>
    <div class="dropdown--list" id="dropdown-right-sm" aria-labelledby="dropdown-right-sm-button" aria-expanded="false" aria-hidden="true">
        <a href="#" class="dropdown--link">Dropdown Link</a>
        <div class="dropdown--divider"></div>
        <a href="#" class="dropdown--link">Dropdown Link</a>
    </div>
</div>

MD & Up

<div class="dropdown dropdown--right--md margin--off">
    <button type="button" class="button button--white dropdown--button" id="dropdown-right-md-button" aria-controls="dropdown-right-md" aria-haspopup="true" aria-expanded="false">
        Dropdown <span class="arrow"></span>
    </button>
    <div class="dropdown--list" id="dropdown-right-md" aria-labelledby="dropdown-right-md-button" aria-expanded="false" aria-hidden="true">
        <a href="#" class="dropdown--link">Dropdown Link</a>
        <div class="dropdown--divider"></div>
        <a href="#" class="dropdown--link">Dropdown Link</a>
    </div>
</div>

LG & Up

<div class="dropdown dropdown--right--lg margin--off">
    <button type="button" class="button button--white dropdown--button" id="dropdown-right-lg-button" aria-controls="dropdown-right-lg" aria-haspopup="true" aria-expanded="false">
        Dropdown <span class="arrow"></span>
    </button>
    <div class="dropdown--list" id="dropdown-right-lg" aria-labelledby="dropdown-right-lg-button" aria-expanded="false" aria-hidden="true">
        <a href="#" class="dropdown--link">Dropdown Link</a>
        <div class="dropdown--divider"></div>
        <a href="#" class="dropdown--link">Dropdown Link</a>
    </div>
</div>

XL & Up

<div class="dropdown dropdown--right--xl margin--off">
    <button type="button" class="button button--white dropdown--button" id="dropdown-right-xl-button" aria-controls="dropdown-right-xl" aria-haspopup="true" aria-expanded="false">
        Dropdown <span class="arrow"></span>
    </button>
    <div class="dropdown--list" id="dropdown-right-xl" aria-labelledby="dropdown-right-xl-button" aria-expanded="false" aria-hidden="true">
        <a href="#" class="dropdown--link">Dropdown Link</a>
        <div class="dropdown--divider"></div>
        <a href="#" class="dropdown--link">Dropdown Link</a>
    </div>
</div>

XXL & Up

<div class="dropdown dropdown--right--xxl margin--off">
    <button type="button" class="button button--white dropdown--button" id="dropdown-right-xxl-button" aria-controls="dropdown-right-xxl" aria-haspopup="true" aria-expanded="false">
        Dropdown <span class="arrow"></span>
    </button>
    <div class="dropdown--list" id="dropdown-right-xxl" aria-labelledby="dropdown-right-xxl-button" aria-expanded="false" aria-hidden="true">
        <a href="#" class="dropdown--link">Dropdown Link</a>
        <div class="dropdown--divider"></div>
        <a href="#" class="dropdown--link">Dropdown Link</a>
    </div>
</div>