Dropdown Component

The dropdown component is commonly used to show a list of menu items when clicking on an element, such as an options button, and will hide when focusing outside of the dropdown elements.

The component is greatly based on the awesome Tippy.js.

Usage #

You need a trigger element and a dropdown element placed next to each other. Don't forget to set the data-dropdown-toggle attribute to the trigger element.

Split Button #

Sometimes both the trigger and dropdown elements can't sit next to each other. So we set the value of the data-dropdown-toggle attribute as a selector to be matched by the dropdown element. For example, this is how it looks when the split button is used as a trigger element.

<div class="button-group">
                                    <button type="button" class="button">
                                        <span>Split Dropdown</span>
                                    </button>
                                    <button
                                        type="button"
                                        data-dropdown-toggle="#splitButtonDropdown"
                                        data-tippy-placement="bottom-end"
                                        aria-haspopup="true"
                                        class="button button--icon">
                                        <i data-icon="feather__chevronDown" class="transform transition"></i>
                                    </button>
                                </div>
                                <ul id="splitButtonDropdown" class="dropdown">
                                    <li class="dropdown__item">
                                        <a href="">Action</a>
                                    </li>
                                    
                                </ul>

Divider #

Insert the divider to separate the dropdown items. Just add any element with the dropdown__divider class to the dropdown element.

Heading #

There is also a heading element that you can add between the dropdown items. The element should have a dropdown__heading class.

More Examples #

Animated Chevron #

This is how it looks when the chevron gets animated. Pay attention to the class change of the trigger and chevron elements.

With Icons #

You can add an icon to each dropdown item. So it will look more interesting.

You may also want to add an extra little touch. There is a hover animation. Apply it by giving the dropdown element a dropdown--has-icon class.

Initializing #

You can use one of these two methods to initialize the dropdown instance.

Via Data Attributes #

The easiest way to initialize the dropdown component is by using the data attributes. All the example of usage above have been using this method. If you haven't checked it out yet, just scroll back to the top.

Place the trigger and target elements next to one another. Then, set the data-dropdown-toggle attribute to the trigger element. Alternatively, if you don't want to place the two elements next to one another, you can set the value of the data-dropdown-toggle attribute as a selector that matches the target element (Look at the Split Button section).

There are more options you can set by adding the data-dropdown-{key}="{value}" or data-tippy-{key}="{value}" attribute to dropdown elements. The value fully supports JSON syntax.

Via Javascript #

Initialize the dropdown component by calling the Dropdown.createInstance(element, options) function.

We recommend you understand the content options of TippyJS, so you will know how it actually works. Even better, if you are willing to skim the whole docs.

Function	Description
`Dropdown.createInstance(element, options)`	Create a Dropdown instance.
`Dropdown.getInstance(element, options)`	If any, get the Dropdown instance.
`Dropdown.getOrCreateInstance(element, options)`	Get the Dropdown instance if there is one. Create it if necessary.
`Dropdown.destroyInstance(element)`	To destroy a Dropdown instance. Usually called before removing the element.
`Dropdown.dataApi(wrapperElement)`	Execute the Data API within the specified `wrapperElement`.

API #

Parameters #

Most Skewind component constructors accept two parameters, as well as the Dropdown component.

Parameter	Type	Required	Description
`toggleEl`	HTMLElement	Required	The toggle element. You can use any HTMLElement. But we recommend you use the button or input element. If not, make sure you add `tabindex="0"` so that it can receive focus.
`options`	Object	Required	Pass the tippy options object.

Options #

Since it uses TippyJS, you can see the available options from their documentation.

Methods #

Each instance has these public methods.

Methods	Return	Description
`dispose()`	void	Alternative to `Dropdown.destroyInstance`. Just in case if you want to remove dropdown element, call this first.
TippyJS Methods	mixed	Call them through the tippy instance that lived in the instance public attribute. `instance.tippy.show()`

Events #

This event may be emitted for hooking into dropdown functionality.

Event	Description
`dropdown.show`	This event is triggered when the dropdown element is about to appear.
`dropdown.hide`	This event is triggered when the dropdown element is about to disappear.
`dropdown.dispose`	This event is triggered when the dropdown instance got disposed.
TippyJS Events	If you want to listen to the TippyJS event, pass it to the options instead.

Messages

Notifications

Dropdown