We're sorry, but this feature is not yet available. We are working hard to make it happen as soon as possible. Thank you for your patience and understanding. Please check back later for updates.
The element you clicked is for demonstration purposes only and does not lead to actual content. Everything you see here is a simulation intended to demonstrate how the UI elements might look and behave in a real application.
Create a toggleable, full-width section called dropbar.
The Dropbar component provides 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.
The Dropbar component is aim-aware. This means the dropbar stays open as long as the mouse pointer moves towards the dropbar. An additional delay ensures that the dropbar stays open even if the mouse pointer shortly moves in another direction. A dropbar closes immediately if another dropbar is opened.
This documentation is a work in progress.
Note If you are not using Tailwind
CSS, you can skip this step. On your tailwind.config.js file, add the Dropbar component
within the ui() plugin.
import ui from "franken-ui";
ui({
components: {
dropbar: {
hooks: {},
media: true
}
}
}),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-height-medium uk-overflow-auto">
<div class="uk-inline">
<button class="uk-button uk-button-default" type="button">Hover</button>
<div
class="uk-dropbar uk-drop uk-dropbar-top uk-padding-small"
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-height-medium uk-overflow-auto">
<nav class="uk-navbar-container">
<div class="uk-container">
<div uk-navbar>
<div class="uk-navbar-left">
<ul class="uk-navbar-nav">
<li>
<a
class="uk-navbar-toggle-animate uk-navbar-toggle"
href
uk-navbar-toggle-icon
></a>
<div
class="uk-dropbar uk-drop 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>
</ul>
</div>
</div>
</div>
</nav>
</div>Mind, that there is a dedicated implementation for multiple dropbars in the Navbar component and Dropnav component.
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-height-medium uk-overflow-auto">
<nav class="uk-navbar-container">
<div class="uk-container">
<div uk-navbar>
<div class="uk-navbar-left">
<ul class="uk-navbar-nav">
<li>
<a href>Top</a>
<div
class="uk-dropbar uk-drop 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-drop 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-drop 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>
</div>
</div>
</nav>
</div>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-height-medium uk-overflow-auto">
<nav class="uk-navbar-container">
<div class="uk-container">
<div uk-navbar>
<div class="uk-navbar-left">
<ul class="uk-navbar-nav">
<li>
<a href>Slide Top</a>
<div
class="uk-dropbar uk-drop 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-drop 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-drop 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-drop 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-drop 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-drop 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>
</div>
</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-dropdown-nav uk-nav">
...
</ul>
</div><div class="uk-height-large uk-overflow-auto">
<nav class="uk-navbar-container">
<div class="uk-container">
<div uk-navbar>
<div class="uk-navbar-left">
<ul class="uk-navbar-nav">
<li>
<a href>Hover</a>
<div
class="uk-dropbar uk-drop 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>
</div>
</div>
</nav>
</div>Add the .uk-dropbar-large class for a dropbar with larger vertical padding.
<div
class="uk-dropbar uk-dropbar-large uk-dropbar-top"
uk-drop="stretch: x"
></div><div class="uk-height-large uk-overflow-auto">
<nav class="uk-navbar-container">
<div class="uk-container">
<div uk-navbar>
<div class="uk-navbar-left">
<ul class="uk-navbar-nav">
<li>
<a href>Hover</a>
<div
class="uk-dropbar uk-drop uk-dropbar-large 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>
</div>
</div>
</nav>
</div>Learn more about using hooks.
| Hook Name | Affected Classes |
|---|---|
hook-dropbar | .uk-dropbar |
hook-top | .uk-dropbar-top |
hook-bottom | .uk-dropbar-bottom |
hook-left | .uk-dropbar-left |
hook-right | .uk-dropbar-right |
hook-misc | * |
The Drop component adheres to the Menu Button WAI-ARIA design pattern and automatically sets the appropriate WAI-ARIA roles, states and properties.
button role, the aria-expanded state and the aria-haspopup property.The Drop component can be accessed through keyboard using the following keys.