Dropdown

Defines different styles for a toggleable dropdown.


Usage

Any content, like a button, can toggle a dropdown. Just wrap the toggle with a <div> element and add the data-dropdown attribute. Add the .dropdown class to a child <div> element to create the dropdown itself. A dropdown can be enabled by either hovering or clicking the the toggle.

Usage


Modifiers

Dropdown Alignment Modifiers

Usage


Dropdown Up

Usage


Dropdown Navbar

Usage


Dropdown Scrollable

Usage


JavaScript options

This is an example of how to set options via attribute:

data-dropdown="{trigger:'hover'}"
Option Possible value Default Description
trigger hover, click hover Dropdown trigger behaviour
remaintime integer 800 Remain time before auto closing dropdown in hover mode
delay integer 0 Delay time in hover mode before a dropdown is shown in ms

Events

You can bind callbacks to following events for custom functionality:

Name Description
show.clique.dropdown Triggered on dropdown is shown
hide.clique.dropdown Triggered when a dropdown is hidden

Example

$('[data-dropdown]').on('show.clique.dropdown', function(){
    // Executed after the dropdown is shown
});

$('[data-dropdown]').on('stack.clique.dropdown', function(){
    // Executed when a dropdown restacks
});

$('[data-dropdown]').on('hide.clique.dropdown', function(){
    // Executed after a dropdown is hidden
});