uikit 3.14.3 → 3.14.4-dev.07daf8fb8

package/tests/offcanvas.html

@@ -140,12 +140,12 @@
             <div id="offcanvas-slide" uk-offcanvas>
                 <div class="uk-offcanvas-bar uk-flex uk-flex-column uk-text-center">
 
-                    <button class="uk-offcanvas-close uk-close-large" type="button" uk-close></button>
+                    <button class="uk-offcanvas-close uk-close-large" type="button" uk-close uk-toggle="cls: uk-close-large; mode: media; media: @s"></button>
 
-                    <ul class="uk-nav uk-nav-primary uk-nav-center uk-margin-auto-vertical uk-nav-parent-icon" uk-nav>
+                    <ul class="uk-nav uk-nav-primary uk-nav-center uk-margin-auto-vertical" uk-nav>
                         <li class="uk-active"><a href="#">Active</a></li>
                         <li class="uk-parent">
-                            <a href="#">Parent</a>
+                            <a href="#">Parent <span uk-nav-parent-icon></span></a>
                             <ul class="uk-nav-sub">
                                 <li><a href="#">Sub item</a></li>
                                 <li><a href="#">Sub item</a></li>
@@ -187,12 +187,12 @@
             <div id="offcanvas-reveal" uk-offcanvas="mode: reveal">
                 <div class="uk-offcanvas-bar uk-flex uk-flex-column uk-text-center">
 
-                    <button class="uk-offcanvas-close uk-close-large" type="button" uk-close></button>
+                    <button class="uk-offcanvas-close uk-close-large" type="button" uk-close uk-toggle="cls: uk-close-large; mode: media; media: @s"></button>
 
-                    <ul class="uk-nav uk-nav-primary uk-nav-center uk-margin-auto-vertical uk-nav-parent-icon" uk-nav>
+                    <ul class="uk-nav uk-nav-primary uk-nav-center uk-margin-auto-vertical" uk-nav>
                         <li class="uk-active"><a href="#">Active</a></li>
                         <li class="uk-parent">
-                            <a href="#">Parent</a>
+                            <a href="#">Parent <span uk-nav-parent-icon></span></a>
                             <ul class="uk-nav-sub">
                                 <li><a href="#">Sub item</a></li>
                                 <li><a href="#">Sub item</a></li>
@@ -234,12 +234,12 @@
             <div id="offcanvas-push" uk-offcanvas="mode: push">
                 <div class="uk-offcanvas-bar uk-flex uk-flex-column uk-text-center">
 
-                    <button class="uk-offcanvas-close uk-close-large" type="button" uk-close></button>
+                    <button class="uk-offcanvas-close uk-close-large" type="button" uk-close uk-toggle="cls: uk-close-large; mode: media; media: @s"></button>
 
-                    <ul class="uk-nav uk-nav-primary uk-nav-center uk-margin-auto-vertical uk-nav-parent-icon" uk-nav>
+                    <ul class="uk-nav uk-nav-primary uk-nav-center uk-margin-auto-vertical" uk-nav>
                         <li class="uk-active"><a href="#">Active</a></li>
                         <li class="uk-parent">
-                            <a href="#">Parent</a>
+                            <a href="#">Parent <span uk-nav-parent-icon></span></a>
                             <ul class="uk-nav-sub">
                                 <li><a href="#">Sub item</a></li>
                                 <li><a href="#">Sub item</a></li>
@@ -281,12 +281,12 @@
             <div id="offcanvas-none" uk-offcanvas="mode: none">
                 <div class="uk-offcanvas-bar uk-flex uk-flex-column uk-text-center">
 
-                    <button class="uk-offcanvas-close uk-close-large" type="button" uk-close></button>
+                    <button class="uk-offcanvas-close uk-close-large" type="button" uk-close uk-toggle="cls: uk-close-large; mode: media; media: @s"></button>
 
-                    <ul class="uk-nav uk-nav-primary uk-nav-center uk-margin-auto-vertical uk-nav-parent-icon" uk-nav>
+                    <ul class="uk-nav uk-nav-primary uk-nav-center uk-margin-auto-vertical" uk-nav>
                         <li class="uk-active"><a href="#">Active</a></li>
                         <li class="uk-parent">
-                            <a href="#">Parent</a>
+                            <a href="#">Parent <span uk-nav-parent-icon></span></a>
                             <ul class="uk-nav-sub">
                                 <li><a href="#">Sub item</a></li>
                                 <li><a href="#">Sub item</a></li>
@@ -328,12 +328,12 @@
             <div id="offcanvas-flip-slide" uk-offcanvas="flip: true">
                 <div class="uk-offcanvas-bar uk-flex uk-flex-column uk-text-center">
 
-                    <button class="uk-offcanvas-close uk-close-large" type="button" uk-close></button>
+                    <button class="uk-offcanvas-close uk-close-large" type="button" uk-close uk-toggle="cls: uk-close-large; mode: media; media: @s"></button>
 
-                    <ul class="uk-nav uk-nav-primary uk-nav-center uk-margin-auto-vertical uk-nav-parent-icon" uk-nav>
+                    <ul class="uk-nav uk-nav-primary uk-nav-center uk-margin-auto-vertical" uk-nav>
                         <li class="uk-active"><a href="#">Active</a></li>
                         <li class="uk-parent">
-                            <a href="#">Parent</a>
+                            <a href="#">Parent <span uk-nav-parent-icon></span></a>
                             <ul class="uk-nav-sub">
                                 <li><a href="#">Sub item</a></li>
                                 <li><a href="#">Sub item</a></li>
@@ -375,12 +375,12 @@
             <div id="offcanvas-flip-reveal" uk-offcanvas="mode: reveal; flip: true">
                 <div class="uk-offcanvas-bar uk-flex uk-flex-column uk-text-center">
 
-                    <button class="uk-offcanvas-close uk-close-large" type="button" uk-close></button>
+                    <button class="uk-offcanvas-close uk-close-large" type="button" uk-close uk-toggle="cls: uk-close-large; mode: media; media: @s"></button>
 
-                    <ul class="uk-nav uk-nav-primary uk-nav-center uk-margin-auto-vertical uk-nav-parent-icon" uk-nav>
+                    <ul class="uk-nav uk-nav-primary uk-nav-center uk-margin-auto-vertical" uk-nav>
                         <li class="uk-active"><a href="#">Active</a></li>
                         <li class="uk-parent">
-                            <a href="#">Parent</a>
+                            <a href="#">Parent <span uk-nav-parent-icon></span></a>
                             <ul class="uk-nav-sub">
                                 <li><a href="#">Sub item</a></li>
                                 <li><a href="#">Sub item</a></li>
@@ -422,12 +422,12 @@
             <div id="offcanvas-flip-push" uk-offcanvas="mode: push; flip: true">
                 <div class="uk-offcanvas-bar uk-flex uk-flex-column uk-text-center">
 
-                    <button class="uk-offcanvas-close uk-close-large" type="button" uk-close></button>
+                    <button class="uk-offcanvas-close uk-close-large" type="button" uk-close uk-toggle="cls: uk-close-large; mode: media; media: @s"></button>
 
-                    <ul class="uk-nav uk-nav-primary uk-nav-center uk-margin-auto-vertical uk-nav-parent-icon" uk-nav>
+                    <ul class="uk-nav uk-nav-primary uk-nav-center uk-margin-auto-vertical" uk-nav>
                         <li class="uk-active"><a href="#">Active</a></li>
                         <li class="uk-parent">
-                            <a href="#">Parent</a>
+                            <a href="#">Parent <span uk-nav-parent-icon></span></a>
                             <ul class="uk-nav-sub">
                                 <li><a href="#">Sub item</a></li>
                                 <li><a href="#">Sub item</a></li>
@@ -469,12 +469,12 @@
             <div id="offcanvas-flip-none" uk-offcanvas="mode: none; flip: true">
                 <div class="uk-offcanvas-bar uk-flex uk-flex-column uk-text-center">
 
-                    <button class="uk-offcanvas-close uk-close-large" type="button" uk-close></button>
+                    <button class="uk-offcanvas-close uk-close-large" type="button" uk-close uk-toggle="cls: uk-close-large; mode: media; media: @s"></button>
 
-                    <ul class="uk-nav uk-nav-primary uk-nav-center uk-margin-auto-vertical uk-nav-parent-icon" uk-nav>
+                    <ul class="uk-nav uk-nav-primary uk-nav-center uk-margin-auto-vertical" uk-nav>
                         <li class="uk-active"><a href="#">Active</a></li>
                         <li class="uk-parent">
-                            <a href="#">Parent</a>
+                            <a href="#">Parent <span uk-nav-parent-icon></span></a>
                             <ul class="uk-nav-sub">
                                 <li><a href="#">Sub item</a></li>
                                 <li><a href="#">Sub item</a></li>
@@ -769,13 +769,9 @@
 
         <script>
 
-            var util = UIkit.util;
-
-            util.on(util.$('#js-toggle'), 'click', function (e) {
-
+            UIkit.util.on('#js-toggle', 'click', e => {
                 e.preventDefault();
                 UIkit.offcanvas('#js-offcanvas-toggle').toggle();
-
             });
 
         </script>

package/tests/parallax.html

@@ -190,7 +190,7 @@
 
                 <h2>Animated properties</h2>
 
-                <p>You can define multiple animation stops by using a comma separated list of values. (e.g. x: 0,50,150). A stop can be defined by a value and a position. If you don't specify the position of a stop, it is placed halfway between the one that precedes it and the one that follows it.</p>
+                <p>You can define multiple animation stops by using a comma-separated list of values. (e.g. x: 0,50,150). A stop can be defined by a value and a position. If you don't specify the position of a stop, it is placed halfway between the one that precedes it and the one that follows it.</p>
 
                 <div class="uk-overflow-auto">
                     <table class="uk-table uk-table-striped">

package/tests/position.html

@@ -9,7 +9,7 @@
         <style>
 
             /* JavaScript */
-            #js-viewport {
+            #js-boundary {
                 height: 300px;
                 outline: 1px solid rgba(0,0,0,0.1);
                 position: relative;
@@ -237,7 +237,7 @@
 
             <h2>JavaScript</h2>
 
-            <div id="js-viewport" class="uk-margin">
+            <div id="js-boundary" class="uk-margin">
                 <div id="js-target" class="uk-flex uk-flex-center uk-flex-middle" draggable="true">Drag me!</div>
             </div>
 
@@ -302,21 +302,9 @@
                     </div>
 
                     <div class="uk-margin">
-                        <span class="uk-form-label">Flip</span>
-                        <label>
-                            Horizontal
-                            <select id="js-flip_x" class="uk-select uk-form-small uk-form-width-xsmall">
-                                <option value="x">flip</option>
-                                <option value="">none</option>
-                            </select>
-                        </label>
-                        <label>
-                            Vertical
-                            <select id="js-flip_y" class="uk-select uk-form-small uk-form-width-xsmall">
-                                <option value="y">flip</option>
-                                <option value="">none</option>
-                            </select>
-                        </label>
+                        <span class="uk-form-label">Placement</span>
+                        <label><input id="js-flip" class="uk-checkbox" type="checkbox" checked> Flip</label>
+                        <label><input id="js-shift" class="uk-checkbox" type="checkbox" checked> Shift</label>
                     </div>
 
                 </div>
@@ -327,7 +315,7 @@
         <script>
 
             const {$, $$, css, getEventPos, on, offset, positionAt} = UIkit.util;
-            let viewport = $('#js-viewport');
+            let boundary = $('#js-boundary');
             let element = $('#js-element');
             let target = $('#js-target');
             let offsetX;
@@ -338,18 +326,19 @@
                     element,
                     target,
                     {
-                        viewport,
+                        boundary,
                         attach:{
                             element: [$('#js-element_x').value, $('#js-element_y').value],
                             target: [$('#js-target_x').value, $('#js-target_y').value]
                         },
                         offset: [$('#js-offset_x').value, $('#js-offset_y').value],
-                        flip: [$('#js-flip_x').value, $('#js-flip_y').value]
+                        flip: $('#js-flip').checked,
+                        shift: $('#js-shift').checked
                     }
                 );
             }
 
-            on(window, 'dragstart', function (e) {
+            on(window, 'dragstart', e => {
                 e.dataTransfer.setDragImage(new Image(), 0, 0);
 
                 offsetX = Math.round(e.pageX - offset(target).left);
@@ -358,7 +347,7 @@
             });
 
             let lastPos;
-            on(window, 'dragover', function (e) {
+            on(window, 'dragover', e => {
 
                 const pos = getEventPos(e);
 
@@ -372,9 +361,9 @@
                 // positions target at mouse cursor
                 positionAt(
                     target,
-                    viewport,
+                    boundary,
                     {
-                        offset: [e.pageX - offset(viewport).left - offsetX, e.pageY - offset(viewport).top - offsetY]
+                        offset: [e.pageX - offset(boundary).left - offsetX, e.pageY - offset(boundary).top - offsetY]
                     }
                 );
 

package/tests/progress.html

@@ -36,20 +36,20 @@
         </div>
 
         <script>
+            const {ready, $} = UIkit.util;
 
+            ready(() => {
 
-            UIkit.util.ready(function () {
+                const bar = $('#js-progressbar');
+                const animate = setInterval(() => {
 
-                var bar = document.getElementById('js-progressbar'),
-                    animate = setInterval(function () {
+                    bar.value += 10;
 
-                        bar.value += 10;
+                    if (bar.value >= bar.max) {
+                        clearInterval(animate);
+                    }
 
-                        if (bar.value >= bar.max) {
-                            clearInterval(animate);
-                        }
-
-                    }, 1000);
+                }, 1000);
 
             });
 

package/tests/scroll.html

@@ -7,13 +7,10 @@
         <title>Scroll - UIkit tests</title>
         <script src="js/test.js"></script>
         <script>
-
-            UIkit.util.on(document, 'change', '#offset', function (e) {
-                UIkit.util.$$('[uk-scroll]').forEach(function (el) {
-                    el.setAttribute('data-offset', e.target.value);
-                })
-            })
-
+            const {$$, attr, on} = UIkit.util;
+            on(document, 'change', '#offset', e =>
+                attr($$('[uk-scroll]'), 'data-offset', e.target.value)
+            )
         </script>
     </head>
 
@@ -87,9 +84,9 @@
 
             <script>
 
-                UIkit.util.on('#js-top-callback', 'scrolled', function () {
-                    alert('Done.');
-                });
+                UIkit.util.on('#js-top-callback', 'scrolled', () =>
+                    alert('Done.')
+                );
 
             </script>
 

package/tests/search.html

@@ -235,7 +235,7 @@
 
                     <div>
                         <a class="uk-navbar-toggle" href="#" uk-search-icon></a>
-                        <div class="uk-navbar-dropdown" uk-drop="mode: click; cls-drop: uk-navbar-dropdown; boundary: !nav">
+                        <div class="uk-navbar-dropdown" uk-drop="mode: click; cls-drop: uk-navbar-dropdown; boundary: !.uk-navbar; flip: false">
 
                             <div class="uk-grid-small uk-flex-middle" uk-grid>
                                 <div class="uk-width-expand">
@@ -257,7 +257,7 @@
             <nav class="uk-navbar-container uk-margin" uk-navbar>
                 <div class="uk-navbar-left">
 
-                    <a class="uk-navbar-item uk-logo" href="#">Justify</a>
+                    <a class="uk-navbar-item uk-logo" href="#">Stretch</a>
 
                     <ul class="uk-navbar-nav">
                         <li class="uk-active"><a href="#">Active</a></li>
@@ -275,7 +275,7 @@
 
                     <div>
                         <a class="uk-navbar-toggle" href="#" uk-search-icon></a>
-                        <div class="uk-navbar-dropdown" uk-drop="mode: click; cls-drop: uk-navbar-dropdown; boundary: !nav; boundary-align: true; pos: bottom-justify; flip: x">
+                        <div class="uk-navbar-dropdown" uk-drop="mode: click; cls-drop: uk-navbar-dropdown; boundary: !.uk-navbar; stretch: x; flip: false">
 
                             <div class="uk-grid-small uk-flex-middle" uk-grid>
                                 <div class="uk-width-expand">
@@ -315,7 +315,7 @@
 
                     <div>
                         <a class="uk-navbar-toggle" href="#" uk-search-icon></a>
-                        <div class="uk-navbar-dropdown" uk-drop="mode: click; cls-drop: uk-navbar-dropdown; boundary: !nav; boundary-align: true; pos: bottom-justify; flip: x">
+                        <div class="uk-dropbar uk-dropbar-top" uk-drop="mode: click; cls-drop: uk-dropbar; boundary: !.uk-navbar; stretch: x; flip: false">
 
                             <div class="uk-grid-small uk-flex-middle" uk-grid>
                                 <div class="uk-width-expand">
@@ -324,7 +324,7 @@
                                     </form>
                                 </div>
                                 <div class="uk-width-auto">
-                                    <a class="uk-navbar-dropdown-close" href="#" uk-close></a>
+                                    <a class="uk-dropbar-close" href="#" uk-close></a>
                                 </div>
                             </div>
 

package/tests/slider.html

@@ -545,11 +545,12 @@
 
         <script>
 
-            ['finite', 'center', 'sets'].forEach(function(attr) {
-                UIkit.util.on('#js-'+attr+'-switcher', 'change', function () {
-                    UIkit.util.attr(UIkit.util.$$('[uk-slider]'), attr, this.value);
-                });
-            });
+            const {attr, $$, on} = UIkit.util;
+            for (const attribute of ['finite', 'center', 'sets']) {
+                on(`#js-${attribute}-switcher`, 'change', e =>
+                    attr($$('[uk-slider]'), attribute, e.target.value)
+                );
+            }
 
         </script>
 

package/tests/slideshow.html

@@ -442,14 +442,14 @@
         </div>
 
         <script>
-
-            UIkit.util.on('#js-animation-switcher', 'change', function () {
-                UIkit.util.attr(UIkit.util.$$('.js-slideshow-animation'), 'animation', this.value);
-            });
-
-            UIkit.util.on('#js-finite-switcher', 'change', function () {
-                UIkit.util.attr(UIkit.util.$$('[uk-slideshow]'), 'finite', this.value);
-            });
+            const {attr, $$, on} = UIkit.util;
+            on('#js-animation-switcher', 'change', e =>
+                attr($$('.js-slideshow-animation'), 'animation', e.target.value)
+            );
+
+            on('#js-finite-switcher', 'change', e =>
+                attr($$('[uk-slideshow]'), 'finite', e.target.value)
+            );
 
         </script>
 

package/tests/sortable.html

@@ -16,15 +16,13 @@
         </style>
         <script>
 
-            var util = UIkit.util;
+            const {on, ready} = UIkit.util;
 
-            util.ready(function () {
-
-                util.on(document.body, 'start moved added removed stop', function (e, sortable, el) {
-                    console.log(e.type, sortable, el);
-                });
-
-            });
+            ready(() =>
+                on(document.body, 'start moved added removed stop', (e, sortable, el) =>
+                    console.log(e.type, sortable, el)
+                )
+            );
 
         </script>
     </head>

package/tests/sticky-navbar.html

@@ -71,6 +71,28 @@
                                 </ul>
 
                             </div>
+                            <div class="uk-navbar-right">
+
+                                <a class="uk-navbar-toggle" uk-navbar-toggle-icon href="#"></a>
+                                <div class="uk-navbar-dropdown" uk-drop="mode: click; cls-drop: uk-navbar-dropdown; boundary: !.uk-navbar; stretch: x; flip: false">
+                                    <ul class="uk-nav uk-navbar-dropdown-nav">
+                                        <li class="uk-active"><a href="#">Active</a></li>
+                                        <li class="uk-parent">
+                                            <a href="#">Parent</a>
+                                            <ul class="uk-nav-sub">
+                                                <li><a href="#">Sub item</a></li>
+                                                <li><a href="#">Sub item</a></li>
+                                            </ul>
+                                        </li>
+                                        <li class="uk-nav-header">Header</li>
+                                        <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
+                                        <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
+                                        <li class="uk-nav-divider"></li>
+                                        <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
+                                    </ul>
+                                </div>
+        
+                            </div>
                         </div>
                     </div>
                 </nav>
@@ -150,6 +172,28 @@
                                 </ul>
 
                             </div>
+                            <div class="uk-navbar-right">
+
+                                <a class="uk-navbar-toggle" uk-navbar-toggle-icon href="#"></a>
+                                <div class="uk-navbar-dropdown" uk-drop="mode: click; cls-drop: uk-navbar-dropdown; boundary: !.uk-navbar; stretch: x; flip: false">
+                                    <ul class="uk-nav uk-navbar-dropdown-nav">
+                                        <li class="uk-active"><a href="#">Active</a></li>
+                                        <li class="uk-parent">
+                                            <a href="#">Parent</a>
+                                            <ul class="uk-nav-sub">
+                                                <li><a href="#">Sub item</a></li>
+                                                <li><a href="#">Sub item</a></li>
+                                            </ul>
+                                        </li>
+                                        <li class="uk-nav-header">Header</li>
+                                        <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
+                                        <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
+                                        <li class="uk-nav-divider"></li>
+                                        <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
+                                    </ul>
+                                </div>
+        
+                            </div>
                         </div>
                     </div>
                 </nav>
@@ -229,6 +273,28 @@
                                 </ul>
 
                             </div>
+                            <div class="uk-navbar-right">
+
+                                <a class="uk-navbar-toggle" uk-navbar-toggle-icon href="#"></a>
+                                <div class="uk-navbar-dropdown" uk-drop="mode: click; cls-drop: uk-navbar-dropdown; boundary: !.uk-navbar; stretch: x; flip: false">
+                                    <ul class="uk-nav uk-navbar-dropdown-nav">
+                                        <li class="uk-active"><a href="#">Active</a></li>
+                                        <li class="uk-parent">
+                                            <a href="#">Parent</a>
+                                            <ul class="uk-nav-sub">
+                                                <li><a href="#">Sub item</a></li>
+                                                <li><a href="#">Sub item</a></li>
+                                            </ul>
+                                        </li>
+                                        <li class="uk-nav-header">Header</li>
+                                        <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
+                                        <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
+                                        <li class="uk-nav-divider"></li>
+                                        <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
+                                    </ul>
+                                </div>
+        
+                            </div>
                         </div>
                     </div>
                 </nav>
@@ -308,6 +374,28 @@
                                 </ul>
 
                             </div>
+                            <div class="uk-navbar-right">
+
+                                <a class="uk-navbar-toggle" uk-navbar-toggle-icon href="#"></a>
+                                <div class="uk-navbar-dropdown" uk-drop="mode: click; cls-drop: uk-navbar-dropdown; boundary: !.uk-navbar; stretch: x; flip: false">
+                                    <ul class="uk-nav uk-navbar-dropdown-nav">
+                                        <li class="uk-active"><a href="#">Active</a></li>
+                                        <li class="uk-parent">
+                                            <a href="#">Parent</a>
+                                            <ul class="uk-nav-sub">
+                                                <li><a href="#">Sub item</a></li>
+                                                <li><a href="#">Sub item</a></li>
+                                            </ul>
+                                        </li>
+                                        <li class="uk-nav-header">Header</li>
+                                        <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
+                                        <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
+                                        <li class="uk-nav-divider"></li>
+                                        <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
+                                    </ul>
+                                </div>
+        
+                            </div>
                         </div>
                     </div>
                 </nav>
@@ -389,6 +477,28 @@
                                     </ul>
 
                                 </div>
+                                <div class="uk-navbar-right">
+
+                                    <a class="uk-navbar-toggle" uk-navbar-toggle-icon href="#"></a>
+                                    <div class="uk-navbar-dropdown" uk-drop="mode: click; cls-drop: uk-navbar-dropdown; boundary: !.uk-navbar; stretch: x; flip: false">
+                                        <ul class="uk-nav uk-navbar-dropdown-nav">
+                                            <li class="uk-active"><a href="#">Active</a></li>
+                                            <li class="uk-parent">
+                                                <a href="#">Parent</a>
+                                                <ul class="uk-nav-sub">
+                                                    <li><a href="#">Sub item</a></li>
+                                                    <li><a href="#">Sub item</a></li>
+                                                </ul>
+                                            </li>
+                                            <li class="uk-nav-header">Header</li>
+                                            <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
+                                            <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
+                                            <li class="uk-nav-divider"></li>
+                                            <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
+                                        </ul>
+                                    </div>
+            
+                                </div>
                             </div>
                         </div>
                     </nav>
@@ -472,6 +582,28 @@
                                     </ul>
 
                                 </div>
+                                <div class="uk-navbar-right">
+
+                                    <a class="uk-navbar-toggle" uk-navbar-toggle-icon href="#"></a>
+                                    <div class="uk-navbar-dropdown" uk-drop="mode: click; cls-drop: uk-navbar-dropdown; boundary: !.uk-navbar; stretch: x; flip: false">
+                                        <ul class="uk-nav uk-navbar-dropdown-nav">
+                                            <li class="uk-active"><a href="#">Active</a></li>
+                                            <li class="uk-parent">
+                                                <a href="#">Parent</a>
+                                                <ul class="uk-nav-sub">
+                                                    <li><a href="#">Sub item</a></li>
+                                                    <li><a href="#">Sub item</a></li>
+                                                </ul>
+                                            </li>
+                                            <li class="uk-nav-header">Header</li>
+                                            <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
+                                            <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
+                                            <li class="uk-nav-divider"></li>
+                                            <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
+                                        </ul>
+                                    </div>
+            
+                                </div>
                             </div>
                         </div>
                     </nav>

package/tests/sticky.html

@@ -407,14 +407,14 @@
 
         <script>
 
-            var options = UIkit.util.$$('#js-height-switcher option').map(function (option) { return option.value; });
-
-            UIkit.util.on('#js-height-switcher', 'change', function () {
-                var value = this.value;
-                UIkit.util.$$('.js-overflow-flip').forEach(function (table) {
-                    UIkit.util.removeClass(table, options);
-                    UIkit.util.addClass(table, value);
-                });
+            const {$$, addClass, on, removeClass } = UIkit.util;
+
+            on('#js-height-switcher', 'change', (e) => {
+                const options = $$('option', e.target).map(({value}) => value);
+                for (const el of $$('.js-overflow-flip')) {
+                    removeClass(el, options);
+                    addClass(el, e.target.value);
+                }
             });
 
         </script>

package/tests/switcher.html

@@ -358,7 +358,7 @@
                             <td><code>animation</code></td>
                             <td>String</td>
                             <td>false</td>
-                            <td>The space separated names of animations to use. (Comma separate for animation out)</td>
+                            <td>Space-separated names of animations. Comma-separated for animation out.</td>
                         </tr>
                         <tr>
                             <td><code>duration</code></td>