uikit 3.14.4-dev.f2e3be255 → 3.14.4-dev.fef7412a0

package/tests/navbar.html

@@ -80,7 +80,7 @@
                                     <ul class="uk-navbar-nav">
                                         <li class="uk-active"><a href="">Active</a></li>
                                         <li>
-                                            <a href="">Parent</a>
+                                            <a href="">Parent <span uk-navbar-parent-icon></span></a>
                                             <div class="uk-navbar-dropdown">
                                                 <ul class="uk-nav uk-navbar-dropdown-nav">
                                                     <li class="uk-active"><a href="#">Active</a></li>
@@ -121,7 +121,7 @@
                                     <ul class="uk-navbar-nav">
                                         <li class="uk-active"><a href="">Active</a></li>
                                         <li>
-                                            <a href="">Parent</a>
+                                            <a href="">Parent <span uk-navbar-parent-icon></span></a>
                                             <div class="uk-navbar-dropdown">
                                                 <ul class="uk-nav uk-navbar-dropdown-nav">
                                                     <li class="uk-active"><a href="#">Active</a></li>
@@ -194,7 +194,7 @@
 
                     <div class="uk-navbar-dropdown test">
 
-                        <ul class="uk-nav uk-navbar-dropdown-nav">
+                        <ul class="uk-nav uk-nav-secondary">
                             <li class="uk-active"><a href="#"><div>Active<div class="uk-nav-subtitle">Subtitle lorem ipsum dolor sit amet, consectetur adipiscing.</div></div></a></li>
                             <li><a href="#"><div>Item<div class="uk-nav-subtitle">Subtitle lorem ipsum dolor sit amet, consectetur adipiscing.</div></div></a></li>
                             <li><a href="#"><div>Item<div class="uk-nav-subtitle">Subtitle lorem ipsum dolor sit amet, consectetur adipiscing.</div></div></a></li>
@@ -250,12 +250,12 @@
             </div>
         </nav>
 
-        <div class="uk-container">
+        <div class="uk-container uk-margin-medium-top">
 
             <h2>Dropdown</h2>
 
             <div class="uk-margin">
-                <select id="js-size-switcher" class="uk-select uk-form-width-small">
+                <select id="js-dropdown-size-switcher" class="uk-select uk-form-width-small">
                     <option value="">Default</option>
                     <option value="uk-navbar-dropdown-large">Large</option>
                 </select>
@@ -345,8 +345,8 @@
                                 </div>
                             </li>
                             <li>
-                                <a href="#">Justify</a>
-                                <div class="uk-navbar-dropdown" uk-drop="cls-drop: uk-navbar-dropdown; boundary: !.uk-navbar; boundary-align: true; pos: bottom-justify; flip: x">
+                                <a href="#">Stretch</a>
+                                <div class="uk-navbar-dropdown" uk-drop="cls-drop: uk-navbar-dropdown; boundary: !.uk-navbar; stretch: x; flip: false">
                                     <div class="uk-navbar-dropdown-grid uk-child-width-1-3@m" uk-grid>
                                         <div>
                                             <ul class="uk-nav uk-navbar-dropdown-nav">
@@ -387,8 +387,8 @@
                                 </div>
                             </li>
                             <li>
-                                <a href="#">Justify Full</a>
-                                <div class="uk-navbar-dropdown" uk-drop="cls-drop: uk-navbar-dropdown; boundary: !.uk-navbar-container; pos: bottom-justify; flip: x">
+                                <a href="#">Stretch Full</a>
+                                <div class="uk-navbar-dropdown" uk-drop="cls-drop: uk-navbar-dropdown; boundary: !.uk-navbar-container; stretch: x; flip: false">
                                     <div class="uk-navbar-dropdown-grid uk-child-width-1-3@m" uk-grid>
                                         <div>
                                             <ul class="uk-nav uk-navbar-dropdown-nav">
@@ -569,8 +569,8 @@
                                 </div>
                             </li>
                             <li>
-                                <a href="#">Justify</a>
-                                <div class="uk-navbar-dropdown" uk-drop="cls-drop: uk-navbar-dropdown; boundary: !.uk-navbar; boundary-align: true; pos: bottom-justify; flip: x">
+                                <a href="#">Stretch</a>
+                                <div class="uk-navbar-dropdown" uk-drop="cls-drop: uk-navbar-dropdown; boundary: !.uk-navbar; stretch: x; flip: false">
                                     <div class="uk-navbar-dropdown-grid uk-child-width-1-3@m" uk-grid>
                                         <div>
                                             <ul class="uk-nav uk-navbar-dropdown-nav">
@@ -725,8 +725,8 @@
                                 </div>
                             </li>
                             <li>
-                                <a href="#">Justify</a>
-                                <div class="uk-navbar-dropdown" uk-drop="cls-drop: uk-navbar-dropdown; boundary: !.uk-navbar; boundary-align: true; pos: bottom-justify; flip: x">
+                                <a href="#">Stretch</a>
+                                <div class="uk-navbar-dropdown" uk-drop="cls-drop: uk-navbar-dropdown; boundary: !.uk-navbar; stretch: x; flip: false">
                                     <div class="uk-navbar-dropdown-grid uk-child-width-1-3@m" uk-grid>
                                         <div>
                                             <ul class="uk-nav uk-navbar-dropdown-nav">
@@ -799,7 +799,7 @@
             </div>
         </nav>
 
-        <div class="uk-container">
+        <div class="uk-container uk-margin-medium-top">
 
             <h2>Parent Icon</h2>
 
@@ -807,12 +807,12 @@
 
         <nav class="uk-navbar-container uk-margin">
             <div class="uk-container">
-                <div class="uk-navbar-parent-icon" uk-navbar>
+                <div uk-navbar>
                     <div class="uk-navbar-left">
 
                         <ul class="uk-navbar-nav">
-                            <li class="uk-active uk-parent">
-                                <a href="#">Left</a>
+                            <li class="uk-active">
+                                <a href="#">Left <span uk-navbar-parent-icon></span></a>
                                 <div class="uk-navbar-dropdown">
                                     <ul class="uk-nav uk-navbar-dropdown-nav">
                                         <li class="uk-active"><a href="#">Active</a></li>
@@ -831,8 +831,8 @@
                                     </ul>
                                 </div>
                             </li>
-                            <li class="uk-parent">
-                                <a href="#">2 Columns</a>
+                            <li>
+                                <a href="#">2 Columns <span uk-navbar-parent-icon></span></a>
                                 <div class="uk-navbar-dropdown uk-navbar-dropdown-width-2">
                                     <div class="uk-navbar-dropdown-grid uk-child-width-1-2" uk-grid>
                                         <div>
@@ -860,8 +860,8 @@
                                     </div>
                                 </div>
                             </li>
-                            <li class="uk-parent">
-                                <a href="#">3 Columns</a>
+                            <li>
+                                <a href="#">3 Columns <span uk-navbar-parent-icon></span></a>
                                 <div class="uk-navbar-dropdown uk-navbar-dropdown-width-3">
                                     <div class="uk-navbar-dropdown-grid uk-child-width-1-3" uk-grid>
                                         <div>
@@ -886,9 +886,9 @@
                                     </div>
                                 </div>
                             </li>
-                            <li class="uk-parent">
-                                <a href="#">Justify</a>
-                                <div class="uk-navbar-dropdown" uk-drop="cls-drop: uk-navbar-dropdown; boundary: !.uk-navbar; boundary-align: true; pos: bottom-justify; flip: x">
+                            <li>
+                                <a href="#">Justify <span uk-navbar-parent-icon></span></a>
+                                <div class="uk-navbar-dropdown" uk-drop="cls-drop: uk-navbar-dropdown; boundary: !.uk-navbar; stretch: x; flip: false">
                                     <div class="uk-navbar-dropdown-grid uk-child-width-1-3@m" uk-grid>
                                         <div>
                                             <ul class="uk-nav uk-navbar-dropdown-nav">
@@ -928,9 +928,9 @@
                                     </div>
                                 </div>
                             </li>
-                            <li class="uk-parent">
-                                <a href="#">Justify Full</a>
-                                <div class="uk-navbar-dropdown" uk-drop="cls-drop: uk-navbar-dropdown; boundary: !.uk-navbar-container; pos: bottom-justify; flip: x">
+                            <li>
+                                <a href="#">Stretch Full <span uk-navbar-parent-icon></span></a>
+                                <div class="uk-navbar-dropdown" uk-drop="cls-drop: uk-navbar-dropdown; boundary: !.uk-navbar-container; stretch: x; flip: false">
                                     <div class="uk-navbar-dropdown-grid uk-child-width-1-3@m" uk-grid>
                                         <div>
                                             <ul class="uk-nav uk-navbar-dropdown-nav">
@@ -976,8 +976,8 @@
                     <div class="uk-navbar-right">
 
                         <ul class="uk-navbar-nav">
-                            <li class="uk-parent">
-                                <a href="#">1 Column</a>
+                            <li>
+                                <a href="#">1 Column <span uk-navbar-parent-icon></span></a>
                                 <div class="uk-navbar-dropdown">
                                     <ul class="uk-nav uk-navbar-dropdown-nav">
                                         <li class="uk-active"><a href="#">Active</a></li>
@@ -1003,9 +1003,9 @@
             </div>
         </nav>
 
-        <div class="uk-container">
+        <div class="uk-container uk-margin-medium-top">
 
-            <h2>Boundary Align</h2>
+            <h2>Dropdown Stretch</h2>
 
         </div>
 
@@ -1092,8 +1092,8 @@
                                 </div>
                             </li>
                             <li>
-                                <a href="#">Justify</a>
-                                <div class="uk-navbar-dropdown" uk-drop="cls-drop: uk-navbar-dropdown; boundary: !.uk-navbar; boundary-align: true; pos: bottom-justify; flip: x">
+                                <a href="#">Stretch</a>
+                                <div class="uk-navbar-dropdown" uk-drop="cls-drop: uk-navbar-dropdown; boundary: !.uk-navbar; stretch: x; flip: false">
                                     <div class="uk-navbar-dropdown-grid uk-child-width-1-3@m" uk-grid>
                                         <div>
                                             <ul class="uk-nav uk-navbar-dropdown-nav">
@@ -1134,8 +1134,8 @@
                                 </div>
                             </li>
                             <li>
-                                <a href="#">Justify Full</a>
-                                <div class="uk-navbar-dropdown" uk-drop="cls-drop: uk-navbar-dropdown; boundary: !.uk-navbar-container; boundary-align: true; pos: bottom-justify; flip: x">
+                                <a href="#">Stretch Full</a>
+                                <div class="uk-navbar-dropdown" uk-drop="cls-drop: uk-navbar-dropdown; boundary: !.uk-navbar-container; stretch: x; flip: false">
                                     <div class="uk-navbar-dropdown-grid uk-child-width-1-3@m" uk-grid>
                                         <div>
                                             <ul class="uk-nav uk-navbar-dropdown-nav">
@@ -1207,7 +1207,7 @@
                 </div>
             </div>
         </nav>
-    
+
         <nav class="uk-navbar-container uk-margin">
             <div class="uk-container">
                 <div uk-navbar="align: right; boundary-align: true">
@@ -1316,8 +1316,8 @@
                                 </div>
                             </li>
                             <li>
-                                <a href="#">Justify</a>
-                                <div class="uk-navbar-dropdown" uk-drop="cls-drop: uk-navbar-dropdown; boundary: !.uk-navbar; boundary-align: true; pos: bottom-justify; flip: x">
+                                <a href="#">Stretch</a>
+                                <div class="uk-navbar-dropdown" uk-drop="cls-drop: uk-navbar-dropdown; boundary: !.uk-navbar; stretch: x; flip: false">
                                     <div class="uk-navbar-dropdown-grid uk-child-width-1-3@m" uk-grid>
                                         <div>
                                             <ul class="uk-nav uk-navbar-dropdown-nav">
@@ -1472,8 +1472,8 @@
                                 </div>
                             </li>
                             <li>
-                                <a href="#">Justify</a>
-                                <div class="uk-navbar-dropdown" uk-drop="cls-drop: uk-navbar-dropdown; boundary: !.uk-navbar; boundary-align: true; pos: bottom-justify; flip: x">
+                                <a href="#">Stretch</a>
+                                <div class="uk-navbar-dropdown" uk-drop="cls-drop: uk-navbar-dropdown; boundary: !.uk-navbar; stretch: x; flip: false">
                                     <div class="uk-navbar-dropdown-grid uk-child-width-1-3@m" uk-grid>
                                         <div>
                                             <ul class="uk-nav uk-navbar-dropdown-nav">
@@ -1546,17 +1546,24 @@
             </div>
         </nav>
 
-        <div class="uk-container">
+        <div class="uk-container uk-margin-medium-top">
 
             <h2>Dropbar</h2>
 
+            <div class="uk-margin">
+                <select id="js-dropbar-size-switcher" class="uk-select uk-form-width-small">
+                    <option value="">Default</option>
+                    <option value="uk-navbar-dropdown-dropbar-large">Large</option>
+                </select>
+            </div>
+
             <p>First example using <code>dropbar: SELECTOR</code> and second example using <code>dropbar: true</code>.</p>
 
         </div>
 
         <nav class="uk-navbar-container uk-margin-top"><!-- Margin top only because of dropbar follows already in markup -->
             <div class="uk-container">
-                <div uk-navbar="dropbar: !.uk-navbar-container + .uk-navbar-dropbar">
+                <div uk-navbar="target-y: !.uk-navbar-container; dropbar: !.uk-navbar-container + .uk-navbar-dropbar">
                     <div class="uk-navbar-left">
 
                         <ul class="uk-navbar-nav">
@@ -1636,8 +1643,8 @@
                                 </div>
                             </li>
                             <li>
-                                <a href="#">Justify</a>
-                                <div class="uk-navbar-dropdown" uk-drop="cls-drop: uk-navbar-dropdown; boundary: !.uk-navbar; boundary-align: true; pos: bottom-justify; flip: x">
+                                <a href="#">Stretch</a>
+                                <div class="uk-navbar-dropdown" uk-drop="cls-drop: uk-navbar-dropdown; boundary: !.uk-navbar; stretch: x; flip: false; target-y: !.uk-navbar-container">
                                     <div class="uk-navbar-dropdown-grid uk-child-width-1-3@m" uk-grid>
                                         <div>
                                             <ul class="uk-nav uk-navbar-dropdown-nav">
@@ -1678,8 +1685,8 @@
                                 </div>
                             </li>
                             <li>
-                                <a href="#">Justify Full</a>
-                                <div class="uk-navbar-dropdown" uk-drop="cls-drop: uk-navbar-dropdown; boundary: !.uk-navbar-container; pos: bottom-justify; flip: x">
+                                <a href="#">Stretch Full</a>
+                                <div class="uk-navbar-dropdown" uk-drop="cls-drop: uk-navbar-dropdown; boundary: !.uk-navbar-container; stretch: x; flip: false; target-y: !.uk-navbar-container">
                                     <div class="uk-navbar-dropdown-grid uk-child-width-1-3@m" uk-grid>
                                         <div>
                                             <ul class="uk-nav uk-navbar-dropdown-nav">
@@ -1752,11 +1759,11 @@
             </div>
         </nav>
 
-        <div class="uk-navbar-dropbar"></div>
+        <div class="uk-dropbar uk-dropbar-top uk-navbar-dropbar"></div>
 
         <nav class="uk-navbar-container uk-margin">
             <div class="uk-container">
-                <div uk-navbar="dropbar: true; dropbar-anchor: !.uk-navbar-container; align: right">
+                <div uk-navbar="target-y: !.uk-navbar-container; dropbar: true; dropbar-anchor: !.uk-navbar-container; align: right">
                     <div class="uk-navbar-left">
 
                         <ul class="uk-navbar-nav">
@@ -1862,8 +1869,8 @@
                                 </div>
                             </li>
                             <li>
-                                <a href="#">Justify</a>
-                                <div class="uk-navbar-dropdown" uk-drop="cls-drop: uk-navbar-dropdown; boundary: !.uk-navbar; boundary-align: true; pos: bottom-justify; flip: x">
+                                <a href="#">Stretch</a>
+                                <div class="uk-navbar-dropdown" uk-drop="cls-drop: uk-navbar-dropdown; boundary: !.uk-navbar; stretch: x; flip: false; target-y: !.uk-navbar-container">
                                     <div class="uk-navbar-dropdown-grid uk-child-width-1-3@m" uk-grid>
                                         <div>
                                             <ul class="uk-nav uk-navbar-dropdown-nav">
@@ -1910,9 +1917,9 @@
             </div>
         </nav>
 
-        <nav class="uk-navbar-container uk-margin uk-position-relative uk-position-z-index"><!-- Position context only needed for demo showcase -->
+        <nav class="uk-navbar-container uk-margin">
             <div class="uk-container">
-                <div uk-navbar="dropbar: true; dropbar-anchor: !.uk-navbar-container; align: center">
+                <div uk-navbar="target-y: !.uk-navbar-container; dropbar: true; dropbar-anchor: !.uk-navbar-container; align: center">
                     <div class="uk-navbar-left">
 
                         <ul class="uk-navbar-nav">
@@ -2018,8 +2025,8 @@
                                 </div>
                             </li>
                             <li>
-                                <a href="#">Justify</a>
-                                <div class="uk-navbar-dropdown" uk-drop="cls-drop: uk-navbar-dropdown; boundary: !.uk-navbar; boundary-align: true; pos: bottom-justify; flip: x">
+                                <a href="#">Stretch</a>
+                                <div class="uk-navbar-dropdown" uk-drop="cls-drop: uk-navbar-dropdown; boundary: !.uk-navbar; stretch: x; flip: false; target-y: !.uk-navbar-container">
                                     <div class="uk-navbar-dropdown-grid uk-child-width-1-3@m" uk-grid>
                                         <div>
                                             <ul class="uk-nav uk-navbar-dropdown-nav">
@@ -2093,7 +2100,7 @@
         </nav>
 
 
-        <div class="uk-container">
+        <div class="uk-container uk-margin-medium-top">
 
             <h2>Icons and Subtitles</h2>
 
@@ -2138,7 +2145,7 @@
             </div>
         </nav>
 
-        <div class="uk-container">
+        <div class="uk-container uk-margin-medium-top">
 
             <h2>Content Items</h2>
 
@@ -2194,7 +2201,7 @@
             </div>
         </nav>
 
-        <div class="uk-container">
+        <div class="uk-container uk-margin-medium-top">
 
             <h2>Logo and Toggle</h2>
 
@@ -2239,9 +2246,9 @@
                     </div>
                     <div class="uk-navbar-right">
 
-                        <a class="uk-navbar-toggle" href="#" uk-navbar-toggle-icon></a>
-                        <div class="uk-navbar-dropdown" uk-drop="mode: click; cls-drop: uk-navbar-dropdown; boundary: !nav; flip: x">Dropdown</div>
-                        
+                        <a class="uk-navbar-toggle uk-navbar-toggle-animate" href="#" uk-navbar-toggle-icon></a>
+                        <div class="uk-navbar-dropdown" uk-drop="mode: click; cls-drop: uk-navbar-dropdown; boundary: !.uk-navbar; flip: false">Dropdown</div>
+
                     </div>
                 </div>
             </div>
@@ -2286,17 +2293,17 @@
                     </div>
                     <div class="uk-navbar-right">
 
-                        <a class="uk-navbar-toggle" href="#">
+                        <a class="uk-navbar-toggle uk-navbar-toggle-animate" href="#">
                             <span class="uk-margin-small-right">Menu</span> <span uk-navbar-toggle-icon></span>
                         </a>
-                        <div class="uk-navbar-dropdown" uk-drop="mode: click; cls-drop: uk-navbar-dropdown; boundary: !nav; flip: x">Dropdown</div>
-                        
+                        <div class="uk-navbar-dropdown" uk-drop="mode: click; cls-drop: uk-navbar-dropdown; boundary: !.uk-navbar; flip: false">Dropdown</div>
+
                     </div>
                 </div>
             </div>
         </nav>
 
-        <div class="uk-container">
+        <div class="uk-container uk-margin-medium-top">
 
             <h2>Primary</h2>
 
@@ -2341,143 +2348,15 @@
                     </div>
                     <div class="uk-navbar-right">
 
-                        <a class="uk-navbar-toggle" href="#" uk-navbar-toggle-icon></a>
-                        <div class="uk-navbar-dropdown" uk-drop="mode: click; cls-drop: uk-navbar-dropdown; boundary: !nav; flip: x">Dropdown</div>
-                        
-                    </div>
-                </div>
-            </div>
-        </nav>
-
-        <div class="uk-container">
-
-            <h2>Dropdown Stretch</h2>
-
-            <div class="uk-child-width-1-4@m" uk-grid>
-                <div>
-                    <div class="scroll-container uk-height-large uk-resize-vertical">
-
-                        <nav class="uk-navbar uk-navbar-container">
-                            <div class="uk-navbar-left">
-                                <a class="uk-navbar-toggle" href="#">
-                                    <span uk-navbar-toggle-icon></span><span class="uk-margin-small-left">Fade</span>
-                                </a>
-                                <div class="uk-navbar-dropdown" uk-drop="mode: click; cls-drop: uk-navbar-dropdown; pos: bottom-stretch; animate-out: true">
-                                    <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>
-                        </nav>
-
-                    </div>
-                </div>
-                <div>
-                    <div class="scroll-container uk-height-large uk-resize-vertical">
-
-                        <nav class="uk-navbar uk-navbar-container">
-                            <div class="uk-navbar-left">
-                                <a class="uk-navbar-toggle" href="#">
-                                    <span uk-navbar-toggle-icon></span><span class="uk-margin-small-left">Slide</span>
-                                </a>
-                                <div class="uk-navbar-dropdown" uk-drop="mode: click; cls-drop: uk-navbar-dropdown; pos: bottom-stretch; animate-out: true; animation: slide">
-                                    <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>
-                        </nav>
-
-                    </div>
-                </div>
-                <div>
-                    <div class="scroll-container uk-height-large uk-resize-vertical">
-
-                        <nav class="uk-navbar uk-navbar-container">
-                            <div class="uk-navbar-left">
-                                <a class="uk-navbar-toggle" href="#">
-                                    <span uk-navbar-toggle-icon></span><span class="uk-margin-small-left">Slide Left</span>
-                                </a>
-                                <div class="uk-navbar-dropdown" uk-drop="mode: click; cls-drop: uk-navbar-dropdown; pos: bottom-stretch; animate-out: true; animation: slide-left">
-                                    <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>
-                        </nav>
-
-                    </div>
-                </div>
-                <div>
-                    <div class="scroll-container uk-height-large uk-resize-vertical">
-
-                        <nav class="uk-navbar uk-navbar-container">
-                            <div class="uk-navbar-left">
-                                <a class="uk-navbar-toggle" href="#">
-                                    <span uk-navbar-toggle-icon></span><span class="uk-margin-small-left">Slide Right</span>
-                                </a>
-                                <div class="uk-navbar-dropdown" uk-drop="mode: click; cls-drop: uk-navbar-dropdown; pos: bottom-stretch; animate-out: true; animation: slide-right">
-                                    <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>
-                        </nav>
+                        <a class="uk-navbar-toggle uk-navbar-toggle-animate" href="#" uk-navbar-toggle-icon></a>
+                        <div class="uk-navbar-dropdown" uk-drop="mode: click; cls-drop: uk-navbar-dropdown; boundary: !.uk-navbar; flip: false">Dropdown</div>
 
                     </div>
                 </div>
             </div>
-        </div>
+        </nav>
 
-        <div class="uk-container">
+        <div class="uk-container uk-margin-medium-top">
 
             <h2>Center</h2>
 
@@ -2540,9 +2419,6 @@
                                 <a href="#">Content</a>
                                 <div class="uk-navbar-dropdown">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
                             </li>
-                            <li><a href="#">Item</a></li>
-                            <li><a href="#">Item</a></li>
-                            <li><a href="#">Item</a></li>
                         </ul>
                         <div class="uk-navbar-item">
                             <div>Some <a href="#">Link</a></div>
@@ -2618,7 +2494,6 @@
 
                         <div class="uk-navbar-center-right">
                             <ul class="uk-navbar-nav">
-                                <li class="uk-active"><a href="#">Active</a></li>
                                 <li>
                                     <a href="#">Parent</a>
                                     <div class="uk-navbar-dropdown">
@@ -2719,7 +2594,6 @@
 
                         <div class="uk-navbar-center-right">
                             <ul class="uk-navbar-nav">
-                                <li class="uk-active"><a href="#">Active</a></li>
                                 <li>
                                     <a href="#">Parent</a>
                                     <div class="uk-navbar-dropdown">
@@ -2781,9 +2655,9 @@
             </div>
         </nav>
 
-        <div class="uk-container">
+        <div class="uk-container uk-margin-medium-top">
 
-            <h2>Justify</h2>
+            <h2>Stretch</h2>
 
         </div>
 
@@ -2799,12 +2673,6 @@
                             <li><a href="#">Parent</a></li>
                             <li><a href="#">Item</a></li>
                             <li><a href="#">Item</a></li>
-                        </ul>
-
-                    </div>
-                    <div class="uk-navbar-right">
-
-                        <ul class="uk-navbar-nav">
                             <li><a href="#">Item</a></li>
                         </ul>
 
@@ -2827,7 +2695,7 @@
             </div>
         </nav>
 
-        <div class="uk-container">
+        <div class="uk-container uk-margin-medium-top">
 
             <h2>Layouts</h2>
 
@@ -2944,8 +2812,8 @@
                             </ul>
                         </div>
 
-                        <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; pos: bottom-stretch; animate-out: true">
+                        <a class="uk-navbar-toggle uk-navbar-toggle-animate" 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">
@@ -3007,8 +2875,8 @@
                     </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; pos: bottom-stretch; animate-out: true">
+                        <a class="uk-navbar-toggle uk-navbar-toggle-animate" 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">
@@ -3132,8 +3000,8 @@
                             <li><a href="#">Item</a></li>
                         </ul>
 
-                        <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; pos: bottom-stretch; animate-out: true">
+                        <a class="uk-navbar-toggle uk-navbar-toggle-animate" 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">
@@ -3195,8 +3063,8 @@
                     </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; pos: bottom-stretch; animate-out: true">
+                        <a class="uk-navbar-toggle uk-navbar-toggle-animate" 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">
@@ -3219,7 +3087,7 @@
             </div>
         </nav>
 
-        <div class="uk-container">
+        <div class="uk-container uk-margin-medium-top">
 
             <h2>JavaScript Options</h2>
 
@@ -3244,7 +3112,7 @@
                             <td><code>mode</code></td>
                             <td>hover | click</td>
                             <td>click,hover</td>
-                            <td>Comma separated list of dropdown trigger behaviour modes.</td>
+                            <td>Comma-separated list of dropdown trigger behavior modes.</td>
                         </tr>
                         <tr>
                             <td><code>delay-show</code></td>
@@ -3260,15 +3128,27 @@
                         </tr>
                         <tr>
                             <td><code>boundary</code></td>
-                            <td>CSS selector</td>
+                            <td>Boolean, CSS selector</td>
                             <td>true</td>
                             <td>Referenced element to keep Drop's visibility. By default, it's the navbar component's element.</td>
                         </tr>
                         <tr>
-                            <td><code>boundary-align</code></td>
-                            <td>Boolean</td>
+                            <td><code>target</code></td>
+                            <td>Boolean, CSS selector</td>
+                            <td>false</td>
+                            <td>The element the drops are positioned to (`true` for window).</td>
+                        </tr>
+                        <tr>
+                            <td><code>target-x</code></td>
+                            <td>Boolean, CSS selector</td>
                             <td>false</td>
-                            <td>Align Drop to boundary.</td>
+                            <td>The element's X axis the drops are positioned to (`true` for window).</td>
+                        </tr>
+                        <tr>
+                            <td><code>target-y</code></td>
+                            <td>Boolean, CSS selector</td>
+                            <td>false</td>
+                            <td>The element's Y axis the drop are positioned to (`true` for window).</td>
                         </tr>
                         <tr>
                             <td><code>cls-drop</code></td>
@@ -3317,36 +3197,36 @@
 
         <script>
 
-            var util = UIkit.util,
-                tracker = new util.MouseTracker(),
-                el = util.$('#js-mousetracker'),
-                target = util.$('#js-mousetarget'),
-                interval;
+            const {$, $$, addClass, on, removeClass, MouseTracker } = UIkit.util;
+            const tracker = MouseTracker();
+            const el = $('#js-mousetracker');
+            const target = $('#js-mousetarget');
+            let interval;
 
-            util.on(el, 'mouseenter', function () {
+            on(el, 'mouseenter', () => {
                 tracker.init();
-                interval = setInterval(function () {
-                    target.textContent = tracker.movesTo(target.parentNode) ? 'Moves to' : 'Does not move to';
-                });
+                interval = setInterval(() => target.textContent = tracker.movesTo(target.parentNode) ? 'Moves to' : 'Does not move to');
             });
 
-            util.on(el, 'mouseleave', function () {
+            on(el, 'mouseleave', () => {
                 tracker.cancel();
                 clearInterval(interval);
             });
 
-        </script>
-
-        <script>
-
-            var options = UIkit.util.$$('#js-size-switcher option').map(function (option) { return option.value; });
+            on('#js-dropdown-size-switcher', 'change', (e) => {
+                const options = $$('option', e.target).map(({value}) => value);
+                for (const el of $$('.uk-navbar-dropdown:not(.uk-navbar-dropdown-dropbar)')) {
+                    removeClass(el, options);
+                    addClass(el, e.target.value);
+                }
+            });
 
-            UIkit.util.on('#js-size-switcher', 'change', function () {
-                var value = this.value;
-                UIkit.util.$$('.uk-navbar-dropdown').forEach(function (table) {
-                    UIkit.util.removeClass(table, options);
-                    UIkit.util.addClass(table, value);
-                });
+            on('#js-dropbar-size-switcher', 'change', (e) => {
+                const options = $$('option', e.target).map(({value}) => value);
+                for (const el of $$('.uk-navbar-dropdown-dropbar')) {
+                    removeClass(el, options);
+                    addClass(el, e.target.value);
+                }
             });
 
         </script>