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.
mode hover | click click,hover Comma-separated list of dropdown 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.
boundary Boolean, CSS selector true Referenced element to keep Drop's visibility. By default, it's the navbar component's element.
target Boolean, CSS selector false The element the drops are positioned to (`true` for window).
target-x Boolean, CSS selector false The element's X axis the drops are positioned to (`true` for window).
target-y Boolean, CSS selector false The element's Y axis the drop are positioned to (`true` for window).
cls-drop String 'uk-navbar-dropdown' The Drop container class.
offset Number 0 The offset of the Drop container.
dropbar Boolean | CSS selector false The dropbar selector. If true the dropbar will be inserted automatically.
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.

Mouse Tracker