uikit 3.14.4-dev.e3664d0d2 → 3.14.4-dev.e8873dd80

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (134) hide show
  1. package/CHANGELOG.md +39 -15
  2. package/build/util.js +1 -0
  3. package/dist/css/uikit-core-rtl.css +353 -96
  4. package/dist/css/uikit-core-rtl.min.css +1 -1
  5. package/dist/css/uikit-core.css +353 -96
  6. package/dist/css/uikit-core.min.css +1 -1
  7. package/dist/css/uikit-rtl.css +373 -101
  8. package/dist/css/uikit-rtl.min.css +1 -1
  9. package/dist/css/uikit.css +373 -101
  10. package/dist/css/uikit.min.css +1 -1
  11. package/dist/js/components/countdown.js +1 -1
  12. package/dist/js/components/countdown.min.js +1 -1
  13. package/dist/js/components/filter.js +7 -5
  14. package/dist/js/components/filter.min.js +1 -1
  15. package/dist/js/components/lightbox-panel.js +96 -139
  16. package/dist/js/components/lightbox-panel.min.js +1 -1
  17. package/dist/js/components/lightbox.js +96 -139
  18. package/dist/js/components/lightbox.min.js +1 -1
  19. package/dist/js/components/notification.js +1 -1
  20. package/dist/js/components/notification.min.js +1 -1
  21. package/dist/js/components/parallax.js +4 -5
  22. package/dist/js/components/parallax.min.js +1 -1
  23. package/dist/js/components/slider-parallax.js +4 -5
  24. package/dist/js/components/slider-parallax.min.js +1 -1
  25. package/dist/js/components/slider.js +1 -1
  26. package/dist/js/components/slider.min.js +1 -1
  27. package/dist/js/components/slideshow-parallax.js +4 -5
  28. package/dist/js/components/slideshow-parallax.min.js +1 -1
  29. package/dist/js/components/slideshow.js +1 -1
  30. package/dist/js/components/slideshow.min.js +1 -1
  31. package/dist/js/components/sortable.js +1 -1
  32. package/dist/js/components/sortable.min.js +1 -1
  33. package/dist/js/components/tooltip.js +100 -137
  34. package/dist/js/components/tooltip.min.js +1 -1
  35. package/dist/js/components/upload.js +1 -1
  36. package/dist/js/components/upload.min.js +1 -1
  37. package/dist/js/uikit-core.js +518 -454
  38. package/dist/js/uikit-core.min.js +17 -1
  39. package/dist/js/uikit-icons.js +1 -1
  40. package/dist/js/uikit-icons.min.js +1 -1
  41. package/dist/js/uikit.js +524 -458
  42. package/dist/js/uikit.min.js +17 -1
  43. package/package.json +1 -1
  44. package/src/images/{backgrounds/nav-parent-open.svg → components/nav-parent-icon-large.svg} +0 -0
  45. package/src/images/components/nav-parent-icon.svg +3 -0
  46. package/src/images/components/navbar-parent-icon.svg +3 -0
  47. package/src/images/components/navbar-toggle-icon.svg +25 -3
  48. package/src/js/api/state.js +2 -2
  49. package/src/js/components/filter.js +5 -3
  50. package/src/js/core/accordion.js +9 -17
  51. package/src/js/core/alert.js +35 -14
  52. package/src/js/core/drop.js +110 -82
  53. package/src/js/core/height-viewport.js +6 -2
  54. package/src/js/core/icon.js +16 -0
  55. package/src/js/core/index.js +2 -0
  56. package/src/js/core/leader.js +2 -2
  57. package/src/js/core/navbar.js +44 -30
  58. package/src/js/core/scroll.js +37 -10
  59. package/src/js/core/toggle.js +3 -5
  60. package/src/js/mixin/media.js +4 -5
  61. package/src/js/mixin/modal.js +15 -12
  62. package/src/js/mixin/position.js +18 -11
  63. package/src/js/mixin/style.js +11 -0
  64. package/src/js/mixin/togglable.js +88 -133
  65. package/src/js/util/animation.js +4 -3
  66. package/src/js/util/class.js +3 -1
  67. package/src/js/util/filter.js +3 -7
  68. package/src/js/util/position.js +107 -107
  69. package/src/js/util/style.js +4 -13
  70. package/src/js/util/viewport.js +3 -5
  71. package/src/less/components/_import.less +1 -0
  72. package/src/less/components/drop.less +1 -18
  73. package/src/less/components/dropbar.less +115 -0
  74. package/src/less/components/dropdown.less +16 -16
  75. package/src/less/components/leader.less +1 -1
  76. package/src/less/components/nav.less +218 -59
  77. package/src/less/components/navbar.less +73 -27
  78. package/src/less/components/utility.less +10 -2
  79. package/src/less/theme/_import.less +1 -0
  80. package/src/less/theme/dropbar.less +44 -0
  81. package/src/less/theme/dropdown.less +0 -11
  82. package/src/less/theme/nav.less +45 -7
  83. package/src/less/theme/navbar.less +4 -10
  84. package/src/scss/components/_import.scss +1 -0
  85. package/src/scss/components/drop.scss +1 -18
  86. package/src/scss/components/dropbar.scss +115 -0
  87. package/src/scss/components/dropdown.scss +16 -16
  88. package/src/scss/components/leader.scss +1 -1
  89. package/src/scss/components/nav.scss +167 -47
  90. package/src/scss/components/navbar.scss +61 -27
  91. package/src/scss/components/utility.scss +8 -1
  92. package/src/scss/mixins-theme.scss +92 -24
  93. package/src/scss/mixins.scss +89 -17
  94. package/src/scss/theme/_import.scss +1 -0
  95. package/src/scss/theme/dropbar.scss +44 -0
  96. package/src/scss/theme/dropdown.scss +0 -8
  97. package/src/scss/theme/nav.scss +43 -7
  98. package/src/scss/theme/navbar.scss +4 -7
  99. package/src/scss/variables-theme.scss +61 -14
  100. package/src/scss/variables.scss +50 -11
  101. package/tests/accordion.html +2 -2
  102. package/tests/alert.html +2 -2
  103. package/tests/countdown.html +1 -1
  104. package/tests/drop.html +455 -375
  105. package/tests/dropbar.html +458 -0
  106. package/tests/dropdown.html +26 -401
  107. package/tests/filter.html +9 -12
  108. package/tests/form.html +1 -1
  109. package/tests/index.html +126 -107
  110. package/tests/js/index.js +1 -4
  111. package/tests/lightbox.html +5 -5
  112. package/tests/list.html +8 -8
  113. package/tests/modal.html +13 -13
  114. package/tests/nav.html +117 -75
  115. package/tests/navbar.html +330 -233
  116. package/tests/offcanvas.html +17 -21
  117. package/tests/parallax.html +1 -1
  118. package/tests/position.html +18 -16
  119. package/tests/progress.html +9 -9
  120. package/tests/scroll.html +7 -10
  121. package/tests/search.html +6 -6
  122. package/tests/slider.html +6 -5
  123. package/tests/slideshow.html +8 -8
  124. package/tests/sortable.html +6 -8
  125. package/tests/sticky-navbar.html +15 -15
  126. package/tests/sticky.html +8 -8
  127. package/tests/switcher.html +1 -1
  128. package/tests/tab.html +1 -1
  129. package/tests/table.html +7 -7
  130. package/tests/toggle.html +2 -2
  131. package/tests/tooltip.html +1 -1
  132. package/tests/upload.html +11 -11
  133. package/tests/utility.html +19 -0
  134. package/src/images/backgrounds/nav-parent-close.svg +0 -3
package/tests/navbar.html CHANGED
@@ -80,7 +80,7 @@
80
80
  <ul class="uk-navbar-nav">
81
81
  <li class="uk-active"><a href="">Active</a></li>
82
82
  <li>
83
- <a href="">Parent</a>
83
+ <a href="">Parent <span uk-navbar-parent-icon></span></a>
84
84
  <div class="uk-navbar-dropdown">
85
85
  <ul class="uk-nav uk-navbar-dropdown-nav">
86
86
  <li class="uk-active"><a href="#">Active</a></li>
@@ -121,7 +121,7 @@
121
121
  <ul class="uk-navbar-nav">
122
122
  <li class="uk-active"><a href="">Active</a></li>
123
123
  <li>
124
- <a href="">Parent</a>
124
+ <a href="">Parent <span uk-navbar-parent-icon></span></a>
125
125
  <div class="uk-navbar-dropdown">
126
126
  <ul class="uk-nav uk-navbar-dropdown-nav">
127
127
  <li class="uk-active"><a href="#">Active</a></li>
@@ -194,7 +194,7 @@
194
194
 
195
195
  <div class="uk-navbar-dropdown test">
196
196
 
197
- <ul class="uk-nav uk-navbar-dropdown-nav">
197
+ <ul class="uk-nav uk-nav-secondary">
198
198
  <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>
199
199
  <li><a href="#"><div>Item<div class="uk-nav-subtitle">Subtitle lorem ipsum dolor sit amet, consectetur adipiscing.</div></div></a></li>
200
200
  <li><a href="#"><div>Item<div class="uk-nav-subtitle">Subtitle lorem ipsum dolor sit amet, consectetur adipiscing.</div></div></a></li>
@@ -206,52 +206,6 @@
206
206
  </div>
207
207
  </div>
208
208
 
209
- <h2>Primary</h2>
210
-
211
- </div>
212
-
213
- <nav class="uk-navbar-container uk-margin">
214
- <div class="uk-container">
215
- <div uk-navbar>
216
- <div class="uk-navbar-left">
217
-
218
- <ul class="uk-navbar-nav uk-navbar-nav-primary">
219
- <li class="uk-active"><a href="#">Active</a></li>
220
- <li>
221
- <a href="#">Parent</a>
222
- <div class="uk-navbar-dropdown">
223
- <ul class="uk-nav uk-navbar-dropdown-nav">
224
- <li class="uk-active"><a href="#">Active</a></li>
225
- <li class="uk-parent">
226
- <a href="#">Parent</a>
227
- <ul class="uk-nav-sub">
228
- <li><a href="#">Sub item</a></li>
229
- <li><a href="#">Sub item</a></li>
230
- </ul>
231
- </li>
232
- <li class="uk-nav-header">Header</li>
233
- <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
234
- <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
235
- <li class="uk-nav-divider"></li>
236
- <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
237
- </ul>
238
- </div>
239
- </li>
240
- <li>
241
- <a href="#">Content</a>
242
- <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>
243
- </li>
244
- <li><a href="#">Item</a></li>
245
- <li><a href="#">Item</a></li>
246
- </ul>
247
-
248
- </div>
249
- </div>
250
- </div>
251
- </nav>
252
-
253
- <div class="uk-container">
254
-
255
209
  <h2>Click</h2>
256
210
 
257
211
  </div>
@@ -296,10 +250,17 @@
296
250
  </div>
297
251
  </nav>
298
252
 
299
- <div class="uk-container">
253
+ <div class="uk-container uk-margin-medium-top">
300
254
 
301
255
  <h2>Dropdown</h2>
302
256
 
257
+ <div class="uk-margin">
258
+ <select id="js-size-switcher" class="uk-select uk-form-width-small">
259
+ <option value="">Default</option>
260
+ <option value="uk-navbar-dropdown-large">Large</option>
261
+ </select>
262
+ </div>
263
+
303
264
  </div>
304
265
 
305
266
  <nav class="uk-navbar-container uk-margin">
@@ -384,8 +345,8 @@
384
345
  </div>
385
346
  </li>
386
347
  <li>
387
- <a href="#">Justify</a>
388
- <div class="uk-navbar-dropdown" uk-drop="cls-drop: uk-navbar-dropdown; boundary: !.uk-navbar; boundary-align: true; pos: bottom-justify; flip: x">
348
+ <a href="#">Stretch</a>
349
+ <div class="uk-navbar-dropdown" uk-drop="cls-drop: uk-navbar-dropdown; boundary: !.uk-navbar; stretch: x; flip: false">
389
350
  <div class="uk-navbar-dropdown-grid uk-child-width-1-3@m" uk-grid>
390
351
  <div>
391
352
  <ul class="uk-nav uk-navbar-dropdown-nav">
@@ -426,8 +387,8 @@
426
387
  </div>
427
388
  </li>
428
389
  <li>
429
- <a href="#">Justify Full</a>
430
- <div class="uk-navbar-dropdown" uk-drop="cls-drop: uk-navbar-dropdown; boundary: !.uk-navbar-container; pos: bottom-justify; flip: x">
390
+ <a href="#">Stretch Full</a>
391
+ <div class="uk-navbar-dropdown" uk-drop="cls-drop: uk-navbar-dropdown; boundary: !.uk-navbar-container; stretch: x; flip: false">
431
392
  <div class="uk-navbar-dropdown-grid uk-child-width-1-3@m" uk-grid>
432
393
  <div>
433
394
  <ul class="uk-nav uk-navbar-dropdown-nav">
@@ -608,8 +569,8 @@
608
569
  </div>
609
570
  </li>
610
571
  <li>
611
- <a href="#">Justify</a>
612
- <div class="uk-navbar-dropdown" uk-drop="cls-drop: uk-navbar-dropdown; boundary: !.uk-navbar; boundary-align: true; pos: bottom-justify; flip: x">
572
+ <a href="#">Stretch</a>
573
+ <div class="uk-navbar-dropdown" uk-drop="cls-drop: uk-navbar-dropdown; boundary: !.uk-navbar; stretch: x; flip: false">
613
574
  <div class="uk-navbar-dropdown-grid uk-child-width-1-3@m" uk-grid>
614
575
  <div>
615
576
  <ul class="uk-nav uk-navbar-dropdown-nav">
@@ -764,8 +725,8 @@
764
725
  </div>
765
726
  </li>
766
727
  <li>
767
- <a href="#">Justify</a>
768
- <div class="uk-navbar-dropdown" uk-drop="cls-drop: uk-navbar-dropdown; boundary: !.uk-navbar; boundary-align: true; pos: bottom-justify; flip: x">
728
+ <a href="#">Stretch</a>
729
+ <div class="uk-navbar-dropdown" uk-drop="cls-drop: uk-navbar-dropdown; boundary: !.uk-navbar; stretch: x; flip: false">
769
730
  <div class="uk-navbar-dropdown-grid uk-child-width-1-3@m" uk-grid>
770
731
  <div>
771
732
  <ul class="uk-nav uk-navbar-dropdown-nav">
@@ -838,9 +799,213 @@
838
799
  </div>
839
800
  </nav>
840
801
 
841
- <div class="uk-container">
802
+ <div class="uk-container uk-margin-medium-top">
803
+
804
+ <h2>Parent Icon</h2>
805
+
806
+ </div>
807
+
808
+ <nav class="uk-navbar-container uk-margin">
809
+ <div class="uk-container">
810
+ <div uk-navbar>
811
+ <div class="uk-navbar-left">
812
+
813
+ <ul class="uk-navbar-nav">
814
+ <li class="uk-active">
815
+ <a href="#">Left <span uk-navbar-parent-icon></span></a>
816
+ <div class="uk-navbar-dropdown">
817
+ <ul class="uk-nav uk-navbar-dropdown-nav">
818
+ <li class="uk-active"><a href="#">Active</a></li>
819
+ <li class="uk-parent">
820
+ <a href="#">Parent</a>
821
+ <ul class="uk-nav-sub">
822
+ <li><a href="#">Sub item</a></li>
823
+ <li><a href="#">Sub item</a></li>
824
+ </ul>
825
+ </li>
826
+ <li class="uk-nav-header">Header</li>
827
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
828
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
829
+ <li class="uk-nav-divider"></li>
830
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
831
+ </ul>
832
+ </div>
833
+ </li>
834
+ <li>
835
+ <a href="#">2 Columns <span uk-navbar-parent-icon></span></a>
836
+ <div class="uk-navbar-dropdown uk-navbar-dropdown-width-2">
837
+ <div class="uk-navbar-dropdown-grid uk-child-width-1-2" uk-grid>
838
+ <div>
839
+ <ul class="uk-nav uk-navbar-dropdown-nav">
840
+ <li class="uk-active"><a href="#">Active</a></li>
841
+ <li class="uk-parent"><a href="#">Parent</a></li>
842
+ <li class="uk-nav-header">Header</li>
843
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
844
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
845
+ <li class="uk-nav-divider"></li>
846
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
847
+ </ul>
848
+ </div>
849
+ <div>
850
+ <ul class="uk-nav uk-navbar-dropdown-nav">
851
+ <li class="uk-active"><a href="#">Active</a></li>
852
+ <li class="uk-parent"><a href="#">Parent</a></li>
853
+ <li class="uk-nav-header">Header</li>
854
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
855
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
856
+ <li class="uk-nav-divider"></li>
857
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
858
+ </ul>
859
+ </div>
860
+ </div>
861
+ </div>
862
+ </li>
863
+ <li>
864
+ <a href="#">3 Columns <span uk-navbar-parent-icon></span></a>
865
+ <div class="uk-navbar-dropdown uk-navbar-dropdown-width-3">
866
+ <div class="uk-navbar-dropdown-grid uk-child-width-1-3" uk-grid>
867
+ <div>
868
+ <ul class="uk-nav uk-navbar-dropdown-nav">
869
+ <li class="uk-active"><a href="#">Active</a></li>
870
+ <li class="uk-parent"><a href="#">Parent</a></li>
871
+ <li class="uk-nav-header">Header</li>
872
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
873
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
874
+ </ul>
875
+ </div>
876
+ <div>
877
+ <ul class="uk-nav uk-navbar-dropdown-nav">
878
+ <li class="uk-active"><a href="#">Active</a></li>
879
+ <li class="uk-parent"><a href="#">Parent</a></li>
880
+ <li class="uk-nav-header">Header</li>
881
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
882
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
883
+ </ul>
884
+ </div>
885
+ <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
886
+ </div>
887
+ </div>
888
+ </li>
889
+ <li>
890
+ <a href="#">Justify <span uk-navbar-parent-icon></span></a>
891
+ <div class="uk-navbar-dropdown" uk-drop="cls-drop: uk-navbar-dropdown; boundary: !.uk-navbar; stretch: x; flip: false">
892
+ <div class="uk-navbar-dropdown-grid uk-child-width-1-3@m" uk-grid>
893
+ <div>
894
+ <ul class="uk-nav uk-navbar-dropdown-nav">
895
+ <li class="uk-active"><a href="#">Active</a></li>
896
+ <li class="uk-parent">
897
+ <a href="#">Parent</a>
898
+ <ul class="uk-nav-sub">
899
+ <li><a href="#">Sub item</a></li>
900
+ <li><a href="#">Sub item</a></li>
901
+ </ul>
902
+ </li>
903
+ <li class="uk-nav-header">Header</li>
904
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
905
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
906
+ <li class="uk-nav-divider"></li>
907
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
908
+ </ul>
909
+ </div>
910
+ <div>
911
+ <ul class="uk-nav uk-navbar-dropdown-nav">
912
+ <li class="uk-active"><a href="#">Active</a></li>
913
+ <li class="uk-parent">
914
+ <a href="#">Parent</a>
915
+ <ul class="uk-nav-sub">
916
+ <li><a href="#">Sub item</a></li>
917
+ <li><a href="#">Sub item</a></li>
918
+ </ul>
919
+ </li>
920
+ <li class="uk-nav-header">Header</li>
921
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
922
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
923
+ <li class="uk-nav-divider"></li>
924
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
925
+ </ul>
926
+ </div>
927
+ <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
928
+ </div>
929
+ </div>
930
+ </li>
931
+ <li>
932
+ <a href="#">Stretch Full <span uk-navbar-parent-icon></span></a>
933
+ <div class="uk-navbar-dropdown" uk-drop="cls-drop: uk-navbar-dropdown; boundary: !.uk-navbar-container; stretch: x; flip: false">
934
+ <div class="uk-navbar-dropdown-grid uk-child-width-1-3@m" uk-grid>
935
+ <div>
936
+ <ul class="uk-nav uk-navbar-dropdown-nav">
937
+ <li class="uk-active"><a href="#">Active</a></li>
938
+ <li class="uk-parent">
939
+ <a href="#">Parent</a>
940
+ <ul class="uk-nav-sub">
941
+ <li><a href="#">Sub item</a></li>
942
+ <li><a href="#">Sub item</a></li>
943
+ </ul>
944
+ </li>
945
+ <li class="uk-nav-header">Header</li>
946
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
947
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
948
+ <li class="uk-nav-divider"></li>
949
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
950
+ </ul>
951
+ </div>
952
+ <div>
953
+ <ul class="uk-nav uk-navbar-dropdown-nav">
954
+ <li class="uk-active"><a href="#">Active</a></li>
955
+ <li class="uk-parent">
956
+ <a href="#">Parent</a>
957
+ <ul class="uk-nav-sub">
958
+ <li><a href="#">Sub item</a></li>
959
+ <li><a href="#">Sub item</a></li>
960
+ </ul>
961
+ </li>
962
+ <li class="uk-nav-header">Header</li>
963
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
964
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
965
+ <li class="uk-nav-divider"></li>
966
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
967
+ </ul>
968
+ </div>
969
+ <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
970
+ </div>
971
+ </div>
972
+ </li>
973
+ </ul>
842
974
 
843
- <h2>Boundary Align</h2>
975
+ </div>
976
+ <div class="uk-navbar-right">
977
+
978
+ <ul class="uk-navbar-nav">
979
+ <li>
980
+ <a href="#">1 Column <span uk-navbar-parent-icon></span></a>
981
+ <div class="uk-navbar-dropdown">
982
+ <ul class="uk-nav uk-navbar-dropdown-nav">
983
+ <li class="uk-active"><a href="#">Active</a></li>
984
+ <li class="uk-parent">
985
+ <a href="#">Parent</a>
986
+ <ul class="uk-nav-sub">
987
+ <li><a href="#">Sub item</a></li>
988
+ <li><a href="#">Sub item</a></li>
989
+ </ul>
990
+ </li>
991
+ <li class="uk-nav-header">Header</li>
992
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
993
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
994
+ <li class="uk-nav-divider"></li>
995
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
996
+ </ul>
997
+ </div>
998
+ </li>
999
+ </ul>
1000
+
1001
+ </div>
1002
+ </div>
1003
+ </div>
1004
+ </nav>
1005
+
1006
+ <div class="uk-container uk-margin-medium-top">
1007
+
1008
+ <h2>Dropdown Stretch</h2>
844
1009
 
845
1010
  </div>
846
1011
 
@@ -927,8 +1092,8 @@
927
1092
  </div>
928
1093
  </li>
929
1094
  <li>
930
- <a href="#">Justify</a>
931
- <div class="uk-navbar-dropdown" uk-drop="cls-drop: uk-navbar-dropdown; boundary: !.uk-navbar; boundary-align: true; pos: bottom-justify; flip: x">
1095
+ <a href="#">Stretch</a>
1096
+ <div class="uk-navbar-dropdown" uk-drop="cls-drop: uk-navbar-dropdown; boundary: !.uk-navbar; stretch: x; flip: false">
932
1097
  <div class="uk-navbar-dropdown-grid uk-child-width-1-3@m" uk-grid>
933
1098
  <div>
934
1099
  <ul class="uk-nav uk-navbar-dropdown-nav">
@@ -969,8 +1134,8 @@
969
1134
  </div>
970
1135
  </li>
971
1136
  <li>
972
- <a href="#">Justify Full</a>
973
- <div class="uk-navbar-dropdown" uk-drop="cls-drop: uk-navbar-dropdown; boundary: !.uk-navbar-container; boundary-align: true; pos: bottom-justify; flip: x">
1137
+ <a href="#">Stretch Full</a>
1138
+ <div class="uk-navbar-dropdown" uk-drop="cls-drop: uk-navbar-dropdown; boundary: !.uk-navbar-container; stretch: x; flip: false">
974
1139
  <div class="uk-navbar-dropdown-grid uk-child-width-1-3@m" uk-grid>
975
1140
  <div>
976
1141
  <ul class="uk-nav uk-navbar-dropdown-nav">
@@ -1042,7 +1207,7 @@
1042
1207
  </div>
1043
1208
  </div>
1044
1209
  </nav>
1045
-
1210
+
1046
1211
  <nav class="uk-navbar-container uk-margin">
1047
1212
  <div class="uk-container">
1048
1213
  <div uk-navbar="align: right; boundary-align: true">
@@ -1151,8 +1316,8 @@
1151
1316
  </div>
1152
1317
  </li>
1153
1318
  <li>
1154
- <a href="#">Justify</a>
1155
- <div class="uk-navbar-dropdown" uk-drop="cls-drop: uk-navbar-dropdown; boundary: !.uk-navbar; boundary-align: true; pos: bottom-justify; flip: x">
1319
+ <a href="#">Stretch</a>
1320
+ <div class="uk-navbar-dropdown" uk-drop="cls-drop: uk-navbar-dropdown; boundary: !.uk-navbar; stretch: x; flip: false">
1156
1321
  <div class="uk-navbar-dropdown-grid uk-child-width-1-3@m" uk-grid>
1157
1322
  <div>
1158
1323
  <ul class="uk-nav uk-navbar-dropdown-nav">
@@ -1307,8 +1472,8 @@
1307
1472
  </div>
1308
1473
  </li>
1309
1474
  <li>
1310
- <a href="#">Justify</a>
1311
- <div class="uk-navbar-dropdown" uk-drop="cls-drop: uk-navbar-dropdown; boundary: !.uk-navbar; boundary-align: true; pos: bottom-justify; flip: x">
1475
+ <a href="#">Stretch</a>
1476
+ <div class="uk-navbar-dropdown" uk-drop="cls-drop: uk-navbar-dropdown; boundary: !.uk-navbar; stretch: x; flip: false">
1312
1477
  <div class="uk-navbar-dropdown-grid uk-child-width-1-3@m" uk-grid>
1313
1478
  <div>
1314
1479
  <ul class="uk-nav uk-navbar-dropdown-nav">
@@ -1381,7 +1546,7 @@
1381
1546
  </div>
1382
1547
  </nav>
1383
1548
 
1384
- <div class="uk-container">
1549
+ <div class="uk-container uk-margin-medium-top">
1385
1550
 
1386
1551
  <h2>Dropbar</h2>
1387
1552
 
@@ -1391,7 +1556,7 @@
1391
1556
 
1392
1557
  <nav class="uk-navbar-container uk-margin-top"><!-- Margin top only because of dropbar follows already in markup -->
1393
1558
  <div class="uk-container">
1394
- <div uk-navbar="dropbar: +.uk-navbar-dropbar">
1559
+ <div uk-navbar="target-y: !.uk-navbar-container; dropbar: !.uk-navbar-container + .uk-navbar-dropbar">
1395
1560
  <div class="uk-navbar-left">
1396
1561
 
1397
1562
  <ul class="uk-navbar-nav">
@@ -1471,8 +1636,8 @@
1471
1636
  </div>
1472
1637
  </li>
1473
1638
  <li>
1474
- <a href="#">Justify</a>
1475
- <div class="uk-navbar-dropdown" uk-drop="cls-drop: uk-navbar-dropdown; boundary: !.uk-navbar; boundary-align: true; pos: bottom-justify; flip: x">
1639
+ <a href="#">Stretch</a>
1640
+ <div class="uk-navbar-dropdown" uk-drop="cls-drop: uk-navbar-dropdown; boundary: !.uk-navbar; stretch: x; flip: false; target-y: !.uk-navbar-container">
1476
1641
  <div class="uk-navbar-dropdown-grid uk-child-width-1-3@m" uk-grid>
1477
1642
  <div>
1478
1643
  <ul class="uk-nav uk-navbar-dropdown-nav">
@@ -1513,8 +1678,8 @@
1513
1678
  </div>
1514
1679
  </li>
1515
1680
  <li>
1516
- <a href="#">Justify Full</a>
1517
- <div class="uk-navbar-dropdown" uk-drop="cls-drop: uk-navbar-dropdown; boundary: !.uk-navbar-container; pos: bottom-justify; flip: x">
1681
+ <a href="#">Stretch Full</a>
1682
+ <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">
1518
1683
  <div class="uk-navbar-dropdown-grid uk-child-width-1-3@m" uk-grid>
1519
1684
  <div>
1520
1685
  <ul class="uk-nav uk-navbar-dropdown-nav">
@@ -1587,11 +1752,11 @@
1587
1752
  </div>
1588
1753
  </nav>
1589
1754
 
1590
- <div class="uk-navbar-dropbar"></div>
1755
+ <div class="uk-dropbar uk-dropbar-top uk-navbar-dropbar"></div>
1591
1756
 
1592
1757
  <nav class="uk-navbar-container uk-margin">
1593
1758
  <div class="uk-container">
1594
- <div uk-navbar="dropbar: true; align: right">
1759
+ <div uk-navbar="target-y: !.uk-navbar-container; dropbar: true; dropbar-anchor: !.uk-navbar-container; align: right">
1595
1760
  <div class="uk-navbar-left">
1596
1761
 
1597
1762
  <ul class="uk-navbar-nav">
@@ -1697,8 +1862,8 @@
1697
1862
  </div>
1698
1863
  </li>
1699
1864
  <li>
1700
- <a href="#">Justify</a>
1701
- <div class="uk-navbar-dropdown" uk-drop="cls-drop: uk-navbar-dropdown; boundary: !.uk-navbar; boundary-align: true; pos: bottom-justify; flip: x">
1865
+ <a href="#">Stretch</a>
1866
+ <div class="uk-navbar-dropdown" uk-drop="cls-drop: uk-navbar-dropdown; boundary: !.uk-navbar; stretch: x; flip: false; target-y: !.uk-navbar-container">
1702
1867
  <div class="uk-navbar-dropdown-grid uk-child-width-1-3@m" uk-grid>
1703
1868
  <div>
1704
1869
  <ul class="uk-nav uk-navbar-dropdown-nav">
@@ -1745,9 +1910,9 @@
1745
1910
  </div>
1746
1911
  </nav>
1747
1912
 
1748
- <nav class="uk-navbar-container uk-margin uk-position-relative uk-position-z-index"><!-- Position context only needed for demo showcase -->
1913
+ <nav class="uk-navbar-container uk-margin">
1749
1914
  <div class="uk-container">
1750
- <div uk-navbar="dropbar: true; align: center">
1915
+ <div uk-navbar="target-y: !.uk-navbar-container; dropbar: true; dropbar-anchor: !.uk-navbar-container; align: center">
1751
1916
  <div class="uk-navbar-left">
1752
1917
 
1753
1918
  <ul class="uk-navbar-nav">
@@ -1853,8 +2018,8 @@
1853
2018
  </div>
1854
2019
  </li>
1855
2020
  <li>
1856
- <a href="#">Justify</a>
1857
- <div class="uk-navbar-dropdown" uk-drop="cls-drop: uk-navbar-dropdown; boundary: !.uk-navbar; boundary-align: true; pos: bottom-justify; flip: x">
2021
+ <a href="#">Stretch</a>
2022
+ <div class="uk-navbar-dropdown" uk-drop="cls-drop: uk-navbar-dropdown; boundary: !.uk-navbar; stretch: x; flip: false; target-y: !.uk-navbar-container">
1858
2023
  <div class="uk-navbar-dropdown-grid uk-child-width-1-3@m" uk-grid>
1859
2024
  <div>
1860
2025
  <ul class="uk-nav uk-navbar-dropdown-nav">
@@ -1928,7 +2093,7 @@
1928
2093
  </nav>
1929
2094
 
1930
2095
 
1931
- <div class="uk-container">
2096
+ <div class="uk-container uk-margin-medium-top">
1932
2097
 
1933
2098
  <h2>Icons and Subtitles</h2>
1934
2099
 
@@ -1973,7 +2138,7 @@
1973
2138
  </div>
1974
2139
  </nav>
1975
2140
 
1976
- <div class="uk-container">
2141
+ <div class="uk-container uk-margin-medium-top">
1977
2142
 
1978
2143
  <h2>Content Items</h2>
1979
2144
 
@@ -2029,7 +2194,7 @@
2029
2194
  </div>
2030
2195
  </nav>
2031
2196
 
2032
- <div class="uk-container">
2197
+ <div class="uk-container uk-margin-medium-top">
2033
2198
 
2034
2199
  <h2>Logo and Toggle</h2>
2035
2200
 
@@ -2074,9 +2239,9 @@
2074
2239
  </div>
2075
2240
  <div class="uk-navbar-right">
2076
2241
 
2077
- <a class="uk-navbar-toggle" href="#" uk-navbar-toggle-icon></a>
2078
- <div class="uk-navbar-dropdown" uk-drop="mode: click; cls-drop: uk-navbar-dropdown; boundary: !nav; flip: x">Dropdown</div>
2079
-
2242
+ <a class="uk-navbar-toggle uk-navbar-toggle-animate" href="#" uk-navbar-toggle-icon></a>
2243
+ <div class="uk-navbar-dropdown" uk-drop="mode: click; cls-drop: uk-navbar-dropdown; boundary: !.uk-navbar; flip: false">Dropdown</div>
2244
+
2080
2245
  </div>
2081
2246
  </div>
2082
2247
  </div>
@@ -2121,63 +2286,36 @@
2121
2286
  </div>
2122
2287
  <div class="uk-navbar-right">
2123
2288
 
2124
- <a class="uk-navbar-toggle" href="#">
2289
+ <a class="uk-navbar-toggle uk-navbar-toggle-animate" href="#">
2125
2290
  <span class="uk-margin-small-right">Menu</span> <span uk-navbar-toggle-icon></span>
2126
2291
  </a>
2127
- <div class="uk-navbar-dropdown" uk-drop="mode: click; cls-drop: uk-navbar-dropdown; boundary: !nav; flip: x">Dropdown</div>
2128
-
2292
+ <div class="uk-navbar-dropdown" uk-drop="mode: click; cls-drop: uk-navbar-dropdown; boundary: !.uk-navbar; flip: false">Dropdown</div>
2293
+
2129
2294
  </div>
2130
2295
  </div>
2131
2296
  </div>
2132
2297
  </nav>
2133
2298
 
2134
- <div class="uk-container">
2299
+ <div class="uk-container uk-margin-medium-top">
2135
2300
 
2136
- <h2>Dropdown Stretch</h2>
2301
+ <h2>Primary</h2>
2137
2302
 
2138
- <div class="uk-child-width-1-4@m" uk-grid>
2139
- <div>
2140
- <div class="scroll-container uk-height-large uk-resize-vertical">
2303
+ </div>
2141
2304
 
2142
- <nav class="uk-navbar uk-navbar-container">
2143
- <div class="uk-navbar-left">
2144
- <a class="uk-navbar-toggle" href="#">
2145
- <span uk-navbar-toggle-icon></span><span class="uk-margin-small-left">Fade</span>
2146
- </a>
2147
- <div class="uk-navbar-dropdown" uk-drop="mode: click; cls-drop: uk-navbar-dropdown; pos: bottom-stretch; animate-out: true">
2148
- <ul class="uk-nav uk-navbar-dropdown-nav">
2149
- <li class="uk-active"><a href="#">Active</a></li>
2150
- <li class="uk-parent">
2151
- <a href="#">Parent</a>
2152
- <ul class="uk-nav-sub">
2153
- <li><a href="#">Sub item</a></li>
2154
- <li><a href="#">Sub item</a></li>
2155
- </ul>
2156
- </li>
2157
- <li class="uk-nav-header">Header</li>
2158
- <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
2159
- <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
2160
- <li class="uk-nav-divider"></li>
2161
- <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
2162
- </ul>
2163
- </div>
2164
- </div>
2165
- </nav>
2305
+ <nav class="uk-navbar-container uk-margin">
2306
+ <div class="uk-container">
2307
+ <div class="uk-navbar-primary" uk-navbar>
2308
+ <div class="uk-navbar-left">
2166
2309
 
2167
- </div>
2168
- </div>
2169
- <div>
2170
- <div class="scroll-container uk-height-large uk-resize-vertical">
2171
-
2172
- <nav class="uk-navbar uk-navbar-container">
2173
- <div class="uk-navbar-left">
2174
- <a class="uk-navbar-toggle" href="#">
2175
- <span uk-navbar-toggle-icon></span><span class="uk-margin-small-left">Slide</span>
2176
- </a>
2177
- <div class="uk-navbar-dropdown" uk-drop="mode: click; cls-drop: uk-navbar-dropdown; pos: bottom-stretch; animate-out: true; animation: slide">
2310
+ <a class="uk-navbar-item uk-logo" href="#">Logo</a>
2311
+ <ul class="uk-navbar-nav uk-navbar-nav-primary">
2312
+ <li class="uk-active"><a href="#">Active</a></li>
2313
+ <li>
2314
+ <a href="#">Parent</a>
2315
+ <div class="uk-navbar-dropdown">
2178
2316
  <ul class="uk-nav uk-navbar-dropdown-nav">
2179
2317
  <li class="uk-active"><a href="#">Active</a></li>
2180
- <li class="uk-parent">
2318
+ <li class="uk-parent">
2181
2319
  <a href="#">Parent</a>
2182
2320
  <ul class="uk-nav-sub">
2183
2321
  <li><a href="#">Sub item</a></li>
@@ -2191,75 +2329,27 @@
2191
2329
  <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
2192
2330
  </ul>
2193
2331
  </div>
2194
- </div>
2195
- </nav>
2332
+ </li>
2333
+ <li>
2334
+ <a href="#">Content</a>
2335
+ <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>
2336
+ </li>
2337
+ <li><a href="#">Item</a></li>
2338
+ <li><a href="#">Item</a></li>
2339
+ </ul>
2196
2340
 
2197
2341
  </div>
2198
- </div>
2199
- <div>
2200
- <div class="scroll-container uk-height-large uk-resize-vertical">
2201
-
2202
- <nav class="uk-navbar uk-navbar-container">
2203
- <div class="uk-navbar-left">
2204
- <a class="uk-navbar-toggle" href="#">
2205
- <span uk-navbar-toggle-icon></span><span class="uk-margin-small-left">Slide Left</span>
2206
- </a>
2207
- <div class="uk-navbar-dropdown" uk-drop="mode: click; cls-drop: uk-navbar-dropdown; pos: bottom-stretch; animate-out: true; animation: slide-left">
2208
- <ul class="uk-nav uk-navbar-dropdown-nav">
2209
- <li class="uk-active"><a href="#">Active</a></li>
2210
- <li class="uk-parent">
2211
- <a href="#">Parent</a>
2212
- <ul class="uk-nav-sub">
2213
- <li><a href="#">Sub item</a></li>
2214
- <li><a href="#">Sub item</a></li>
2215
- </ul>
2216
- </li>
2217
- <li class="uk-nav-header">Header</li>
2218
- <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
2219
- <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
2220
- <li class="uk-nav-divider"></li>
2221
- <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
2222
- </ul>
2223
- </div>
2224
- </div>
2225
- </nav>
2342
+ <div class="uk-navbar-right">
2226
2343
 
2227
- </div>
2228
- </div>
2229
- <div>
2230
- <div class="scroll-container uk-height-large uk-resize-vertical">
2231
-
2232
- <nav class="uk-navbar uk-navbar-container">
2233
- <div class="uk-navbar-left">
2234
- <a class="uk-navbar-toggle" href="#">
2235
- <span uk-navbar-toggle-icon></span><span class="uk-margin-small-left">Slide Right</span>
2236
- </a>
2237
- <div class="uk-navbar-dropdown" uk-drop="mode: click; cls-drop: uk-navbar-dropdown; pos: bottom-stretch; animate-out: true; animation: slide-right">
2238
- <ul class="uk-nav uk-navbar-dropdown-nav">
2239
- <li class="uk-active"><a href="#">Active</a></li>
2240
- <li class="uk-parent">
2241
- <a href="#">Parent</a>
2242
- <ul class="uk-nav-sub">
2243
- <li><a href="#">Sub item</a></li>
2244
- <li><a href="#">Sub item</a></li>
2245
- </ul>
2246
- </li>
2247
- <li class="uk-nav-header">Header</li>
2248
- <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
2249
- <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
2250
- <li class="uk-nav-divider"></li>
2251
- <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
2252
- </ul>
2253
- </div>
2254
- </div>
2255
- </nav>
2344
+ <a class="uk-navbar-toggle uk-navbar-toggle-animate" href="#" uk-navbar-toggle-icon></a>
2345
+ <div class="uk-navbar-dropdown" uk-drop="mode: click; cls-drop: uk-navbar-dropdown; boundary: !.uk-navbar; flip: false">Dropdown</div>
2256
2346
 
2257
2347
  </div>
2258
2348
  </div>
2259
2349
  </div>
2260
- </div>
2350
+ </nav>
2261
2351
 
2262
- <div class="uk-container">
2352
+ <div class="uk-container uk-margin-medium-top">
2263
2353
 
2264
2354
  <h2>Center</h2>
2265
2355
 
@@ -2322,9 +2412,6 @@
2322
2412
  <a href="#">Content</a>
2323
2413
  <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>
2324
2414
  </li>
2325
- <li><a href="#">Item</a></li>
2326
- <li><a href="#">Item</a></li>
2327
- <li><a href="#">Item</a></li>
2328
2415
  </ul>
2329
2416
  <div class="uk-navbar-item">
2330
2417
  <div>Some <a href="#">Link</a></div>
@@ -2400,7 +2487,6 @@
2400
2487
 
2401
2488
  <div class="uk-navbar-center-right">
2402
2489
  <ul class="uk-navbar-nav">
2403
- <li class="uk-active"><a href="#">Active</a></li>
2404
2490
  <li>
2405
2491
  <a href="#">Parent</a>
2406
2492
  <div class="uk-navbar-dropdown">
@@ -2501,7 +2587,6 @@
2501
2587
 
2502
2588
  <div class="uk-navbar-center-right">
2503
2589
  <ul class="uk-navbar-nav">
2504
- <li class="uk-active"><a href="#">Active</a></li>
2505
2590
  <li>
2506
2591
  <a href="#">Parent</a>
2507
2592
  <div class="uk-navbar-dropdown">
@@ -2563,9 +2648,9 @@
2563
2648
  </div>
2564
2649
  </nav>
2565
2650
 
2566
- <div class="uk-container">
2651
+ <div class="uk-container uk-margin-medium-top">
2567
2652
 
2568
- <h2>Justify</h2>
2653
+ <h2>Stretch</h2>
2569
2654
 
2570
2655
  </div>
2571
2656
 
@@ -2581,12 +2666,6 @@
2581
2666
  <li><a href="#">Parent</a></li>
2582
2667
  <li><a href="#">Item</a></li>
2583
2668
  <li><a href="#">Item</a></li>
2584
- </ul>
2585
-
2586
- </div>
2587
- <div class="uk-navbar-right">
2588
-
2589
- <ul class="uk-navbar-nav">
2590
2669
  <li><a href="#">Item</a></li>
2591
2670
  </ul>
2592
2671
 
@@ -2609,7 +2688,7 @@
2609
2688
  </div>
2610
2689
  </nav>
2611
2690
 
2612
- <div class="uk-container">
2691
+ <div class="uk-container uk-margin-medium-top">
2613
2692
 
2614
2693
  <h2>Layouts</h2>
2615
2694
 
@@ -2726,8 +2805,8 @@
2726
2805
  </ul>
2727
2806
  </div>
2728
2807
 
2729
- <a class="uk-navbar-toggle" uk-navbar-toggle-icon href="#"></a>
2730
- <div class="uk-navbar-dropdown" uk-drop="mode: click; cls-drop: uk-navbar-dropdown; pos: bottom-stretch; animate-out: true">
2808
+ <a class="uk-navbar-toggle uk-navbar-toggle-animate" uk-navbar-toggle-icon href="#"></a>
2809
+ <div class="uk-navbar-dropdown" uk-drop="mode: click; cls-drop: uk-navbar-dropdown; boundary: !.uk-navbar; stretch: x; flip: false">
2731
2810
  <ul class="uk-nav uk-navbar-dropdown-nav">
2732
2811
  <li class="uk-active"><a href="#">Active</a></li>
2733
2812
  <li class="uk-parent">
@@ -2789,8 +2868,8 @@
2789
2868
  </div>
2790
2869
  <div class="uk-navbar-right">
2791
2870
 
2792
- <a class="uk-navbar-toggle" uk-navbar-toggle-icon href="#"></a>
2793
- <div class="uk-navbar-dropdown" uk-drop="mode: click; cls-drop: uk-navbar-dropdown; pos: bottom-stretch; animate-out: true">
2871
+ <a class="uk-navbar-toggle uk-navbar-toggle-animate" uk-navbar-toggle-icon href="#"></a>
2872
+ <div class="uk-navbar-dropdown" uk-drop="mode: click; cls-drop: uk-navbar-dropdown; boundary: !.uk-navbar; stretch: x; flip: false">
2794
2873
  <ul class="uk-nav uk-navbar-dropdown-nav">
2795
2874
  <li class="uk-active"><a href="#">Active</a></li>
2796
2875
  <li class="uk-parent">
@@ -2911,11 +2990,11 @@
2911
2990
  </ul>
2912
2991
  </div>
2913
2992
  </li>
2914
- <li><a href="#">Item</a></li>
2993
+ <li><a href="#">asdf</a></li>
2915
2994
  </ul>
2916
2995
 
2917
- <a class="uk-navbar-toggle" uk-navbar-toggle-icon href="#"></a>
2918
- <div class="uk-navbar-dropdown" uk-drop="mode: click; cls-drop: uk-navbar-dropdown; pos: bottom-stretch; animate-out: true">
2996
+ <a class="uk-navbar-toggle uk-navbar-toggle-animate" uk-navbar-toggle-icon href="#"></a>
2997
+ <div class="uk-navbar-dropdown" uk-drop="mode: click; cls-drop: uk-navbar-dropdown; boundary: !.uk-navbar; stretch: x; flip: false">
2919
2998
  <ul class="uk-nav uk-navbar-dropdown-nav">
2920
2999
  <li class="uk-active"><a href="#">Active</a></li>
2921
3000
  <li class="uk-parent">
@@ -2977,8 +3056,8 @@
2977
3056
  </div>
2978
3057
  <div class="uk-navbar-right">
2979
3058
 
2980
- <a class="uk-navbar-toggle" uk-navbar-toggle-icon href="#"></a>
2981
- <div class="uk-navbar-dropdown" uk-drop="mode: click; cls-drop: uk-navbar-dropdown; pos: bottom-stretch; animate-out: true">
3059
+ <a class="uk-navbar-toggle uk-navbar-toggle-animate" uk-navbar-toggle-icon href="#"></a>
3060
+ <div class="uk-navbar-dropdown" uk-drop="mode: click; cls-drop: uk-navbar-dropdown; boundary: !.uk-navbar; stretch: x; flip: false">
2982
3061
  <ul class="uk-nav uk-navbar-dropdown-nav">
2983
3062
  <li class="uk-active"><a href="#">Active</a></li>
2984
3063
  <li class="uk-parent">
@@ -3001,7 +3080,7 @@
3001
3080
  </div>
3002
3081
  </nav>
3003
3082
 
3004
- <div class="uk-container">
3083
+ <div class="uk-container uk-margin-medium-top">
3005
3084
 
3006
3085
  <h2>JavaScript Options</h2>
3007
3086
 
@@ -3026,7 +3105,7 @@
3026
3105
  <td><code>mode</code></td>
3027
3106
  <td>hover | click</td>
3028
3107
  <td>click,hover</td>
3029
- <td>Comma separated list of dropdown trigger behaviour modes.</td>
3108
+ <td>Comma-separated list of dropdown trigger behavior modes.</td>
3030
3109
  </tr>
3031
3110
  <tr>
3032
3111
  <td><code>delay-show</code></td>
@@ -3042,15 +3121,27 @@
3042
3121
  </tr>
3043
3122
  <tr>
3044
3123
  <td><code>boundary</code></td>
3045
- <td>CSS selector</td>
3124
+ <td>Boolean, CSS selector</td>
3046
3125
  <td>true</td>
3047
3126
  <td>Referenced element to keep Drop's visibility. By default, it's the navbar component's element.</td>
3048
3127
  </tr>
3049
3128
  <tr>
3050
- <td><code>boundary-align</code></td>
3051
- <td>Boolean</td>
3129
+ <td><code>target</code></td>
3130
+ <td>Boolean, CSS selector</td>
3131
+ <td>false</td>
3132
+ <td>The element the drops are positioned to (`true` for window).</td>
3133
+ </tr>
3134
+ <tr>
3135
+ <td><code>target-x</code></td>
3136
+ <td>Boolean, CSS selector</td>
3052
3137
  <td>false</td>
3053
- <td>Align Drop to boundary.</td>
3138
+ <td>The element's X axis the drops are positioned to (`true` for window).</td>
3139
+ </tr>
3140
+ <tr>
3141
+ <td><code>target-y</code></td>
3142
+ <td>Boolean, CSS selector</td>
3143
+ <td>false</td>
3144
+ <td>The element's Y axis the drop are positioned to (`true` for window).</td>
3054
3145
  </tr>
3055
3146
  <tr>
3056
3147
  <td><code>cls-drop</code></td>
@@ -3099,24 +3190,30 @@
3099
3190
 
3100
3191
  <script>
3101
3192
 
3102
- var util = UIkit.util,
3103
- tracker = new util.MouseTracker(),
3104
- el = util.$('#js-mousetracker'),
3105
- target = util.$('#js-mousetarget'),
3106
- interval;
3193
+ const {$, addClass, on, removeClass, MouseTracker } = UIkit.util;
3194
+ const tracker = MouseTracker();
3195
+ const el = $('#js-mousetracker');
3196
+ const target = $('#js-mousetarget');
3197
+ let interval;
3107
3198
 
3108
- util.on(el, 'mouseenter', function () {
3199
+ on(el, 'mouseenter', () => {
3109
3200
  tracker.init();
3110
- interval = setInterval(function () {
3111
- target.textContent = tracker.movesTo(target.parentNode) ? 'Moves to' : 'Does not move to';
3112
- });
3201
+ interval = setInterval(() => target.textContent = tracker.movesTo(target.parentNode) ? 'Moves to' : 'Does not move to');
3113
3202
  });
3114
3203
 
3115
- util.on(el, 'mouseleave', function () {
3204
+ on(el, 'mouseleave', () => {
3116
3205
  tracker.cancel();
3117
3206
  clearInterval(interval);
3118
3207
  });
3119
3208
 
3209
+ on('#js-size-switcher', 'change', (e) => {
3210
+ const options = $$('option', e.target).map(({value}) => value);
3211
+ for (const el of $$('.uk-navbar-dropdown')) {
3212
+ removeClass(el, options);
3213
+ addClass(el, e.target.value);
3214
+ }
3215
+ });
3216
+
3120
3217
  </script>
3121
3218
 
3122
3219
  </body>