Dropdown

Dropdown menus in Kube 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>

// 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”>

<span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>...<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span>
<span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#"</span> <span class="hljs-attr">data-action</span>=<span class="hljs-string">"dropdown-close"</span>&gt;</span>Close<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>

</div>

Navigation Fixed

Scroll down a bit to make a fixed navigation bar appear at the top of the page, and then try out "Account" dropdown.

<div id="navbar-demo" data-component="sticky">
    <nav>
        <ul>
            <li><a href="">...</a></li>
            <li>
                <a href="" data-component="dropdown" data-target="#dropdown-fixed">
                    Account
                    <span class="caret down"></span>
                </a>
            </li>
        </ul>
    </nav>
</div>

// Dropdown <div class=“dropdown hide” id=“dropdown-fixed”> <ul> <li><a href=""></a></li> </ul> </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...
});