Dropbar

Create a toggleable, full-width section called dropbar.

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>

The dropbar is typically used together with the Navbar component.

Direction

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

DirectionDescription
uk-dropbar-topOpen the dropbar from the top.
uk-dropbar-bottomOpen the dropbar from the bottom.
uk-dropbar-leftOpen the dropbar from the left.
uk-dropbar-rightOpen the dropbar from the right.

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

PositionDescription
pos: top-left; stretch: xPositions the dropbar above the toggle and stretches it horizontally.
pos: bottom-left; stretch: xPositions the dropbar below the toggle and stretches it horizontally
pos: left-top; stretch: yPositions the dropbar to the left of the toggle and stretches it vertically
pos: right-top; stretch: yPositions 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>

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.

AnimationDescription
slide-topSlides the dropbar from the top.
slide-bottomSlides the dropbar from the bottom.
slide-leftSlides the dropbar from the left.
slide-rightSlides the dropbar from the right.
reveal-topReveals the dropbar from the top.
reveal-bottomReveals the dropbar from the bottom.
reveal-leftReveals the dropbar from the left.
reveal-rightReveals the dropbar from the right.
<div uk-drop="animation: slide-top; animate-out: true"></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>

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>