Documentation

Introduction
Layout
Text

Dropdown

Defines different styles for a toggleable dropdown.

Usage

Basically, a dropdown is a specific case of the drop that provides its own styling. Any content, like a button, can toggle a dropdown. Just add the uk-dropdown attribute to a block element following the toggle.

<button type="button"></button>
<div uk-dropdown></div>

A dropdown can be enabled by hovering and clicking the toggle. Just add the mode: click option to the attribute to force click mode only. If you want to group the toggle and the dropdown, you can just add the .uk-inline class from the Utility component to a container element around both.

<div class="uk-inline">
    <button type="button"></button>
    <div uk-dropdown="mode: click"></div>
</div>

<div class="uk-inline">
    <button class="uk-button uk-button-default" type="button">Hover</button>
    <div uk-dropdown>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</div>
</div>

<div class="uk-inline">
    <button class="uk-button uk-button-default" type="button">Click</button>
    <div uk-dropdown="mode: click">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt.</div>
</div>

A dropdown can contain a nav from the Nav component. Just add the .uk-nav class and the .uk-dropdown-nav modifier to a <ul> element.

<button type="button"></button>
<div uk-dropdown>
    <ul class="uk-nav uk-dropdown-nav">...</ul>
</div>

<button class="uk-button uk-button-default" type="button">Hover</button>
<div uk-dropdown>
    <ul class="uk-nav uk-dropdown-nav">
        <li class="uk-active"><a href="#">Active</a></li>
        <li><a href="#">Item</a></li>
        <li class="uk-nav-header">Header</li>
        <li><a href="#">Item</a></li>
        <li><a href="#">Item</a></li>
        <li class="uk-nav-divider"></li>
        <li><a href="#">Item</a></li>
    </ul>
</div>

Grid in dropdown

You can place a grid from the Grid component inside a dropdown, which can hold a navigation or any other content. Just wrap the content with a <div> element and add the uk-grid attribute. If the grid should stack automatically, whenever the dropdown no longer fits its container, just add the .uk-dropdown-grid class.

<div class="uk-width-large" uk-dropdown>
    <div class="uk-dropdown-grid uk-child-width-1-2@m" uk-grid>...</div>
</div>

Use one of the classes from the Width component to adjust the dropdown’s width.

<button class="uk-button uk-button-default" type="button">Hover</button>
<div class="uk-width-large" uk-dropdown>
    <div class="uk-dropdown-grid uk-child-width-1-2@m" uk-grid>
        <div>
            <ul class="uk-nav uk-dropdown-nav">
                <li class="uk-active"><a href="#">Active</a></li>
                <li><a href="#">Item</a></li>
                <li class="uk-nav-header">Header</li>
                <li><a href="#">Item</a></li>
                <li><a href="#">Item</a></li>
                <li class="uk-nav-divider"></li>
                <li><a href="#">Item</a></li>
            </ul>
        </div>
        <div>
            <ul class="uk-nav uk-dropdown-nav">
                <li class="uk-active"><a href="#">Active</a></li>
                <li><a href="#">Item</a></li>
                <li class="uk-nav-header">Header</li>
                <li><a href="#">Item</a></li>
                <li><a href="#">Item</a></li>
                <li class="uk-nav-divider"></li>
                <li><a href="#">Item</a></li>
            </ul>
        </div>
    </div>
</div>

Position

Add one of the following options to the uk-dropdown attribute to adjust the dropdown’s alignment.

<div uk-dropdown="pos: top-left"></div>

<div class="uk-inline">
    <button class="uk-button uk-button-default" type="button">Top Right</button>
    <div uk-dropdown="pos: top-right">
        <ul class="uk-nav uk-dropdown-nav">
            <li class="uk-active"><a href="#">Active</a></li>
            <li><a href="#">Item</a></li>
            <li class="uk-nav-header">Header</li>
            <li><a href="#">Item</a></li>
            <li><a href="#">Item</a></li>
            <li class="uk-nav-divider"></li>
            <li><a href="#">Item</a></li>
        </ul>
    </div>
</div>

<div class="uk-inline">
    <button class="uk-button uk-button-default" type="button">Bottom Justify</button>
    <div uk-dropdown="pos: bottom-justify">
        <ul class="uk-nav uk-dropdown-nav">
            <li class="uk-active"><a href="#">Active</a></li>
            <li><a href="#">Item</a></li>
            <li class="uk-nav-header">Header</li>
            <li><a href="#">Item</a></li>
            <li><a href="#">Item</a></li>
            <li class="uk-nav-divider"></li>
            <li><a href="#">Item</a></li>
        </ul>
    </div>
</div>

<div class="uk-inline">
    <button class="uk-button uk-button-default" type="button">Right Center</button>
    <div uk-dropdown="pos: right-center">
        <ul class="uk-nav uk-dropdown-nav">
            <li class="uk-active"><a href="#">Active</a></li>
            <li><a href="#">Item</a></li>
            <li class="uk-nav-header">Header</li>
            <li><a href="#">Item</a></li>
            <li><a href="#">Item</a></li>
            <li class="uk-nav-divider"></li>
            <li><a href="#">Item</a></li>
        </ul>
    </div>
</div>
Position Description
bottom-left Aligns the dropdown to the bottom left.
bottom-center Aligns the dropdown to the bottom center.
bottom-right Aligns the dropdown to the bottom right.
bottom-justify Aligns the dropdown to the bottom and justifies its width to the related element.
top-left Aligns the dropdown to the top left.
top-center Aligns the dropdown to the top center.
top-right Aligns the dropdown to the top right.
top-justify Aligns the dropdown to the top and justifies its width to the related element.
left-top Aligns the dropdown to the left top.
left-center Aligns the dropdown to the left center.
left-bottom Aligns the dropdown to the left bottom.
right-top Aligns the dropdown to the right top.
right-center Aligns the dropdown to the right center.
right-bottom Aligns the dropdown to the right bottom.

Boundary

By default, the dropdown flips automatically when it exceeds the viewport’s edge. If you want to flip it according to a container’s boundary, just add the boundary: .my-class option to the uk-dropdown attribute, using a selector for the container. That way you can determine any parent element as the drop’s boundary.

<div class="my-class">
    <button type="button"></button>
    <div uk-dropdown="boundary: .my-class"></div>
</div>

<div class="boundary uk-panel uk-placeholder uk-width-2-3@s">

    <button class="uk-button uk-button-default uk-float-left" type="button">Hover</button>
    <div uk-dropdown="boundary: .boundary">
        <ul class="uk-nav uk-dropdown-nav">
            <li class="uk-active"><a href="#">Active</a></li>
            <li><a href="#">Item</a></li>
            <li class="uk-nav-header">Header</li>
            <li><a href="#">Item</a></li>
            <li><a href="#">Item</a></li>
            <li class="uk-nav-divider"></li>
            <li><a href="#">Item</a></li>
        </ul>
    </div>

    <button class="uk-button uk-button-default uk-float-right" type="button">Hover</button>
    <div uk-dropdown="boundary: .boundary">
        <ul class="uk-nav uk-dropdown-nav">
            <li class="uk-active"><a href="#">Active</a></li>
            <li><a href="#">Item</a></li>
            <li class="uk-nav-header">Header</li>
            <li><a href="#">Item</a></li>
            <li><a href="#">Item</a></li>
            <li class="uk-nav-divider"></li>
            <li><a href="#">Item</a></li>
        </ul>
    </div>

</div>

Boundary alignment

You can also align the dropdown to its boundary. To do so, add the boundary-align: true option to the attribute.

<div class="my-class">
    <button type="button"></button>
    <div uk-dropdown="boundary: .my-class; boundary-align: true"></div>
</div>

<div class="boundary-align uk-panel uk-placeholder">

    <button class="uk-button uk-button-default uk-float-left" type="button">Justify</button>
    <div uk-dropdown="pos: bottom-justify; boundary: .boundary-align; boundary-align: true">
        <ul class="uk-nav uk-dropdown-nav">
            <li class="uk-active"><a href="#">Active</a></li>
            <li><a href="#">Item</a></li>
            <li class="uk-nav-header">Header</li>
            <li><a href="#">Item</a></li>
            <li><a href="#">Item</a></li>
            <li class="uk-nav-divider"></li>
            <li><a href="#">Item</a></li>
        </ul>
    </div>

    <button class="uk-button uk-button-default uk-float-right" type="button">Center</button>
    <div uk-dropdown="pos: bottom-center; boundary: .boundary-align; boundary-align: true">
        <ul class="uk-nav uk-dropdown-nav">
            <li class="uk-active"><a href="#">Active</a></li>
            <li><a href="#">Item</a></li>
            <li class="uk-nav-header">Header</li>
            <li><a href="#">Item</a></li>
            <li><a href="#">Item</a></li>
            <li class="uk-nav-divider"></li>
            <li><a href="#">Item</a></li>
        </ul>
    </div>

</div>

Offset

To define a custom offset between the dropdown container and the toggle, add the offset option with a value for the offset, measured in pixels.

<div uk-dropdown="offset: 80"></div>

<button class="uk-button uk-button-default" type="button">Hover</button>
<div uk-dropdown="offset: 80">
    <ul class="uk-nav uk-dropdown-nav">
        <li class="uk-active"><a href="#">Active</a></li>
        <li><a href="#">Item</a></li>
        <li class="uk-nav-header">Header</li>
        <li><a href="#">Item</a></li>
        <li><a href="#">Item</a></li>
        <li class="uk-nav-divider"></li>
        <li><a href="#">Item</a></li>
    </ul>
</div>

Animation

Apply one or more animations to the dropdown by adding the animation: uk-animation-* option with one of the classes from the Animation component. You can also determine the animation’s duration. Just add the duration option with your value.

<div uk-dropdown="animation: uk-animation-slide-top-small; duration: 1000"></div>

<button class="uk-button uk-button-default" type="button">Hover</button>
<div uk-dropdown="animation: uk-animation-slide-top-small; duration: 1000">
    <ul class="uk-nav uk-dropdown-nav">
        <li class="uk-active"><a href="#">Active</a></li>
        <li><a href="#">Item</a></li>
        <li class="uk-nav-header">Header</li>
        <li><a href="#">Item</a></li>
        <li><a href="#">Item</a></li>
        <li class="uk-nav-divider"></li>
        <li><a href="#">Item</a></li>
    </ul>
</div>

Component options

Any of these options can be applied to the component attribute. Separate multiple options with a semicolon. Learn more

| Option | Value | Default | Description | |:—————–|:—————-|:—————|:—————————————————————————————————| | toggle | String, Boolean | - * | CSS selector for the element to be used as toggle. By default, the preceding element is used. | | pos | String | bottom-left | The position of the dropdown. | | mode | String | click, hover | Comma separated list of dropdown trigger behaviour modes: hover, click | | delay-show | Number | 0 | Delay time in milliseconds before a dropdown is displayed in hover mode. | | delay-hide | Number | 800 | Delay time in milliseconds before a dropdown is hidden in hover mode. | | boundary | String | window | CSS selector of the element to maintain the drop’s visibility. | | boundary-align | Boolean | false | Align the dropdown to its boundary. | | flip | Boolean, String | true | Automatically flip the drop. Possible values are false, true, x or y. | | offset | Number | 0 | The offset of the dropdown’s container. | | animation | String | false | Space separated names of animations to apply. | | duration | Number | 200 | Animation duration in milliseconds. | | ***

JavaScript

Learn more about JavaScript components.

Initialization

UIkit.dropdown(element, options);

Events

The following events will be triggered on elements with this component attached:

Name Description
toggle Fires before an item is toggled.
beforeshow Fires before an item is shown. Can prevent showing by calling preventDefault() on the event.
show Fires after an item is shown.
shown Fires after the item’s show animation has completed.
beforehide Fires before an item is hidden. Can prevent hiding by calling preventDefault() on the event.
hide Fires before an item is hidden.
hidden Fires after an item is hidden.
stack Fires when the drop-stackclass is applied.

Methods

The following methods are available for the component:

Show

UIkit.dropdown(element).show();

Shows the Dropdown.

Hide

UIkit.dropdown(element).hide(delay);

Hides the Dropdown.

Name Type Default Description
delay Boolean true Delay hiding the Dropdown.