Navbar

Transparent

Click

Dropdown

Parent Icon

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 String left Drop alignment (left, right, center).
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.
dropbar-transparent-mode Boolean, String false The dropbar transparent mode (behind, remove).
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 Boolean, String true Stretch drop on both (true) or given axis (x,y).
mode String click,hover Comma-separated list of drop trigger behavior modes (hover, click).
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.
bg-scroll Boolean true Allow background scrolling while drop is opened.
close-on-scroll Boolean false Close the drop on scrolling a parent scroll container.

Mouse Tracker