Loading

Dropdowns

Dropdown menus are simple and intuitive. You've got a link with data-component="dropdown" and a div with some kind of HTML content. Clicking outside of the dropdown or hitting Esc closes dropdown


Demo


Show Dropdown


// Toggle
<a href="#" data-component="dropdown" data-target="#my-dropdown">Show <span class="caret down"></span></a>
// Dropdown
<div class="dropdown hide" id="my-dropdown">
    <a href="" class="close show-sm"></a>
    <ul>
        <li><a href="">...</a></li>
    </ul>
</div>


Button trigger



// Toggle
<button data-component="dropdown" data-target="#my-dropdown">Show Dropdown <span class="caret down"></span></button>
// Dropdown
<div class="dropdown hide" id="my-dropdown">
    <p>...</p>
    <a href="#" data-action="dropdown-close">Close</a>
</div>


Settings

target
  • Type: string
  • Default: null

Sets an ID of a target dropdown layer.

height
  • Type: int
  • Default: false

Sets dropdown height.

width
  • Type: int
  • Default: false

Sets dropdown width.

animation
  • Type: boolean
  • Default: true

Turns opening and closing animation on and off.


Callbacks

// open
$('#my-dropdown').on('open.dropdown', function()
{
    // do something...
});

// opened
$('#my-dropdown').on('opened.dropdown', function() {
    // do something... 

});

// close
$('#my-dropdown').on('close.dropdown', function() {
    // do something...
});

// closed
$('#my-dropdown').on('closed.dropdown', function()
{
    // do something...
});