Dropdown

Top Left

For open to below the origin add data-below-origin="true", in trigger.

Right Top

For open to right top add bas-ui-dropdown-right-top after bas-ui-dropdown

Left Bottom

For open to left bottom add bas-ui-dropdown-left-bottom after bas-ui-dropdown

Right Bottom

For open to right bottom add bas-ui-dropdown-right-bottom after bas-ui-dropdown

Structure

Add class dropdown-trigger for trigger element. And add target id for dropdown in data-target attr.

<!-- Dropdown Trigger -->
<a data-target="dropdown-test1" class="bas-ui-btn bas-ui-btn-default bas-ui-waves dropdown-trigger"></a>

<!-- Dropdown Structure -->
<ul id="dropdown-test1" class="bas-ui-dropdown">
    <li><a href="#!">Some Action</a></li>
    <li class="disabled"><a href="#!">Disabled Action</a></li>
    <li><a href="#!" class="active">Item Active</a></li>
    <li><a href="#!">Another Action</a></li>
</ul>

Sub Menu (desktop aplications)

Use only in desktop aplications.

Structure for sub menu.

<!-- Dropdown Trigger -->
<a data-target="dropdown-test5" class="bas-ui-btn bas-ui-btn-default bas-ui-waves dropdown-trigger"></a>

<!-- Dropdown Structure -->
<ul id="dropdown-test5" class="bas-ui-dropdown">
    <li><a href="#!"><i class="mdi mdi-home bas-ui-icon"></i> Some Action</a></li>
    <li><a href="#!"><i class="mdi mdi-puzzle bas-ui-icon"></i> Another Action</a></li>
    <li class="divider"></li>
    <li>
        <i class="mdi mdi-menu-right bas-ui-icon"></i>
        <!-- Dropdown Trigger -->
        <a data-target="dropdown-test5-sub" class="dropdown-trigger">
            <i class="mdi mdi-layers bas-ui-icon"></i> Another Action
        </a>
        <!-- Dropdown Sub -->
        <ul id="dropdown-test5-sub" class="bas-ui-dropdown">
            <li><a href="#!"><i class="mdi mdi-home bas-ui-icon"></i> Some Action</a></li>
            <li><a href="#!"><i class="mdi mdi-puzzle bas-ui-icon"></i> Another Action</a></li>
            <li>
                <i class="mdi mdi-menu-right bas-ui-icon"></i>
                <!-- Dropdown Trigger -->
                <a data-target="dropdown-test5-sub2" class="dropdown-trigger">
                    <i class="mdi mdi-layers bas-ui-icon"></i> Another Action
                </a>
                <!-- Dropdown Sub -->
                <ul id="dropdown-test5-sub2" class="bas-ui-dropdown">
                    <li><a href="#!"><i class="mdi mdi-home bas-ui-icon"></i> Some Action</a></li>
                    <li><a href="#!"><i class="mdi mdi-layers bas-ui-icon"></i> Another Action</a></li>
                    <li><a href="#!"><i class="mdi mdi-settings bas-ui-icon"></i> Yet Another Action</a></li>
                </ul>
            </li>
        </ul>
    </li>
    <li><a href="#!"><i class="mdi mdi-settings bas-ui-icon"></i> Yet Another Action</a></li>
</ul>

Initialization

Initialization for dropdowns is only necessary if you create them dynamically.

$(document).ready(function(){
    $('.dropdown-trigger').bas_ui_dropdown({
        inDuration: 300,
        outDuration: 225,
        hover: true,
        gutter: 0,
        belowOrigin: false
    });
});

Options

Option Name	Description
inDuration	The duration of the transition enter in milliseconds. Default: 300
outDuration	The duration of the transition out in milliseconds. Default: 225
hover	If true, the dropdown will open on hover. Default: false
gutter	This defines the spacing from the aligned edge. Default: 0
belowOrigin	If true, the dropdown will show below the trigger. Default: false

To use these inline you have to add them as data attributes.

<!-- Dropdown Trigger -->
<a data-target="dropdown-test3" data-hover="false" data-below-origin="true" class="bas-ui-btn bas-ui-btn-default dropdown-trigger"></a>

Methods

Shows a dropdown element.

$('.dropdown-trigger-custom-1').bas_ui_dropdown('show');

Hides a dropdown element.

$('.dropdown-trigger-custom-1').bas_ui_dropdown('hide');

Events

Option Name	Description
show.bas.tabs	This event fires immediately when the show instance method is called.
shown.bas.tabs	This event is fired when a dropdown has been made visible to the user (will wait for CSS transitions to complete).
hide.bas.tabs	This event is fired immediately when the hide method has been called.
hidden.bas.tabs	This event is fired when a dropdown has been hidden from the user (will wait for CSS transitions to complete).

Sample event.

$('#dropdown-test3').on('shown.bas.dropdown', function () {
    // do something...
});