Navbar

Transparent

Click

Dropdown

Parent Icon

Dropdown Stretch

Dropbar

First example using dropbar: SELECTOR and second example using dropbar: true.

Icons and Subtitles

Content Items

Logo and Toggle

Primary

Center

Stretch

Layouts

JavaScript Options

Option Value Default Description
align left|right|center left Drop alignment.
boundary Boolean, CSS selector true Referenced element to keep Drop's visibility. By default, it's the navbar component's element.
dropbar Boolean | CSS selector false The dropbar selector. If true the dropbar will be inserted automatically.
dropbar-anchor Boolean | CSS selector false The dropbar anchor selector. If set, dropbar will be inserted after the anchor element.
duration Number 200 The dropbar transition duration.
container Boolean false Define a target container via a selector to specify where the drops should be appended in the DOM.
stretch false|true|'x'|'y' true Stretch drop on both (true) or given axis.
mode hover | click click,hover Comma-separated list of drop trigger behavior modes.
delay-show Number 0 Delay time in hover mode before a drop is shown in ms.
delay-hide Number 800 Delay time in hover mode before a drop is hidden in ms.
target Boolean, CSS selector false The element the drop is positioned to (`true` for window).
target-x Boolean, CSS selector false The element's X axis the drop is positioned to (`true` for window).
target-y Boolean, CSS selector false The element's Y axis the drop is positioned to (`true` for window).
offset Number 0 The drop offset.
animation String 'uk-animation-fade' Space-separated names of animations. Comma-separated for animation out.
animate-out Boolean false Use animation when closing the drop.

Mouse Tracker