UIkit 3.x Documentation (as of v3.15.0)

Dropbar

Create a toggleable, full-width section called dropbar.

The dropbar provide a section-like style for the Drop component. In opposite to the dropdown which is positioned anywhere on a page with space around, the dropbar extends to the full width or height of the viewport so it perfectly fits three edges without spacing.

# Usage

To apply this component, add the .uk-dropbar class and add a modifier class for the direction from which the dropbar appears, for example .uk-dropbar-top.

<div class="uk-dropbar uk-dropbar-top"></div>

Additionally, add the uk-drop attribute to the dropbar and a toggle element before. Any content, like a button, can toggle the drop component. Since the dropbar visually requires to extend to the full width or height of the viewport, add the stretch: true option to the uk-drop attribute. To only stretch to one axis, use stretch: x or stretch: y. For all the animation details take a look at the Drop component.

<button type="button"></button>
<div class="uk-dropbar uk-dropbar-top" uk-drop="stretch: x"></div>

<div class="uk-overflow-auto uk-height-medium">
    <div class="uk-inline">
        <button class="uk-button uk-button-default" type="button">Hover</button>
        <div class="uk-dropbar uk-dropbar-top" uk-drop="stretch: x">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
    </div>
</div>

The dropbar is typically used together with the Navbar component.

<div class="uk-overflow-auto uk-height-medium">
    <nav class="uk-navbar-container" uk-navbar>
        <div class="uk-navbar-left">

            <ul class="uk-navbar-nav">
                <li>
                    <a href="#">Hover</a>
                    <div class="uk-dropbar uk-dropbar-top" uk-drop="stretch: x">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
                </li>
                <li>
                    <a href="#">Click</a>
                    <div class="uk-dropbar uk-dropbar-top" uk-drop="stretch: x; mode: click">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
                </li>
            </ul>

        </div>
    </nav>
</div>

# Direction

To set the appropriate dropbar style, add one of the following direction modifier classes.

Direction Description
uk-dropbar-top Open the dropbar from the top.
uk-dropbar-bottom Open the dropbar from the bottom.
uk-dropbar-left Open the dropbar from the left.
uk-dropbar-right Open the dropbar from the right.

To open the dropbar from a specific direction use the pos and stretch option from the Drop component.

Position Description
pos: top-left; stretch: x Positions the dropbar above the toggle and stretches it horizontally.
pos: bottom-left; stretch: x Positions the dropbar below the toggle and stretches it horizontally
pos: left-top; stretch: y Positions the dropbar to the left of the toggle and stretches it vertically
pos: right-top; stretch: y Positions the dropbar to the right of the toggle and stretches it vertically
<div class="uk-dropbar uk-dropbar-left" uk-drop="pos: left-top; stretch: y"></div>

<div class="uk-overflow-auto uk-height-medium">
    <nav class="uk-navbar-container" uk-navbar>
        <div class="uk-navbar-left">

            <ul class="uk-navbar-nav">
                <li>
                    <a href="#">Top</a>
                    <div class="uk-dropbar uk-dropbar-top" uk-drop="stretch: x; target: !.uk-navbar-container">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
                </li>
                <li>
                    <a href="#">Left</a>
                    <div class="uk-dropbar uk-dropbar-left" uk-drop="stretch: y; target: !.uk-navbar-container">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</div>
                </li>
                <li>
                    <a href="#">Right</a>
                    <div class="uk-dropbar uk-dropbar-right" uk-drop="pos: bottom-right; stretch: y; target: !.uk-navbar-container">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</div>
                </li>
            </ul>

        </div>
    </nav>
</div>

# Animation

To animate the dropbar use the slide-* or reveal-* animations from the Drop component. slide-* animations slide the dropbar and its content from a selected direction, while in the reveal-* animations, the content of the dropbar stays static and is revealed from a selected direction. Set animate-out: true to also show an animation when closing the dropbar.

Animation Description
slide-top Slides the dropbar from the top.
slide-bottom Slides the dropbar from the bottom.
slide-left Slides the dropbar from the left.
slide-right Slides the dropbar from the right.
reveal-top Reveals the dropbar from the top.
reveal-bottom Reveals the dropbar from the bottom.
reveal-left Reveals the dropbar from the left.
reveal-right Reveals the dropbar from the right.
<div uk-drop="animation: slide-top; animate-out: true"></div>

<div class="uk-overflow-auto uk-height-medium">
    <nav class="uk-navbar-container" uk-navbar>
        <div class="uk-navbar-left">

            <ul class="uk-navbar-nav">
                <li>
                    <a href="#">Slide Top</a>
                    <div class="uk-dropbar uk-dropbar-top" uk-drop="stretch: x; target: !.uk-navbar-container; animation: slide-top; animate-out: true; duration: 700">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
                </li>
                <li>
                    <a href="#">Reveal Top</a>
                    <div class="uk-dropbar uk-dropbar-top" uk-drop="stretch: x; target: !.uk-navbar-container; animation: reveal-top; animate-out: true; duration: 700">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div>
                </li>
                <li>
                    <a href="#">Slide Left</a>
                    <div class="uk-dropbar uk-dropbar-left" uk-drop="stretch: y; target: !.uk-navbar-container; animation: slide-left; animate-out: true; duration: 700">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</div>
                </li>
                <li>
                    <a href="#">Reveal Left</a>
                    <div class="uk-dropbar uk-dropbar-left" uk-drop="stretch: y; target: !.uk-navbar-container; animation: reveal-left; animate-out: true; duration: 700">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</div>
                </li>
                <li>
                    <a href="#">Slide Right</a>
                    <div class="uk-dropbar uk-dropbar-right" uk-drop="pos: bottom-right; stretch: y;  target: !.uk-navbar-container; animation: slide-right; animate-out: true; duration: 700">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</div>
                </li>
                <li>
                    <a href="#">Reveal Right</a>
                    <div class="uk-dropbar uk-dropbar-right" uk-drop="pos: bottom-right; stretch: y;  target: !.uk-navbar-container; animation: reveal-right; animate-out: true; duration: 700">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</div>
                </li>
            </ul>

        </div>
    </nav>
</div>

A dropbar can contain a nav from the Nav component. Just add the .uk-nav class to a <ul> element and use the same .uk-dropdown-nav modifier from the Dropdown component to have the same nav style.

<button type="button"></button>
<div class="uk-dropbar uk-dropbar-top" uk-drop="stretch: x">
    <ul class="uk-nav uk-dropdown-nav">…</ul>
</div>

<div class="uk-overflow-auto uk-height-large">
    <nav class="uk-navbar-container" uk-navbar>
        <div class="uk-navbar-left">

            <ul class="uk-navbar-nav">
                <li>
                    <a href="#">Hover</a>
                    <div class="uk-dropbar uk-dropbar-top" uk-drop="stretch: x">
                        <ul class="uk-nav uk-navbar-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>
                </li>
            </ul>

        </div>
    </nav>
</div>

# Large modifier

Add the .uk-dropbar-large class for a dropbar with larger vertical padding.

<div class="uk-dropbar uk-dropbar-top uk-dropbar-large" uk-drop="stretch: x"></div>

<div class="uk-overflow-auto uk-height-large">
    <nav class="uk-navbar-container" uk-navbar>
        <div class="uk-navbar-left">

            <ul class="uk-navbar-nav">
                <li>
                    <a href="#">Hover</a>
                    <div class="uk-dropbar uk-dropbar-top uk-dropbar-large" uk-drop="stretch: x">
                        <ul class="uk-nav uk-navbar-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>
                </li>
            </ul>

        </div>
    </nav>
</div>

← Dropdown →