uikit 3.14.3 → 3.14.4-dev.07daf8fb8

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 (145) hide show
  1. package/CHANGELOG.md +54 -3
  2. package/build/util.js +1 -0
  3. package/dist/css/uikit-core-rtl.css +428 -95
  4. package/dist/css/uikit-core-rtl.min.css +1 -1
  5. package/dist/css/uikit-core.css +428 -95
  6. package/dist/css/uikit-core.min.css +1 -1
  7. package/dist/css/uikit-rtl.css +444 -108
  8. package/dist/css/uikit-rtl.min.css +1 -1
  9. package/dist/css/uikit.css +444 -108
  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 +203 -76
  16. package/dist/js/components/lightbox-panel.min.js +1 -1
  17. package/dist/js/components/lightbox.js +203 -76
  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 +22 -7
  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 +22 -7
  30. package/dist/js/components/slideshow.min.js +1 -1
  31. package/dist/js/components/sortable.js +3 -3
  32. package/dist/js/components/sortable.min.js +1 -1
  33. package/dist/js/components/tooltip.js +138 -76
  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 +1801 -1573
  38. package/dist/js/uikit-core.min.js +14 -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 +1081 -836
  42. package/dist/js/uikit.min.js +14 -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 +22 -3
  48. package/src/js/api/state.js +2 -2
  49. package/src/js/components/filter.js +5 -3
  50. package/src/js/components/sortable.js +2 -3
  51. package/src/js/core/accordion.js +9 -17
  52. package/src/js/core/alert.js +35 -14
  53. package/src/js/core/drop.js +102 -48
  54. package/src/js/core/height-viewport.js +22 -9
  55. package/src/js/core/icon.js +16 -0
  56. package/src/js/core/index.js +2 -0
  57. package/src/js/core/leader.js +2 -2
  58. package/src/js/core/navbar.js +47 -33
  59. package/src/js/core/offcanvas.js +1 -47
  60. package/src/js/core/scroll.js +37 -10
  61. package/src/js/core/sticky.js +8 -9
  62. package/src/js/core/switcher.js +1 -1
  63. package/src/js/mixin/media.js +4 -5
  64. package/src/js/mixin/modal.js +97 -8
  65. package/src/js/mixin/position.js +59 -14
  66. package/src/js/mixin/slider-drag.js +20 -8
  67. package/src/js/mixin/style.js +11 -0
  68. package/src/js/mixin/togglable.js +100 -72
  69. package/src/js/util/animation.js +5 -3
  70. package/src/js/util/dimensions.js +6 -6
  71. package/src/js/util/filter.js +3 -7
  72. package/src/js/util/position.js +43 -47
  73. package/src/js/util/style.js +4 -13
  74. package/src/js/util/viewport.js +21 -37
  75. package/src/less/components/_import.less +1 -0
  76. package/src/less/components/drop.less +3 -6
  77. package/src/less/components/dropbar.less +115 -0
  78. package/src/less/components/dropdown.less +22 -6
  79. package/src/less/components/leader.less +1 -1
  80. package/src/less/components/margin.less +13 -14
  81. package/src/less/components/modal.less +19 -4
  82. package/src/less/components/nav.less +241 -64
  83. package/src/less/components/navbar.less +111 -35
  84. package/src/less/components/offcanvas.less +21 -21
  85. package/src/less/components/position.less +1 -1
  86. package/src/less/components/utility.less +21 -5
  87. package/src/less/theme/_import.less +1 -0
  88. package/src/less/theme/dropbar.less +44 -0
  89. package/src/less/theme/nav.less +43 -9
  90. package/src/less/theme/navbar.less +9 -15
  91. package/src/scss/components/_import.scss +1 -0
  92. package/src/scss/components/drop.scss +3 -6
  93. package/src/scss/components/dropbar.scss +115 -0
  94. package/src/scss/components/dropdown.scss +22 -6
  95. package/src/scss/components/leader.scss +1 -1
  96. package/src/scss/components/margin.scss +13 -14
  97. package/src/scss/components/modal.scss +19 -4
  98. package/src/scss/components/nav.scss +190 -52
  99. package/src/scss/components/navbar.scss +88 -24
  100. package/src/scss/components/offcanvas.scss +21 -21
  101. package/src/scss/components/position.scss +1 -1
  102. package/src/scss/components/utility.scss +19 -4
  103. package/src/scss/mixins-theme.scss +93 -29
  104. package/src/scss/mixins.scss +89 -15
  105. package/src/scss/theme/_import.scss +1 -0
  106. package/src/scss/theme/dropbar.scss +44 -0
  107. package/src/scss/theme/nav.scss +41 -9
  108. package/src/scss/theme/navbar.scss +9 -3
  109. package/src/scss/variables-theme.scss +93 -25
  110. package/src/scss/variables.scss +82 -23
  111. package/tests/accordion.html +2 -2
  112. package/tests/alert.html +2 -2
  113. package/tests/countdown.html +1 -1
  114. package/tests/drop.html +484 -255
  115. package/tests/dropbar.html +456 -0
  116. package/tests/dropdown.html +29 -189
  117. package/tests/filter.html +9 -12
  118. package/tests/form.html +1 -1
  119. package/tests/height-viewport.html +62 -0
  120. package/tests/index.html +126 -107
  121. package/tests/js/index.js +1 -4
  122. package/tests/lightbox.html +5 -5
  123. package/tests/list.html +8 -8
  124. package/tests/modal.html +13 -13
  125. package/tests/nav.html +117 -75
  126. package/tests/navbar.html +2270 -1104
  127. package/tests/offcanvas.html +25 -29
  128. package/tests/parallax.html +1 -1
  129. package/tests/position.html +13 -24
  130. package/tests/progress.html +9 -9
  131. package/tests/scroll.html +7 -10
  132. package/tests/search.html +5 -5
  133. package/tests/slider.html +6 -5
  134. package/tests/slideshow.html +8 -8
  135. package/tests/sortable.html +6 -8
  136. package/tests/sticky-navbar.html +132 -0
  137. package/tests/sticky.html +8 -8
  138. package/tests/switcher.html +1 -1
  139. package/tests/tab.html +1 -1
  140. package/tests/table.html +7 -7
  141. package/tests/toggle.html +2 -2
  142. package/tests/tooltip.html +1 -1
  143. package/tests/upload.html +11 -11
  144. package/tests/utility.html +19 -0
  145. package/src/images/backgrounds/nav-parent-close.svg +0 -3
package/tests/navbar.html CHANGED
@@ -16,6 +16,12 @@
16
16
  margin-left: 0;
17
17
  }
18
18
 
19
+ .scroll-container {
20
+ border: 1px dashed rgba(0,0,0,0.2);
21
+ overflow: auto;
22
+ -webkit-overflow-scrolling: touch;
23
+ }
24
+
19
25
  </style>
20
26
  </head>
21
27
 
@@ -64,42 +70,6 @@
64
70
  </div>
65
71
  </nav>
66
72
 
67
- <nav class="uk-navbar-container uk-margin" uk-navbar>
68
- <div class="uk-navbar-left">
69
-
70
- <ul class="uk-navbar-nav uk-navbar-nav-primary">
71
- <li class="uk-active"><a href="#">Active</a></li>
72
- <li>
73
- <a href="#">Parent</a>
74
- <div class="uk-navbar-dropdown">
75
- <ul class="uk-nav uk-navbar-dropdown-nav">
76
- <li class="uk-active"><a href="#">Active</a></li>
77
- <li class="uk-parent">
78
- <a href="#">Parent</a>
79
- <ul class="uk-nav-sub">
80
- <li><a href="#">Sub item</a></li>
81
- <li><a href="#">Sub item</a></li>
82
- </ul>
83
- </li>
84
- <li class="uk-nav-header">Header</li>
85
- <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
86
- <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
87
- <li class="uk-nav-divider"></li>
88
- <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
89
- </ul>
90
- </div>
91
- </li>
92
- <li>
93
- <a href="#">Content</a>
94
- <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>
95
- </li>
96
- <li><a href="#">Item</a></li>
97
- <li><a href="#">Item</a></li>
98
- </ul>
99
-
100
- </div>
101
- </nav>
102
-
103
73
  <h2>Transparent</h2>
104
74
 
105
75
  <div class="uk-margin uk-position-relative uk-light">
@@ -110,7 +80,7 @@
110
80
  <ul class="uk-navbar-nav">
111
81
  <li class="uk-active"><a href="">Active</a></li>
112
82
  <li>
113
- <a href="">Parent</a>
83
+ <a href="">Parent <span uk-navbar-parent-icon></span></a>
114
84
  <div class="uk-navbar-dropdown">
115
85
  <ul class="uk-nav uk-navbar-dropdown-nav">
116
86
  <li class="uk-active"><a href="#">Active</a></li>
@@ -151,7 +121,7 @@
151
121
  <ul class="uk-navbar-nav">
152
122
  <li class="uk-active"><a href="">Active</a></li>
153
123
  <li>
154
- <a href="">Parent</a>
124
+ <a href="">Parent <span uk-navbar-parent-icon></span></a>
155
125
  <div class="uk-navbar-dropdown">
156
126
  <ul class="uk-nav uk-navbar-dropdown-nav">
157
127
  <li class="uk-active"><a href="#">Active</a></li>
@@ -224,7 +194,7 @@
224
194
 
225
195
  <div class="uk-navbar-dropdown test">
226
196
 
227
- <ul class="uk-nav uk-navbar-dropdown-nav">
197
+ <ul class="uk-nav uk-nav-secondary">
228
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>
229
199
  <li><a href="#"><div>Item<div class="uk-nav-subtitle">Subtitle lorem ipsum dolor sit amet, consectetur adipiscing.</div></div></a></li>
230
200
  <li><a href="#"><div>Item<div class="uk-nav-subtitle">Subtitle lorem ipsum dolor sit amet, consectetur adipiscing.</div></div></a></li>
@@ -236,780 +206,1588 @@
236
206
  </div>
237
207
  </div>
238
208
 
239
- <h2>Dropdown</h2>
209
+ <h2>Click</h2>
240
210
 
241
- <nav class="uk-navbar-container uk-margin" uk-navbar>
242
- <div class="uk-navbar-left">
211
+ </div>
243
212
 
244
- <ul class="uk-navbar-nav">
245
- <li>
246
- <a href="#">Hover</a>
247
- <div class="uk-navbar-dropdown">
248
- <ul class="uk-nav uk-navbar-dropdown-nav">
249
- <li class="uk-active"><a href="#">Active</a></li>
250
- <li class="uk-parent">
251
- <a href="#">Parent</a>
252
- <ul class="uk-nav-sub">
253
- <li><a href="#">Sub item</a></li>
254
- <li><a href="#">Sub item</a></li>
255
- </ul>
256
- </li>
257
- <li class="uk-nav-header">Header</li>
258
- <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
259
- <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
260
- <li class="uk-nav-divider"></li>
261
- <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
262
- </ul>
263
- </div>
264
- </li>
265
- <li>
266
- <a href="#">2 Columns</a>
267
- <div class="uk-navbar-dropdown uk-navbar-dropdown-width-2">
268
- <div class="uk-navbar-dropdown-grid uk-child-width-1-2" uk-grid>
269
- <div>
270
- <ul class="uk-nav uk-navbar-dropdown-nav">
271
- <li class="uk-active"><a href="#">Active</a></li>
272
- <li class="uk-parent"><a href="#">Parent</a></li>
273
- <li class="uk-nav-header">Header</li>
274
- <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
275
- <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
276
- <li class="uk-nav-divider"></li>
277
- <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
278
- </ul>
279
- </div>
280
- <div>
281
- <ul class="uk-nav uk-navbar-dropdown-nav">
282
- <li class="uk-active"><a href="#">Active</a></li>
283
- <li class="uk-parent"><a href="#">Parent</a></li>
284
- <li class="uk-nav-header">Header</li>
285
- <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
286
- <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
287
- <li class="uk-nav-divider"></li>
288
- <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
289
- </ul>
290
- </div>
291
- </div>
292
- </div>
293
- </li>
294
- <li>
295
- <a href="#">3 Columns</a>
296
- <div class="uk-navbar-dropdown uk-navbar-dropdown-width-3">
297
- <div class="uk-navbar-dropdown-grid uk-child-width-1-3" uk-grid>
298
- <div>
299
- <ul class="uk-nav uk-navbar-dropdown-nav">
300
- <li class="uk-active"><a href="#">Active</a></li>
301
- <li class="uk-parent"><a href="#">Parent</a></li>
302
- <li class="uk-nav-header">Header</li>
303
- <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
304
- <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
305
- </ul>
306
- </div>
307
- <div>
308
- <ul class="uk-nav uk-navbar-dropdown-nav">
309
- <li class="uk-active"><a href="#">Active</a></li>
310
- <li class="uk-parent"><a href="#">Parent</a></li>
311
- <li class="uk-nav-header">Header</li>
312
- <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
313
- <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
314
- </ul>
315
- </div>
316
- <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
317
- </div>
318
- </div>
319
- </li>
320
- <li>
321
- <a href="#">Justify</a>
322
- <div class="uk-navbar-dropdown" uk-drop="cls-drop: uk-navbar-dropdown; boundary: !nav; boundary-align: true; pos: bottom-justify; flip: x">
323
- <div class="uk-navbar-dropdown-grid uk-child-width-1-3@m" uk-grid>
324
- <div>
325
- <ul class="uk-nav uk-navbar-dropdown-nav">
326
- <li class="uk-active"><a href="#">Active</a></li>
327
- <li class="uk-parent">
328
- <a href="#">Parent</a>
329
- <ul class="uk-nav-sub">
330
- <li><a href="#">Sub item</a></li>
331
- <li><a href="#">Sub item</a></li>
332
- </ul>
333
- </li>
334
- <li class="uk-nav-header">Header</li>
335
- <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
336
- <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
337
- <li class="uk-nav-divider"></li>
338
- <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
339
- </ul>
340
- </div>
341
- <div>
342
- <ul class="uk-nav uk-navbar-dropdown-nav">
343
- <li class="uk-active"><a href="#">Active</a></li>
213
+ <nav class="uk-navbar-container uk-margin">
214
+ <div class="uk-container">
215
+ <div uk-navbar="mode: click">
216
+ <div class="uk-navbar-left">
217
+
218
+ <ul class="uk-navbar-nav">
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>
344
225
  <li class="uk-parent">
345
- <a href="#">Parent</a>
346
- <ul class="uk-nav-sub">
347
- <li><a href="#">Sub item</a></li>
348
- <li><a href="#">Sub item</a></li>
349
- </ul>
350
- </li>
351
- <li class="uk-nav-header">Header</li>
352
- <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
353
- <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
354
- <li class="uk-nav-divider"></li>
355
- <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
356
- </ul>
357
- </div>
358
- <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
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>
359
238
  </div>
360
- </div>
361
- </li>
362
- </ul>
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>
363
247
 
248
+ </div>
364
249
  </div>
365
- <div class="uk-navbar-right">
250
+ </div>
251
+ </nav>
366
252
 
367
- <ul class="uk-navbar-nav">
368
- <li>
369
- <a href="#">Right</a>
370
- <div class="uk-navbar-dropdown">
371
- <ul class="uk-nav uk-navbar-dropdown-nav">
372
- <li class="uk-active"><a href="#">Active</a></li>
373
- <li class="uk-parent">
374
- <a href="#">Parent</a>
375
- <ul class="uk-nav-sub">
376
- <li><a href="#">Sub item</a></li>
377
- <li><a href="#">Sub item</a></li>
378
- </ul>
379
- </li>
380
- <li class="uk-nav-header">Header</li>
381
- <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
382
- <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
383
- <li class="uk-nav-divider"></li>
384
- <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
385
- </ul>
386
- </div>
387
- </li>
388
- </ul>
253
+ <div class="uk-container uk-margin-medium-top">
389
254
 
390
- </div>
391
- </nav>
255
+ <h2>Dropdown</h2>
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>
392
263
 
393
- <nav class="uk-navbar-container uk-margin" uk-navbar="mode: click">
394
- <div class="uk-navbar-left">
264
+ </div>
395
265
 
396
- <ul class="uk-navbar-nav">
397
- <li>
398
- <a href="#">Click</a>
399
- <div class="uk-navbar-dropdown">
400
- <ul class="uk-nav uk-navbar-dropdown-nav">
401
- <li class="uk-active"><a href="#">Active</a></li>
402
- <li class="uk-parent">
403
- <a href="#">Parent</a>
404
- <ul class="uk-nav-sub">
405
- <li><a href="#">Sub item</a></li>
406
- <li><a href="#">Sub item</a></li>
407
- </ul>
408
- </li>
409
- <li class="uk-nav-header">Header</li>
410
- <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
411
- <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
412
- <li class="uk-nav-divider"></li>
413
- <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
414
- </ul>
415
- </div>
416
- </li>
417
- <li>
418
- <a href="#">2 Columns</a>
419
- <div class="uk-navbar-dropdown uk-navbar-dropdown-width-2">
420
- <div class="uk-navbar-dropdown-grid uk-child-width-1-2" uk-grid>
421
- <div>
422
- <ul class="uk-nav uk-navbar-dropdown-nav">
423
- <li class="uk-active"><a href="#">Active</a></li>
424
- <li class="uk-parent"><a href="#">Parent</a></li>
425
- <li class="uk-nav-header">Header</li>
426
- <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
427
- <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
428
- <li class="uk-nav-divider"></li>
429
- <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
430
- </ul>
431
- </div>
432
- <div>
433
- <ul class="uk-nav uk-navbar-dropdown-nav">
434
- <li class="uk-active"><a href="#">Active</a></li>
435
- <li class="uk-parent"><a href="#">Parent</a></li>
436
- <li class="uk-nav-header">Header</li>
437
- <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
438
- <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
439
- <li class="uk-nav-divider"></li>
440
- <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
441
- </ul>
442
- </div>
266
+ <nav class="uk-navbar-container uk-margin">
267
+ <div class="uk-container">
268
+ <div uk-navbar>
269
+ <div class="uk-navbar-left">
270
+
271
+ <ul class="uk-navbar-nav">
272
+ <li class="uk-active">
273
+ <a href="#">Left</a>
274
+ <div class="uk-navbar-dropdown">
275
+ <ul class="uk-nav uk-navbar-dropdown-nav">
276
+ <li class="uk-active"><a href="#">Active</a></li>
277
+ <li class="uk-parent">
278
+ <a href="#">Parent</a>
279
+ <ul class="uk-nav-sub">
280
+ <li><a href="#">Sub item</a></li>
281
+ <li><a href="#">Sub item</a></li>
282
+ </ul>
283
+ </li>
284
+ <li class="uk-nav-header">Header</li>
285
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
286
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
287
+ <li class="uk-nav-divider"></li>
288
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
289
+ </ul>
443
290
  </div>
444
- </div>
445
- </li>
446
- <li>
447
- <a href="#">3 Columns</a>
448
- <div class="uk-navbar-dropdown uk-navbar-dropdown-width-3">
449
- <div class="uk-navbar-dropdown-grid uk-child-width-1-3" uk-grid>
450
- <div>
451
- <ul class="uk-nav uk-navbar-dropdown-nav">
452
- <li class="uk-active"><a href="#">Active</a></li>
453
- <li class="uk-parent"><a href="#">Parent</a></li>
454
- <li class="uk-nav-header">Header</li>
455
- <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
456
- <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
457
- </ul>
458
- </div>
459
- <div>
460
- <ul class="uk-nav uk-navbar-dropdown-nav">
461
- <li class="uk-active"><a href="#">Active</a></li>
462
- <li class="uk-parent"><a href="#">Parent</a></li>
463
- <li class="uk-nav-header">Header</li>
464
- <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
465
- <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
466
- </ul>
291
+ </li>
292
+ <li>
293
+ <a href="#">2 Columns</a>
294
+ <div class="uk-navbar-dropdown uk-navbar-dropdown-width-2">
295
+ <div class="uk-navbar-dropdown-grid uk-child-width-1-2" uk-grid>
296
+ <div>
297
+ <ul class="uk-nav uk-navbar-dropdown-nav">
298
+ <li class="uk-active"><a href="#">Active</a></li>
299
+ <li class="uk-parent"><a href="#">Parent</a></li>
300
+ <li class="uk-nav-header">Header</li>
301
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
302
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
303
+ <li class="uk-nav-divider"></li>
304
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
305
+ </ul>
306
+ </div>
307
+ <div>
308
+ <ul class="uk-nav uk-navbar-dropdown-nav">
309
+ <li class="uk-active"><a href="#">Active</a></li>
310
+ <li class="uk-parent"><a href="#">Parent</a></li>
311
+ <li class="uk-nav-header">Header</li>
312
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
313
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
314
+ <li class="uk-nav-divider"></li>
315
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
316
+ </ul>
317
+ </div>
467
318
  </div>
468
- <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
469
319
  </div>
470
- </div>
471
- </li>
472
- <li>
473
- <a href="#">Justify</a>
474
- <div class="uk-navbar-dropdown" uk-drop="cls-drop: uk-navbar-dropdown; boundary: !nav; boundary-align: true; pos: bottom-justify; flip: x; mode: click">
475
- <div class="uk-navbar-dropdown-grid uk-child-width-1-3@m" uk-grid>
476
- <div>
477
- <ul class="uk-nav uk-navbar-dropdown-nav">
478
- <li class="uk-active"><a href="#">Active</a></li>
479
- <li class="uk-parent">
480
- <a href="#">Parent</a>
481
- <ul class="uk-nav-sub">
482
- <li><a href="#">Sub item</a></li>
483
- <li><a href="#">Sub item</a></li>
484
- </ul>
485
- </li>
486
- <li class="uk-nav-header">Header</li>
487
- <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
488
- <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
489
- <li class="uk-nav-divider"></li>
490
- <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
491
- </ul>
320
+ </li>
321
+ <li>
322
+ <a href="#">3 Columns</a>
323
+ <div class="uk-navbar-dropdown uk-navbar-dropdown-width-3">
324
+ <div class="uk-navbar-dropdown-grid uk-child-width-1-3" uk-grid>
325
+ <div>
326
+ <ul class="uk-nav uk-navbar-dropdown-nav">
327
+ <li class="uk-active"><a href="#">Active</a></li>
328
+ <li class="uk-parent"><a href="#">Parent</a></li>
329
+ <li class="uk-nav-header">Header</li>
330
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
331
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
332
+ </ul>
333
+ </div>
334
+ <div>
335
+ <ul class="uk-nav uk-navbar-dropdown-nav">
336
+ <li class="uk-active"><a href="#">Active</a></li>
337
+ <li class="uk-parent"><a href="#">Parent</a></li>
338
+ <li class="uk-nav-header">Header</li>
339
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
340
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
341
+ </ul>
342
+ </div>
343
+ <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
344
+ </div>
345
+ </div>
346
+ </li>
347
+ <li>
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">
350
+ <div class="uk-navbar-dropdown-grid uk-child-width-1-3@m" uk-grid>
351
+ <div>
352
+ <ul class="uk-nav uk-navbar-dropdown-nav">
353
+ <li class="uk-active"><a href="#">Active</a></li>
354
+ <li class="uk-parent">
355
+ <a href="#">Parent</a>
356
+ <ul class="uk-nav-sub">
357
+ <li><a href="#">Sub item</a></li>
358
+ <li><a href="#">Sub item</a></li>
359
+ </ul>
360
+ </li>
361
+ <li class="uk-nav-header">Header</li>
362
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
363
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
364
+ <li class="uk-nav-divider"></li>
365
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
366
+ </ul>
367
+ </div>
368
+ <div>
369
+ <ul class="uk-nav uk-navbar-dropdown-nav">
370
+ <li class="uk-active"><a href="#">Active</a></li>
371
+ <li class="uk-parent">
372
+ <a href="#">Parent</a>
373
+ <ul class="uk-nav-sub">
374
+ <li><a href="#">Sub item</a></li>
375
+ <li><a href="#">Sub item</a></li>
376
+ </ul>
377
+ </li>
378
+ <li class="uk-nav-header">Header</li>
379
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
380
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
381
+ <li class="uk-nav-divider"></li>
382
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
383
+ </ul>
384
+ </div>
385
+ <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
386
+ </div>
387
+ </div>
388
+ </li>
389
+ <li>
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">
392
+ <div class="uk-navbar-dropdown-grid uk-child-width-1-3@m" uk-grid>
393
+ <div>
394
+ <ul class="uk-nav uk-navbar-dropdown-nav">
395
+ <li class="uk-active"><a href="#">Active</a></li>
396
+ <li class="uk-parent">
397
+ <a href="#">Parent</a>
398
+ <ul class="uk-nav-sub">
399
+ <li><a href="#">Sub item</a></li>
400
+ <li><a href="#">Sub item</a></li>
401
+ </ul>
402
+ </li>
403
+ <li class="uk-nav-header">Header</li>
404
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
405
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
406
+ <li class="uk-nav-divider"></li>
407
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
408
+ </ul>
409
+ </div>
410
+ <div>
411
+ <ul class="uk-nav uk-navbar-dropdown-nav">
412
+ <li class="uk-active"><a href="#">Active</a></li>
413
+ <li class="uk-parent">
414
+ <a href="#">Parent</a>
415
+ <ul class="uk-nav-sub">
416
+ <li><a href="#">Sub item</a></li>
417
+ <li><a href="#">Sub item</a></li>
418
+ </ul>
419
+ </li>
420
+ <li class="uk-nav-header">Header</li>
421
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
422
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
423
+ <li class="uk-nav-divider"></li>
424
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
425
+ </ul>
426
+ </div>
427
+ <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
428
+ </div>
429
+ </div>
430
+ </li>
431
+ </ul>
432
+
433
+ </div>
434
+ <div class="uk-navbar-right">
435
+
436
+ <ul class="uk-navbar-nav">
437
+ <li>
438
+ <a href="#">1 Column</a>
439
+ <div class="uk-navbar-dropdown">
440
+ <ul class="uk-nav uk-navbar-dropdown-nav">
441
+ <li class="uk-active"><a href="#">Active</a></li>
442
+ <li class="uk-parent">
443
+ <a href="#">Parent</a>
444
+ <ul class="uk-nav-sub">
445
+ <li><a href="#">Sub item</a></li>
446
+ <li><a href="#">Sub item</a></li>
447
+ </ul>
448
+ </li>
449
+ <li class="uk-nav-header">Header</li>
450
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
451
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
452
+ <li class="uk-nav-divider"></li>
453
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
454
+ </ul>
455
+ </div>
456
+ </li>
457
+ </ul>
458
+
459
+ </div>
460
+ </div>
461
+ </div>
462
+ </nav>
463
+
464
+ <nav class="uk-navbar-container uk-margin">
465
+ <div class="uk-container">
466
+ <div uk-navbar="align: right">
467
+ <div class="uk-navbar-left">
468
+
469
+ <ul class="uk-navbar-nav">
470
+ <li>
471
+ <a href="#">1 Column</a>
472
+ <div class="uk-navbar-dropdown">
473
+ <ul class="uk-nav uk-navbar-dropdown-nav">
474
+ <li class="uk-active"><a href="#">Active</a></li>
475
+ <li class="uk-parent">
476
+ <a href="#">Parent</a>
477
+ <ul class="uk-nav-sub">
478
+ <li><a href="#">Sub item</a></li>
479
+ <li><a href="#">Sub item</a></li>
480
+ </ul>
481
+ </li>
482
+ <li class="uk-nav-header">Header</li>
483
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
484
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
485
+ <li class="uk-nav-divider"></li>
486
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
487
+ </ul>
488
+ </div>
489
+ </li>
490
+ </ul>
491
+
492
+ </div>
493
+ <div class="uk-navbar-right">
494
+
495
+ <ul class="uk-navbar-nav">
496
+ <li class="uk-active">
497
+ <a href="#">Right</a>
498
+ <div class="uk-navbar-dropdown">
499
+ <ul class="uk-nav uk-navbar-dropdown-nav">
500
+ <li class="uk-active"><a href="#">Active</a></li>
501
+ <li class="uk-parent">
502
+ <a href="#">Parent</a>
503
+ <ul class="uk-nav-sub">
504
+ <li><a href="#">Sub item</a></li>
505
+ <li><a href="#">Sub item</a></li>
506
+ </ul>
507
+ </li>
508
+ <li class="uk-nav-header">Header</li>
509
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
510
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
511
+ <li class="uk-nav-divider"></li>
512
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
513
+ </ul>
514
+ </div>
515
+ </li>
516
+ <li>
517
+ <a href="#">2 Columns</a>
518
+ <div class="uk-navbar-dropdown uk-navbar-dropdown-width-2">
519
+ <div class="uk-navbar-dropdown-grid uk-child-width-1-2" uk-grid>
520
+ <div>
521
+ <ul class="uk-nav uk-navbar-dropdown-nav">
522
+ <li class="uk-active"><a href="#">Active</a></li>
523
+ <li class="uk-parent"><a href="#">Parent</a></li>
524
+ <li class="uk-nav-header">Header</li>
525
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
526
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
527
+ <li class="uk-nav-divider"></li>
528
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
529
+ </ul>
530
+ </div>
531
+ <div>
532
+ <ul class="uk-nav uk-navbar-dropdown-nav">
533
+ <li class="uk-active"><a href="#">Active</a></li>
534
+ <li class="uk-parent"><a href="#">Parent</a></li>
535
+ <li class="uk-nav-header">Header</li>
536
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
537
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
538
+ <li class="uk-nav-divider"></li>
539
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
540
+ </ul>
541
+ </div>
542
+ </div>
543
+ </div>
544
+ </li>
545
+ <li>
546
+ <a href="#">3 Columns</a>
547
+ <div class="uk-navbar-dropdown uk-navbar-dropdown-width-3">
548
+ <div class="uk-navbar-dropdown-grid uk-child-width-1-3" uk-grid>
549
+ <div>
550
+ <ul class="uk-nav uk-navbar-dropdown-nav">
551
+ <li class="uk-active"><a href="#">Active</a></li>
552
+ <li class="uk-parent"><a href="#">Parent</a></li>
553
+ <li class="uk-nav-header">Header</li>
554
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
555
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
556
+ </ul>
557
+ </div>
558
+ <div>
559
+ <ul class="uk-nav uk-navbar-dropdown-nav">
560
+ <li class="uk-active"><a href="#">Active</a></li>
561
+ <li class="uk-parent"><a href="#">Parent</a></li>
562
+ <li class="uk-nav-header">Header</li>
563
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
564
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
565
+ </ul>
566
+ </div>
567
+ <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
568
+ </div>
569
+ </div>
570
+ </li>
571
+ <li>
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">
574
+ <div class="uk-navbar-dropdown-grid uk-child-width-1-3@m" uk-grid>
575
+ <div>
576
+ <ul class="uk-nav uk-navbar-dropdown-nav">
577
+ <li class="uk-active"><a href="#">Active</a></li>
578
+ <li class="uk-parent">
579
+ <a href="#">Parent</a>
580
+ <ul class="uk-nav-sub">
581
+ <li><a href="#">Sub item</a></li>
582
+ <li><a href="#">Sub item</a></li>
583
+ </ul>
584
+ </li>
585
+ <li class="uk-nav-header">Header</li>
586
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
587
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
588
+ <li class="uk-nav-divider"></li>
589
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
590
+ </ul>
591
+ </div>
592
+ <div>
593
+ <ul class="uk-nav uk-navbar-dropdown-nav">
594
+ <li class="uk-active"><a href="#">Active</a></li>
595
+ <li class="uk-parent">
596
+ <a href="#">Parent</a>
597
+ <ul class="uk-nav-sub">
598
+ <li><a href="#">Sub item</a></li>
599
+ <li><a href="#">Sub item</a></li>
600
+ </ul>
601
+ </li>
602
+ <li class="uk-nav-header">Header</li>
603
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
604
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
605
+ <li class="uk-nav-divider"></li>
606
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
607
+ </ul>
608
+ </div>
609
+ <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
610
+ </div>
611
+ </div>
612
+ </li>
613
+ </ul>
614
+
615
+ </div>
616
+ </div>
617
+ </div>
618
+ </nav>
619
+
620
+ <nav class="uk-navbar-container uk-margin">
621
+ <div class="uk-container">
622
+ <div uk-navbar="align: center">
623
+ <div class="uk-navbar-left">
624
+
625
+ <ul class="uk-navbar-nav">
626
+ <li>
627
+ <a href="#">1 Column</a>
628
+ <div class="uk-navbar-dropdown">
629
+ <ul class="uk-nav uk-navbar-dropdown-nav">
630
+ <li class="uk-active"><a href="#">Active</a></li>
631
+ <li class="uk-parent">
632
+ <a href="#">Parent</a>
633
+ <ul class="uk-nav-sub">
634
+ <li><a href="#">Sub item</a></li>
635
+ <li><a href="#">Sub item</a></li>
636
+ </ul>
637
+ </li>
638
+ <li class="uk-nav-header">Header</li>
639
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
640
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
641
+ <li class="uk-nav-divider"></li>
642
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
643
+ </ul>
644
+ </div>
645
+ </li>
646
+ </ul>
647
+
648
+ </div>
649
+ <div class="uk-navbar-center">
650
+
651
+ <ul class="uk-navbar-nav">
652
+ <li class="uk-active">
653
+ <a href="#">Center</a>
654
+ <div class="uk-navbar-dropdown">
655
+ <ul class="uk-nav uk-navbar-dropdown-nav">
656
+ <li class="uk-active"><a href="#">Active</a></li>
657
+ <li class="uk-parent">
658
+ <a href="#">Parent</a>
659
+ <ul class="uk-nav-sub">
660
+ <li><a href="#">Sub item</a></li>
661
+ <li><a href="#">Sub item</a></li>
662
+ </ul>
663
+ </li>
664
+ <li class="uk-nav-header">Header</li>
665
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
666
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
667
+ <li class="uk-nav-divider"></li>
668
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
669
+ </ul>
670
+ </div>
671
+ </li>
672
+ <li>
673
+ <a href="#">2 Columns</a>
674
+ <div class="uk-navbar-dropdown uk-navbar-dropdown-width-2">
675
+ <div class="uk-navbar-dropdown-grid uk-child-width-1-2" uk-grid>
676
+ <div>
677
+ <ul class="uk-nav uk-navbar-dropdown-nav">
678
+ <li class="uk-active"><a href="#">Active</a></li>
679
+ <li class="uk-parent"><a href="#">Parent</a></li>
680
+ <li class="uk-nav-header">Header</li>
681
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
682
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
683
+ <li class="uk-nav-divider"></li>
684
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
685
+ </ul>
686
+ </div>
687
+ <div>
688
+ <ul class="uk-nav uk-navbar-dropdown-nav">
689
+ <li class="uk-active"><a href="#">Active</a></li>
690
+ <li class="uk-parent"><a href="#">Parent</a></li>
691
+ <li class="uk-nav-header">Header</li>
692
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
693
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
694
+ <li class="uk-nav-divider"></li>
695
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
696
+ </ul>
697
+ </div>
698
+ </div>
699
+ </div>
700
+ </li>
701
+ <li>
702
+ <a href="#">3 Columns</a>
703
+ <div class="uk-navbar-dropdown uk-navbar-dropdown-width-3">
704
+ <div class="uk-navbar-dropdown-grid uk-child-width-1-3" uk-grid>
705
+ <div>
706
+ <ul class="uk-nav uk-navbar-dropdown-nav">
707
+ <li class="uk-active"><a href="#">Active</a></li>
708
+ <li class="uk-parent"><a href="#">Parent</a></li>
709
+ <li class="uk-nav-header">Header</li>
710
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
711
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
712
+ </ul>
713
+ </div>
714
+ <div>
715
+ <ul class="uk-nav uk-navbar-dropdown-nav">
716
+ <li class="uk-active"><a href="#">Active</a></li>
717
+ <li class="uk-parent"><a href="#">Parent</a></li>
718
+ <li class="uk-nav-header">Header</li>
719
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
720
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
721
+ </ul>
722
+ </div>
723
+ <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
724
+ </div>
725
+ </div>
726
+ </li>
727
+ <li>
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">
730
+ <div class="uk-navbar-dropdown-grid uk-child-width-1-3@m" uk-grid>
731
+ <div>
732
+ <ul class="uk-nav uk-navbar-dropdown-nav">
733
+ <li class="uk-active"><a href="#">Active</a></li>
734
+ <li class="uk-parent">
735
+ <a href="#">Parent</a>
736
+ <ul class="uk-nav-sub">
737
+ <li><a href="#">Sub item</a></li>
738
+ <li><a href="#">Sub item</a></li>
739
+ </ul>
740
+ </li>
741
+ <li class="uk-nav-header">Header</li>
742
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
743
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
744
+ <li class="uk-nav-divider"></li>
745
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
746
+ </ul>
747
+ </div>
748
+ <div>
749
+ <ul class="uk-nav uk-navbar-dropdown-nav">
750
+ <li class="uk-active"><a href="#">Active</a></li>
751
+ <li class="uk-parent">
752
+ <a href="#">Parent</a>
753
+ <ul class="uk-nav-sub">
754
+ <li><a href="#">Sub item</a></li>
755
+ <li><a href="#">Sub item</a></li>
756
+ </ul>
757
+ </li>
758
+ <li class="uk-nav-header">Header</li>
759
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
760
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
761
+ <li class="uk-nav-divider"></li>
762
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
763
+ </ul>
764
+ </div>
765
+ <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
766
+ </div>
767
+ </div>
768
+ </li>
769
+ </ul>
770
+
771
+ </div>
772
+ <div class="uk-navbar-right">
773
+
774
+ <ul class="uk-navbar-nav">
775
+ <li>
776
+ <a href="#">1 Column</a>
777
+ <div class="uk-navbar-dropdown">
778
+ <ul class="uk-nav uk-navbar-dropdown-nav">
779
+ <li class="uk-active"><a href="#">Active</a></li>
780
+ <li class="uk-parent">
781
+ <a href="#">Parent</a>
782
+ <ul class="uk-nav-sub">
783
+ <li><a href="#">Sub item</a></li>
784
+ <li><a href="#">Sub item</a></li>
785
+ </ul>
786
+ </li>
787
+ <li class="uk-nav-header">Header</li>
788
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
789
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
790
+ <li class="uk-nav-divider"></li>
791
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
792
+ </ul>
793
+ </div>
794
+ </li>
795
+ </ul>
796
+
797
+ </div>
798
+ </div>
799
+ </div>
800
+ </nav>
801
+
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>
974
+
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>
1009
+
1010
+ </div>
1011
+
1012
+ <nav class="uk-navbar-container uk-margin">
1013
+ <div class="uk-container">
1014
+
1015
+ <div uk-navbar="boundary-align: true">
1016
+ <div class="uk-navbar-left">
1017
+
1018
+ <ul class="uk-navbar-nav">
1019
+ <li class="uk-active">
1020
+ <a href="#">Left</a>
1021
+ <div class="uk-navbar-dropdown">
1022
+ <ul class="uk-nav uk-navbar-dropdown-nav">
1023
+ <li class="uk-active"><a href="#">Active</a></li>
1024
+ <li class="uk-parent">
1025
+ <a href="#">Parent</a>
1026
+ <ul class="uk-nav-sub">
1027
+ <li><a href="#">Sub item</a></li>
1028
+ <li><a href="#">Sub item</a></li>
1029
+ </ul>
1030
+ </li>
1031
+ <li class="uk-nav-header">Header</li>
1032
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
1033
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
1034
+ <li class="uk-nav-divider"></li>
1035
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
1036
+ </ul>
1037
+ </div>
1038
+ </li>
1039
+ <li>
1040
+ <a href="#">2 Columns</a>
1041
+ <div class="uk-navbar-dropdown uk-navbar-dropdown-width-2">
1042
+ <div class="uk-navbar-dropdown-grid uk-child-width-1-2" uk-grid>
1043
+ <div>
1044
+ <ul class="uk-nav uk-navbar-dropdown-nav">
1045
+ <li class="uk-active"><a href="#">Active</a></li>
1046
+ <li class="uk-parent"><a href="#">Parent</a></li>
1047
+ <li class="uk-nav-header">Header</li>
1048
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
1049
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
1050
+ <li class="uk-nav-divider"></li>
1051
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
1052
+ </ul>
1053
+ </div>
1054
+ <div>
1055
+ <ul class="uk-nav uk-navbar-dropdown-nav">
1056
+ <li class="uk-active"><a href="#">Active</a></li>
1057
+ <li class="uk-parent"><a href="#">Parent</a></li>
1058
+ <li class="uk-nav-header">Header</li>
1059
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
1060
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
1061
+ <li class="uk-nav-divider"></li>
1062
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
1063
+ </ul>
1064
+ </div>
1065
+ </div>
1066
+ </div>
1067
+ </li>
1068
+ <li>
1069
+ <a href="#">3 Columns</a>
1070
+ <div class="uk-navbar-dropdown uk-navbar-dropdown-width-3">
1071
+ <div class="uk-navbar-dropdown-grid uk-child-width-1-3" uk-grid>
1072
+ <div>
1073
+ <ul class="uk-nav uk-navbar-dropdown-nav">
1074
+ <li class="uk-active"><a href="#">Active</a></li>
1075
+ <li class="uk-parent"><a href="#">Parent</a></li>
1076
+ <li class="uk-nav-header">Header</li>
1077
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
1078
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
1079
+ </ul>
1080
+ </div>
1081
+ <div>
1082
+ <ul class="uk-nav uk-navbar-dropdown-nav">
1083
+ <li class="uk-active"><a href="#">Active</a></li>
1084
+ <li class="uk-parent"><a href="#">Parent</a></li>
1085
+ <li class="uk-nav-header">Header</li>
1086
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
1087
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
1088
+ </ul>
1089
+ </div>
1090
+ <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
1091
+ </div>
1092
+ </div>
1093
+ </li>
1094
+ <li>
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">
1097
+ <div class="uk-navbar-dropdown-grid uk-child-width-1-3@m" uk-grid>
1098
+ <div>
1099
+ <ul class="uk-nav uk-navbar-dropdown-nav">
1100
+ <li class="uk-active"><a href="#">Active</a></li>
1101
+ <li class="uk-parent">
1102
+ <a href="#">Parent</a>
1103
+ <ul class="uk-nav-sub">
1104
+ <li><a href="#">Sub item</a></li>
1105
+ <li><a href="#">Sub item</a></li>
1106
+ </ul>
1107
+ </li>
1108
+ <li class="uk-nav-header">Header</li>
1109
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
1110
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
1111
+ <li class="uk-nav-divider"></li>
1112
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
1113
+ </ul>
1114
+ </div>
1115
+ <div>
1116
+ <ul class="uk-nav uk-navbar-dropdown-nav">
1117
+ <li class="uk-active"><a href="#">Active</a></li>
1118
+ <li class="uk-parent">
1119
+ <a href="#">Parent</a>
1120
+ <ul class="uk-nav-sub">
1121
+ <li><a href="#">Sub item</a></li>
1122
+ <li><a href="#">Sub item</a></li>
1123
+ </ul>
1124
+ </li>
1125
+ <li class="uk-nav-header">Header</li>
1126
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
1127
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
1128
+ <li class="uk-nav-divider"></li>
1129
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
1130
+ </ul>
1131
+ </div>
1132
+ <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
1133
+ </div>
1134
+ </div>
1135
+ </li>
1136
+ <li>
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">
1139
+ <div class="uk-navbar-dropdown-grid uk-child-width-1-3@m" uk-grid>
1140
+ <div>
1141
+ <ul class="uk-nav uk-navbar-dropdown-nav">
1142
+ <li class="uk-active"><a href="#">Active</a></li>
1143
+ <li class="uk-parent">
1144
+ <a href="#">Parent</a>
1145
+ <ul class="uk-nav-sub">
1146
+ <li><a href="#">Sub item</a></li>
1147
+ <li><a href="#">Sub item</a></li>
1148
+ </ul>
1149
+ </li>
1150
+ <li class="uk-nav-header">Header</li>
1151
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
1152
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
1153
+ <li class="uk-nav-divider"></li>
1154
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
1155
+ </ul>
1156
+ </div>
1157
+ <div>
1158
+ <ul class="uk-nav uk-navbar-dropdown-nav">
1159
+ <li class="uk-active"><a href="#">Active</a></li>
1160
+ <li class="uk-parent">
1161
+ <a href="#">Parent</a>
1162
+ <ul class="uk-nav-sub">
1163
+ <li><a href="#">Sub item</a></li>
1164
+ <li><a href="#">Sub item</a></li>
1165
+ </ul>
1166
+ </li>
1167
+ <li class="uk-nav-header">Header</li>
1168
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
1169
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
1170
+ <li class="uk-nav-divider"></li>
1171
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
1172
+ </ul>
1173
+ </div>
1174
+ <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
492
1175
  </div>
493
- <div>
494
- <ul class="uk-nav uk-navbar-dropdown-nav">
495
- <li class="uk-active"><a href="#">Active</a></li>
1176
+ </div>
1177
+ </li>
1178
+ </ul>
1179
+
1180
+ </div>
1181
+ <div class="uk-navbar-right">
1182
+
1183
+ <ul class="uk-navbar-nav">
1184
+ <li>
1185
+ <a href="#">1 Column</a>
1186
+ <div class="uk-navbar-dropdown">
1187
+ <ul class="uk-nav uk-navbar-dropdown-nav">
1188
+ <li class="uk-active"><a href="#">Active</a></li>
496
1189
  <li class="uk-parent">
497
- <a href="#">Parent</a>
498
- <ul class="uk-nav-sub">
499
- <li><a href="#">Sub item</a></li>
500
- <li><a href="#">Sub item</a></li>
501
- </ul>
502
- </li>
503
- <li class="uk-nav-header">Header</li>
504
- <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
505
- <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
506
- <li class="uk-nav-divider"></li>
507
- <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
508
- </ul>
509
- </div>
510
- <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
1190
+ <a href="#">Parent</a>
1191
+ <ul class="uk-nav-sub">
1192
+ <li><a href="#">Sub item</a></li>
1193
+ <li><a href="#">Sub item</a></li>
1194
+ </ul>
1195
+ </li>
1196
+ <li class="uk-nav-header">Header</li>
1197
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
1198
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
1199
+ <li class="uk-nav-divider"></li>
1200
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
1201
+ </ul>
511
1202
  </div>
512
- </div>
513
- </li>
514
- </ul>
1203
+ </li>
1204
+ </ul>
515
1205
 
1206
+ </div>
516
1207
  </div>
517
- <div class="uk-navbar-right">
1208
+ </div>
1209
+ </nav>
518
1210
 
519
- <ul class="uk-navbar-nav">
520
- <li>
521
- <a href="#">Right</a>
522
- <div class="uk-navbar-dropdown">
523
- <ul class="uk-nav uk-navbar-dropdown-nav">
524
- <li class="uk-active"><a href="#">Active</a></li>
525
- <li class="uk-parent">
526
- <a href="#">Parent</a>
527
- <ul class="uk-nav-sub">
528
- <li><a href="#">Sub item</a></li>
529
- <li><a href="#">Sub item</a></li>
530
- </ul>
531
- </li>
532
- <li class="uk-nav-header">Header</li>
533
- <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
534
- <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
535
- <li class="uk-nav-divider"></li>
536
- <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
537
- </ul>
538
- </div>
539
- </li>
540
- </ul>
1211
+ <nav class="uk-navbar-container uk-margin">
1212
+ <div class="uk-container">
1213
+ <div uk-navbar="align: right; boundary-align: true">
1214
+ <div class="uk-navbar-left">
541
1215
 
542
- </div>
543
- </nav>
1216
+ <ul class="uk-navbar-nav">
1217
+ <li>
1218
+ <a href="#">1 Column</a>
1219
+ <div class="uk-navbar-dropdown">
1220
+ <ul class="uk-nav uk-navbar-dropdown-nav">
1221
+ <li class="uk-active"><a href="#">Active</a></li>
1222
+ <li class="uk-parent">
1223
+ <a href="#">Parent</a>
1224
+ <ul class="uk-nav-sub">
1225
+ <li><a href="#">Sub item</a></li>
1226
+ <li><a href="#">Sub item</a></li>
1227
+ </ul>
1228
+ </li>
1229
+ <li class="uk-nav-header">Header</li>
1230
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
1231
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
1232
+ <li class="uk-nav-divider"></li>
1233
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
1234
+ </ul>
1235
+ </div>
1236
+ </li>
1237
+ </ul>
544
1238
 
545
- <nav class="uk-navbar-container uk-margin" uk-navbar="align: center; boundary: html">
546
- <div class="uk-navbar-left">
1239
+ </div>
1240
+ <div class="uk-navbar-right">
547
1241
 
548
- <ul class="uk-navbar-nav">
549
- <li>
550
- <a href="#">Center</a>
551
- <div class="uk-navbar-dropdown">
552
- <ul class="uk-nav uk-navbar-dropdown-nav">
553
- <li class="uk-active"><a href="#">Active</a></li>
554
- <li class="uk-parent">
555
- <a href="#">Parent</a>
556
- <ul class="uk-nav-sub">
557
- <li><a href="#">Sub item</a></li>
558
- <li><a href="#">Sub item</a></li>
559
- </ul>
560
- </li>
561
- <li class="uk-nav-header">Header</li>
562
- <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
563
- <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
564
- <li class="uk-nav-divider"></li>
565
- <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
566
- </ul>
567
- </div>
568
- </li>
569
- <li>
570
- <a href="#">2 Columns</a>
571
- <div class="uk-navbar-dropdown uk-navbar-dropdown-width-2">
572
- <div class="uk-navbar-dropdown-grid uk-child-width-1-2" uk-grid>
573
- <div>
574
- <ul class="uk-nav uk-navbar-dropdown-nav">
575
- <li class="uk-active"><a href="#">Active</a></li>
576
- <li class="uk-parent"><a href="#">Parent</a></li>
577
- <li class="uk-nav-header">Header</li>
578
- <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
579
- <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
580
- <li class="uk-nav-divider"></li>
581
- <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
582
- </ul>
583
- </div>
584
- <div>
585
- <ul class="uk-nav uk-navbar-dropdown-nav">
586
- <li class="uk-active"><a href="#">Active</a></li>
587
- <li class="uk-parent"><a href="#">Parent</a></li>
588
- <li class="uk-nav-header">Header</li>
589
- <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
590
- <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
591
- <li class="uk-nav-divider"></li>
592
- <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
593
- </ul>
594
- </div>
1242
+ <ul class="uk-navbar-nav">
1243
+ <li class="uk-active">
1244
+ <a href="#">Right</a>
1245
+ <div class="uk-navbar-dropdown">
1246
+ <ul class="uk-nav uk-navbar-dropdown-nav">
1247
+ <li class="uk-active"><a href="#">Active</a></li>
1248
+ <li class="uk-parent">
1249
+ <a href="#">Parent</a>
1250
+ <ul class="uk-nav-sub">
1251
+ <li><a href="#">Sub item</a></li>
1252
+ <li><a href="#">Sub item</a></li>
1253
+ </ul>
1254
+ </li>
1255
+ <li class="uk-nav-header">Header</li>
1256
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
1257
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
1258
+ <li class="uk-nav-divider"></li>
1259
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
1260
+ </ul>
595
1261
  </div>
596
- </div>
597
- </li>
598
- <li>
599
- <a href="#">3 Columns</a>
600
- <div class="uk-navbar-dropdown uk-navbar-dropdown-width-3">
601
- <div class="uk-navbar-dropdown-grid uk-child-width-1-3" uk-grid>
602
- <div>
603
- <ul class="uk-nav uk-navbar-dropdown-nav">
604
- <li class="uk-active"><a href="#">Active</a></li>
605
- <li class="uk-parent"><a href="#">Parent</a></li>
606
- <li class="uk-nav-header">Header</li>
607
- <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
608
- <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
609
- </ul>
610
- </div>
611
- <div>
612
- <ul class="uk-nav uk-navbar-dropdown-nav">
613
- <li class="uk-active"><a href="#">Active</a></li>
614
- <li class="uk-parent"><a href="#">Parent</a></li>
615
- <li class="uk-nav-header">Header</li>
616
- <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
617
- <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
618
- </ul>
1262
+ </li>
1263
+ <li>
1264
+ <a href="#">2 Columns</a>
1265
+ <div class="uk-navbar-dropdown uk-navbar-dropdown-width-2">
1266
+ <div class="uk-navbar-dropdown-grid uk-child-width-1-2" uk-grid>
1267
+ <div>
1268
+ <ul class="uk-nav uk-navbar-dropdown-nav">
1269
+ <li class="uk-active"><a href="#">Active</a></li>
1270
+ <li class="uk-parent"><a href="#">Parent</a></li>
1271
+ <li class="uk-nav-header">Header</li>
1272
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
1273
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
1274
+ <li class="uk-nav-divider"></li>
1275
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
1276
+ </ul>
1277
+ </div>
1278
+ <div>
1279
+ <ul class="uk-nav uk-navbar-dropdown-nav">
1280
+ <li class="uk-active"><a href="#">Active</a></li>
1281
+ <li class="uk-parent"><a href="#">Parent</a></li>
1282
+ <li class="uk-nav-header">Header</li>
1283
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
1284
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
1285
+ <li class="uk-nav-divider"></li>
1286
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
1287
+ </ul>
1288
+ </div>
619
1289
  </div>
620
- <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
621
1290
  </div>
622
- </div>
623
- </li>
624
- <li>
625
- <a href="#">Justify</a>
626
- <div class="uk-navbar-dropdown" uk-drop="cls-drop: uk-navbar-dropdown; boundary: !nav; boundary-align: true; pos: bottom-justify; flip: x">
627
- <div class="uk-navbar-dropdown-grid uk-child-width-1-3@m" uk-grid>
628
- <div>
629
- <ul class="uk-nav uk-navbar-dropdown-nav">
630
- <li class="uk-active"><a href="#">Active</a></li>
631
- <li class="uk-parent">
632
- <a href="#">Parent</a>
633
- <ul class="uk-nav-sub">
634
- <li><a href="#">Sub item</a></li>
635
- <li><a href="#">Sub item</a></li>
636
- </ul>
637
- </li>
638
- <li class="uk-nav-header">Header</li>
639
- <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
640
- <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
641
- <li class="uk-nav-divider"></li>
642
- <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
643
- </ul>
1291
+ </li>
1292
+ <li>
1293
+ <a href="#">3 Columns</a>
1294
+ <div class="uk-navbar-dropdown uk-navbar-dropdown-width-3">
1295
+ <div class="uk-navbar-dropdown-grid uk-child-width-1-3" uk-grid>
1296
+ <div>
1297
+ <ul class="uk-nav uk-navbar-dropdown-nav">
1298
+ <li class="uk-active"><a href="#">Active</a></li>
1299
+ <li class="uk-parent"><a href="#">Parent</a></li>
1300
+ <li class="uk-nav-header">Header</li>
1301
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
1302
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
1303
+ </ul>
1304
+ </div>
1305
+ <div>
1306
+ <ul class="uk-nav uk-navbar-dropdown-nav">
1307
+ <li class="uk-active"><a href="#">Active</a></li>
1308
+ <li class="uk-parent"><a href="#">Parent</a></li>
1309
+ <li class="uk-nav-header">Header</li>
1310
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
1311
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
1312
+ </ul>
1313
+ </div>
1314
+ <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
644
1315
  </div>
645
- <div>
646
- <ul class="uk-nav uk-navbar-dropdown-nav">
647
- <li class="uk-active"><a href="#">Active</a></li>
648
- <li class="uk-parent">
649
- <a href="#">Parent</a>
650
- <ul class="uk-nav-sub">
651
- <li><a href="#">Sub item</a></li>
652
- <li><a href="#">Sub item</a></li>
653
- </ul>
654
- </li>
655
- <li class="uk-nav-header">Header</li>
656
- <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
657
- <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
658
- <li class="uk-nav-divider"></li>
659
- <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
660
- </ul>
1316
+ </div>
1317
+ </li>
1318
+ <li>
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">
1321
+ <div class="uk-navbar-dropdown-grid uk-child-width-1-3@m" uk-grid>
1322
+ <div>
1323
+ <ul class="uk-nav uk-navbar-dropdown-nav">
1324
+ <li class="uk-active"><a href="#">Active</a></li>
1325
+ <li class="uk-parent">
1326
+ <a href="#">Parent</a>
1327
+ <ul class="uk-nav-sub">
1328
+ <li><a href="#">Sub item</a></li>
1329
+ <li><a href="#">Sub item</a></li>
1330
+ </ul>
1331
+ </li>
1332
+ <li class="uk-nav-header">Header</li>
1333
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
1334
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
1335
+ <li class="uk-nav-divider"></li>
1336
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
1337
+ </ul>
1338
+ </div>
1339
+ <div>
1340
+ <ul class="uk-nav uk-navbar-dropdown-nav">
1341
+ <li class="uk-active"><a href="#">Active</a></li>
1342
+ <li class="uk-parent">
1343
+ <a href="#">Parent</a>
1344
+ <ul class="uk-nav-sub">
1345
+ <li><a href="#">Sub item</a></li>
1346
+ <li><a href="#">Sub item</a></li>
1347
+ </ul>
1348
+ </li>
1349
+ <li class="uk-nav-header">Header</li>
1350
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
1351
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
1352
+ <li class="uk-nav-divider"></li>
1353
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
1354
+ </ul>
1355
+ </div>
1356
+ <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
661
1357
  </div>
662
- <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
663
1358
  </div>
664
- </div>
665
- </li>
666
- </ul>
1359
+ </li>
1360
+ </ul>
667
1361
 
1362
+ </div>
668
1363
  </div>
669
- <div class="uk-navbar-right">
670
-
671
- <ul class="uk-navbar-nav">
672
- <li>
673
- <a href="#">Right</a>
674
- <div class="uk-navbar-dropdown">
675
- <ul class="uk-nav uk-navbar-dropdown-nav">
676
- <li class="uk-active"><a href="#">Active</a></li>
677
- <li class="uk-parent">
678
- <a href="#">Parent</a>
679
- <ul class="uk-nav-sub">
680
- <li><a href="#">Sub item</a></li>
681
- <li><a href="#">Sub item</a></li>
682
- </ul>
683
- </li>
684
- <li class="uk-nav-header">Header</li>
685
- <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
686
- <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
687
- <li class="uk-nav-divider"></li>
688
- <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
689
- </ul>
690
- </div>
691
- </li>
692
- </ul>
1364
+ </div>
1365
+ </nav>
693
1366
 
694
- </div>
695
- </nav>
1367
+ <nav class="uk-navbar-container uk-margin">
1368
+ <div class="uk-container">
1369
+ <div uk-navbar="align: center; boundary-align: true">
1370
+ <div class="uk-navbar-left">
696
1371
 
697
- <h3>Boundary</h3>
1372
+ <ul class="uk-navbar-nav">
1373
+ <li>
1374
+ <a href="#">1 Column</a>
1375
+ <div class="uk-navbar-dropdown">
1376
+ <ul class="uk-nav uk-navbar-dropdown-nav">
1377
+ <li class="uk-active"><a href="#">Active</a></li>
1378
+ <li class="uk-parent">
1379
+ <a href="#">Parent</a>
1380
+ <ul class="uk-nav-sub">
1381
+ <li><a href="#">Sub item</a></li>
1382
+ <li><a href="#">Sub item</a></li>
1383
+ </ul>
1384
+ </li>
1385
+ <li class="uk-nav-header">Header</li>
1386
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
1387
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
1388
+ <li class="uk-nav-divider"></li>
1389
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
1390
+ </ul>
1391
+ </div>
1392
+ </li>
1393
+ </ul>
698
1394
 
699
- <nav class="uk-navbar-container uk-margin" uk-navbar="align: center; boundary-align: true">
700
- <div class="uk-navbar-left">
1395
+ </div>
1396
+ <div class="uk-navbar-center">
701
1397
 
702
- <ul class="uk-navbar-nav">
703
- <li>
704
- <a href="#">Center</a>
705
- <div class="uk-navbar-dropdown">
706
- <ul class="uk-nav uk-navbar-dropdown-nav">
707
- <li class="uk-active"><a href="#">Active</a></li>
708
- <li class="uk-parent">
709
- <a href="#">Parent</a>
710
- <ul class="uk-nav-sub">
711
- <li><a href="#">Sub item</a></li>
712
- <li><a href="#">Sub item</a></li>
713
- </ul>
714
- </li>
715
- <li class="uk-nav-header">Header</li>
716
- <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
717
- <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
718
- <li class="uk-nav-divider"></li>
719
- <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
720
- </ul>
721
- </div>
722
- </li>
723
- <li>
724
- <a href="#">2 Columns</a>
725
- <div class="uk-navbar-dropdown uk-navbar-dropdown-width-2">
726
- <div class="uk-navbar-dropdown-grid uk-child-width-1-2" uk-grid>
727
- <div>
728
- <ul class="uk-nav uk-navbar-dropdown-nav">
729
- <li class="uk-active"><a href="#">Active</a></li>
730
- <li class="uk-parent"><a href="#">Parent</a></li>
731
- <li class="uk-nav-header">Header</li>
732
- <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
733
- <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
734
- <li class="uk-nav-divider"></li>
735
- <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
736
- </ul>
737
- </div>
738
- <div>
739
- <ul class="uk-nav uk-navbar-dropdown-nav">
740
- <li class="uk-active"><a href="#">Active</a></li>
741
- <li class="uk-parent"><a href="#">Parent</a></li>
742
- <li class="uk-nav-header">Header</li>
743
- <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
744
- <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
745
- <li class="uk-nav-divider"></li>
746
- <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
747
- </ul>
748
- </div>
1398
+ <ul class="uk-navbar-nav">
1399
+ <li class="uk-active">
1400
+ <a href="#">Center</a>
1401
+ <div class="uk-navbar-dropdown">
1402
+ <ul class="uk-nav uk-navbar-dropdown-nav">
1403
+ <li class="uk-active"><a href="#">Active</a></li>
1404
+ <li class="uk-parent">
1405
+ <a href="#">Parent</a>
1406
+ <ul class="uk-nav-sub">
1407
+ <li><a href="#">Sub item</a></li>
1408
+ <li><a href="#">Sub item</a></li>
1409
+ </ul>
1410
+ </li>
1411
+ <li class="uk-nav-header">Header</li>
1412
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
1413
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
1414
+ <li class="uk-nav-divider"></li>
1415
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
1416
+ </ul>
749
1417
  </div>
750
- </div>
751
- </li>
752
- <li>
753
- <a href="#">3 Columns</a>
754
- <div class="uk-navbar-dropdown uk-navbar-dropdown-width-3">
755
- <div class="uk-navbar-dropdown-grid uk-child-width-1-3" uk-grid>
756
- <div>
757
- <ul class="uk-nav uk-navbar-dropdown-nav">
758
- <li class="uk-active"><a href="#">Active</a></li>
759
- <li class="uk-parent"><a href="#">Parent</a></li>
760
- <li class="uk-nav-header">Header</li>
761
- <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
762
- <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
763
- </ul>
1418
+ </li>
1419
+ <li>
1420
+ <a href="#">2 Columns</a>
1421
+ <div class="uk-navbar-dropdown uk-navbar-dropdown-width-2">
1422
+ <div class="uk-navbar-dropdown-grid uk-child-width-1-2" uk-grid>
1423
+ <div>
1424
+ <ul class="uk-nav uk-navbar-dropdown-nav">
1425
+ <li class="uk-active"><a href="#">Active</a></li>
1426
+ <li class="uk-parent"><a href="#">Parent</a></li>
1427
+ <li class="uk-nav-header">Header</li>
1428
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
1429
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
1430
+ <li class="uk-nav-divider"></li>
1431
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
1432
+ </ul>
1433
+ </div>
1434
+ <div>
1435
+ <ul class="uk-nav uk-navbar-dropdown-nav">
1436
+ <li class="uk-active"><a href="#">Active</a></li>
1437
+ <li class="uk-parent"><a href="#">Parent</a></li>
1438
+ <li class="uk-nav-header">Header</li>
1439
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
1440
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
1441
+ <li class="uk-nav-divider"></li>
1442
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
1443
+ </ul>
1444
+ </div>
764
1445
  </div>
765
- <div>
766
- <ul class="uk-nav uk-navbar-dropdown-nav">
767
- <li class="uk-active"><a href="#">Active</a></li>
768
- <li class="uk-parent"><a href="#">Parent</a></li>
769
- <li class="uk-nav-header">Header</li>
770
- <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
771
- <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
772
- </ul>
1446
+ </div>
1447
+ </li>
1448
+ <li>
1449
+ <a href="#">3 Columns</a>
1450
+ <div class="uk-navbar-dropdown uk-navbar-dropdown-width-3">
1451
+ <div class="uk-navbar-dropdown-grid uk-child-width-1-3" uk-grid>
1452
+ <div>
1453
+ <ul class="uk-nav uk-navbar-dropdown-nav">
1454
+ <li class="uk-active"><a href="#">Active</a></li>
1455
+ <li class="uk-parent"><a href="#">Parent</a></li>
1456
+ <li class="uk-nav-header">Header</li>
1457
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
1458
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
1459
+ </ul>
1460
+ </div>
1461
+ <div>
1462
+ <ul class="uk-nav uk-navbar-dropdown-nav">
1463
+ <li class="uk-active"><a href="#">Active</a></li>
1464
+ <li class="uk-parent"><a href="#">Parent</a></li>
1465
+ <li class="uk-nav-header">Header</li>
1466
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
1467
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
1468
+ </ul>
1469
+ </div>
1470
+ <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
773
1471
  </div>
774
- <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
775
1472
  </div>
776
- </div>
777
- </li>
778
- <li>
779
- <a href="#">Justify</a>
780
- <div class="uk-navbar-dropdown" uk-drop="cls-drop: uk-navbar-dropdown; boundary: !nav; boundary-align: true; pos: bottom-justify; flip: x">
781
- <div class="uk-navbar-dropdown-grid uk-child-width-1-3@m" uk-grid>
782
- <div>
783
- <ul class="uk-nav uk-navbar-dropdown-nav">
784
- <li class="uk-active"><a href="#">Active</a></li>
785
- <li class="uk-parent">
786
- <a href="#">Parent</a>
787
- <ul class="uk-nav-sub">
788
- <li><a href="#">Sub item</a></li>
789
- <li><a href="#">Sub item</a></li>
790
- </ul>
791
- </li>
792
- <li class="uk-nav-header">Header</li>
793
- <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
794
- <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
795
- <li class="uk-nav-divider"></li>
796
- <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
797
- </ul>
1473
+ </li>
1474
+ <li>
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">
1477
+ <div class="uk-navbar-dropdown-grid uk-child-width-1-3@m" uk-grid>
1478
+ <div>
1479
+ <ul class="uk-nav uk-navbar-dropdown-nav">
1480
+ <li class="uk-active"><a href="#">Active</a></li>
1481
+ <li class="uk-parent">
1482
+ <a href="#">Parent</a>
1483
+ <ul class="uk-nav-sub">
1484
+ <li><a href="#">Sub item</a></li>
1485
+ <li><a href="#">Sub item</a></li>
1486
+ </ul>
1487
+ </li>
1488
+ <li class="uk-nav-header">Header</li>
1489
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
1490
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
1491
+ <li class="uk-nav-divider"></li>
1492
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
1493
+ </ul>
1494
+ </div>
1495
+ <div>
1496
+ <ul class="uk-nav uk-navbar-dropdown-nav">
1497
+ <li class="uk-active"><a href="#">Active</a></li>
1498
+ <li class="uk-parent">
1499
+ <a href="#">Parent</a>
1500
+ <ul class="uk-nav-sub">
1501
+ <li><a href="#">Sub item</a></li>
1502
+ <li><a href="#">Sub item</a></li>
1503
+ </ul>
1504
+ </li>
1505
+ <li class="uk-nav-header">Header</li>
1506
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
1507
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
1508
+ <li class="uk-nav-divider"></li>
1509
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
1510
+ </ul>
1511
+ </div>
1512
+ <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
798
1513
  </div>
799
- <div>
800
- <ul class="uk-nav uk-navbar-dropdown-nav">
801
- <li class="uk-active"><a href="#">Active</a></li>
1514
+ </div>
1515
+ </li>
1516
+ </ul>
1517
+
1518
+ </div>
1519
+ <div class="uk-navbar-right">
1520
+
1521
+ <ul class="uk-navbar-nav">
1522
+ <li>
1523
+ <a href="#">1 Column</a>
1524
+ <div class="uk-navbar-dropdown">
1525
+ <ul class="uk-nav uk-navbar-dropdown-nav">
1526
+ <li class="uk-active"><a href="#">Active</a></li>
802
1527
  <li class="uk-parent">
803
- <a href="#">Parent</a>
804
- <ul class="uk-nav-sub">
805
- <li><a href="#">Sub item</a></li>
806
- <li><a href="#">Sub item</a></li>
807
- </ul>
808
- </li>
809
- <li class="uk-nav-header">Header</li>
810
- <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
811
- <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
812
- <li class="uk-nav-divider"></li>
813
- <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
814
- </ul>
815
- </div>
816
- <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
1528
+ <a href="#">Parent</a>
1529
+ <ul class="uk-nav-sub">
1530
+ <li><a href="#">Sub item</a></li>
1531
+ <li><a href="#">Sub item</a></li>
1532
+ </ul>
1533
+ </li>
1534
+ <li class="uk-nav-header">Header</li>
1535
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
1536
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
1537
+ <li class="uk-nav-divider"></li>
1538
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
1539
+ </ul>
817
1540
  </div>
818
- </div>
819
- </li>
820
- </ul>
1541
+ </li>
1542
+ </ul>
821
1543
 
1544
+ </div>
822
1545
  </div>
823
- <div class="uk-navbar-right">
1546
+ </div>
1547
+ </nav>
824
1548
 
825
- <ul class="uk-navbar-nav">
826
- <li>
827
- <a href="#">Right</a>
828
- <div class="uk-navbar-dropdown">
829
- <ul class="uk-nav uk-navbar-dropdown-nav">
830
- <li class="uk-active"><a href="#">Active</a></li>
831
- <li class="uk-parent">
832
- <a href="#">Parent</a>
833
- <ul class="uk-nav-sub">
834
- <li><a href="#">Sub item</a></li>
835
- <li><a href="#">Sub item</a></li>
836
- </ul>
837
- </li>
838
- <li class="uk-nav-header">Header</li>
839
- <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
840
- <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
841
- <li class="uk-nav-divider"></li>
842
- <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
843
- </ul>
844
- </div>
845
- </li>
846
- </ul>
1549
+ <div class="uk-container uk-margin-medium-top">
847
1550
 
848
- </div>
849
- </nav>
1551
+ <h2>Dropbar</h2>
850
1552
 
851
- <nav class="uk-navbar-container uk-margin" uk-navbar="align: left; boundary-align: true">
852
- <div class="uk-navbar-left">
1553
+ <p>First example using <code>dropbar: SELECTOR</code> and second example using <code>dropbar: true</code>.</p>
853
1554
 
854
- <ul class="uk-navbar-nav">
855
- <li>
856
- <a href="#">Left</a>
857
- <div class="uk-navbar-dropdown">
858
- <ul class="uk-nav uk-navbar-dropdown-nav">
859
- <li class="uk-active"><a href="#">Active</a></li>
860
- <li class="uk-parent">
861
- <a href="#">Parent</a>
862
- <ul class="uk-nav-sub">
863
- <li><a href="#">Sub item</a></li>
864
- <li><a href="#">Sub item</a></li>
865
- </ul>
866
- </li>
867
- <li class="uk-nav-header">Header</li>
868
- <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
869
- <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
870
- <li class="uk-nav-divider"></li>
871
- <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
872
- </ul>
873
- </div>
874
- </li>
875
- <li>
876
- <a href="#">2 Columns</a>
877
- <div class="uk-navbar-dropdown uk-navbar-dropdown-width-2">
878
- <div class="uk-navbar-dropdown-grid uk-child-width-1-2" uk-grid>
879
- <div>
880
- <ul class="uk-nav uk-navbar-dropdown-nav">
881
- <li class="uk-active"><a href="#">Active</a></li>
882
- <li class="uk-parent"><a href="#">Parent</a></li>
883
- <li class="uk-nav-header">Header</li>
884
- <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
885
- <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
886
- <li class="uk-nav-divider"></li>
887
- <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
888
- </ul>
889
- </div>
890
- <div>
891
- <ul class="uk-nav uk-navbar-dropdown-nav">
892
- <li class="uk-active"><a href="#">Active</a></li>
893
- <li class="uk-parent"><a href="#">Parent</a></li>
894
- <li class="uk-nav-header">Header</li>
895
- <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
896
- <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
897
- <li class="uk-nav-divider"></li>
898
- <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
899
- </ul>
900
- </div>
1555
+ </div>
1556
+
1557
+ <nav class="uk-navbar-container uk-margin-top"><!-- Margin top only because of dropbar follows already in markup -->
1558
+ <div class="uk-container">
1559
+ <div uk-navbar="dropbar: !.uk-navbar-container + .uk-navbar-dropbar">
1560
+ <div class="uk-navbar-left">
1561
+
1562
+ <ul class="uk-navbar-nav">
1563
+ <li class="uk-active">
1564
+ <a href="#">Left</a>
1565
+ <div class="uk-navbar-dropdown">
1566
+ <ul class="uk-nav uk-navbar-dropdown-nav">
1567
+ <li class="uk-active"><a href="#">Active</a></li>
1568
+ <li class="uk-parent">
1569
+ <a href="#">Parent</a>
1570
+ <ul class="uk-nav-sub">
1571
+ <li><a href="#">Sub item</a></li>
1572
+ <li><a href="#">Sub item</a></li>
1573
+ </ul>
1574
+ </li>
1575
+ <li class="uk-nav-header">Header</li>
1576
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
1577
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
1578
+ <li class="uk-nav-divider"></li>
1579
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
1580
+ </ul>
901
1581
  </div>
902
- </div>
903
- </li>
904
- <li>
905
- <a href="#">3 Columns</a>
906
- <div class="uk-navbar-dropdown uk-navbar-dropdown-width-3">
907
- <div class="uk-navbar-dropdown-grid uk-child-width-1-3" uk-grid>
908
- <div>
909
- <ul class="uk-nav uk-navbar-dropdown-nav">
910
- <li class="uk-active"><a href="#">Active</a></li>
911
- <li class="uk-parent"><a href="#">Parent</a></li>
912
- <li class="uk-nav-header">Header</li>
913
- <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
914
- <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
915
- </ul>
1582
+ </li>
1583
+ <li>
1584
+ <a href="#">2 Columns</a>
1585
+ <div class="uk-navbar-dropdown uk-navbar-dropdown-width-2">
1586
+ <div class="uk-navbar-dropdown-grid uk-child-width-1-2" uk-grid>
1587
+ <div>
1588
+ <ul class="uk-nav uk-navbar-dropdown-nav">
1589
+ <li class="uk-active"><a href="#">Active</a></li>
1590
+ <li class="uk-parent"><a href="#">Parent</a></li>
1591
+ <li class="uk-nav-header">Header</li>
1592
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
1593
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
1594
+ <li class="uk-nav-divider"></li>
1595
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
1596
+ </ul>
1597
+ </div>
1598
+ <div>
1599
+ <ul class="uk-nav uk-navbar-dropdown-nav">
1600
+ <li class="uk-active"><a href="#">Active</a></li>
1601
+ <li class="uk-parent"><a href="#">Parent</a></li>
1602
+ <li class="uk-nav-header">Header</li>
1603
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
1604
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
1605
+ <li class="uk-nav-divider"></li>
1606
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
1607
+ </ul>
1608
+ </div>
916
1609
  </div>
917
- <div>
918
- <ul class="uk-nav uk-navbar-dropdown-nav">
919
- <li class="uk-active"><a href="#">Active</a></li>
920
- <li class="uk-parent"><a href="#">Parent</a></li>
921
- <li class="uk-nav-header">Header</li>
922
- <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
923
- <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
924
- </ul>
1610
+ </div>
1611
+ </li>
1612
+ <li>
1613
+ <a href="#">3 Columns</a>
1614
+ <div class="uk-navbar-dropdown uk-navbar-dropdown-width-3">
1615
+ <div class="uk-navbar-dropdown-grid uk-child-width-1-3" uk-grid>
1616
+ <div>
1617
+ <ul class="uk-nav uk-navbar-dropdown-nav">
1618
+ <li class="uk-active"><a href="#">Active</a></li>
1619
+ <li class="uk-parent"><a href="#">Parent</a></li>
1620
+ <li class="uk-nav-header">Header</li>
1621
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
1622
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
1623
+ </ul>
1624
+ </div>
1625
+ <div>
1626
+ <ul class="uk-nav uk-navbar-dropdown-nav">
1627
+ <li class="uk-active"><a href="#">Active</a></li>
1628
+ <li class="uk-parent"><a href="#">Parent</a></li>
1629
+ <li class="uk-nav-header">Header</li>
1630
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
1631
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
1632
+ </ul>
1633
+ </div>
1634
+ <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
925
1635
  </div>
926
- <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
927
1636
  </div>
928
- </div>
929
- </li>
930
- <li>
931
- <a href="#">Justify</a>
932
- <div class="uk-navbar-dropdown" uk-drop="cls-drop: uk-navbar-dropdown; boundary: !nav; boundary-align: true; pos: bottom-justify; flip: x">
933
- <div class="uk-navbar-dropdown-grid uk-child-width-1-3@m" uk-grid>
934
- <div>
935
- <ul class="uk-nav uk-navbar-dropdown-nav">
936
- <li class="uk-active"><a href="#">Active</a></li>
937
- <li class="uk-parent">
938
- <a href="#">Parent</a>
939
- <ul class="uk-nav-sub">
940
- <li><a href="#">Sub item</a></li>
941
- <li><a href="#">Sub item</a></li>
942
- </ul>
943
- </li>
944
- <li class="uk-nav-header">Header</li>
945
- <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
946
- <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
947
- <li class="uk-nav-divider"></li>
948
- <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
949
- </ul>
1637
+ </li>
1638
+ <li>
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">
1641
+ <div class="uk-navbar-dropdown-grid uk-child-width-1-3@m" uk-grid>
1642
+ <div>
1643
+ <ul class="uk-nav uk-navbar-dropdown-nav">
1644
+ <li class="uk-active"><a href="#">Active</a></li>
1645
+ <li class="uk-parent">
1646
+ <a href="#">Parent</a>
1647
+ <ul class="uk-nav-sub">
1648
+ <li><a href="#">Sub item</a></li>
1649
+ <li><a href="#">Sub item</a></li>
1650
+ </ul>
1651
+ </li>
1652
+ <li class="uk-nav-header">Header</li>
1653
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
1654
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
1655
+ <li class="uk-nav-divider"></li>
1656
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
1657
+ </ul>
1658
+ </div>
1659
+ <div>
1660
+ <ul class="uk-nav uk-navbar-dropdown-nav">
1661
+ <li class="uk-active"><a href="#">Active</a></li>
1662
+ <li class="uk-parent">
1663
+ <a href="#">Parent</a>
1664
+ <ul class="uk-nav-sub">
1665
+ <li><a href="#">Sub item</a></li>
1666
+ <li><a href="#">Sub item</a></li>
1667
+ </ul>
1668
+ </li>
1669
+ <li class="uk-nav-header">Header</li>
1670
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
1671
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
1672
+ <li class="uk-nav-divider"></li>
1673
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
1674
+ </ul>
1675
+ </div>
1676
+ <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
950
1677
  </div>
951
- <div>
952
- <ul class="uk-nav uk-navbar-dropdown-nav">
953
- <li class="uk-active"><a href="#">Active</a></li>
954
- <li class="uk-parent">
955
- <a href="#">Parent</a>
956
- <ul class="uk-nav-sub">
957
- <li><a href="#">Sub item</a></li>
958
- <li><a href="#">Sub item</a></li>
959
- </ul>
960
- </li>
961
- <li class="uk-nav-header">Header</li>
962
- <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
963
- <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
964
- <li class="uk-nav-divider"></li>
965
- <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
966
- </ul>
1678
+ </div>
1679
+ </li>
1680
+ <li>
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">
1683
+ <div class="uk-navbar-dropdown-grid uk-child-width-1-3@m" uk-grid>
1684
+ <div>
1685
+ <ul class="uk-nav uk-navbar-dropdown-nav">
1686
+ <li class="uk-active"><a href="#">Active</a></li>
1687
+ <li class="uk-parent">
1688
+ <a href="#">Parent</a>
1689
+ <ul class="uk-nav-sub">
1690
+ <li><a href="#">Sub item</a></li>
1691
+ <li><a href="#">Sub item</a></li>
1692
+ </ul>
1693
+ </li>
1694
+ <li class="uk-nav-header">Header</li>
1695
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
1696
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
1697
+ <li class="uk-nav-divider"></li>
1698
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
1699
+ </ul>
1700
+ </div>
1701
+ <div>
1702
+ <ul class="uk-nav uk-navbar-dropdown-nav">
1703
+ <li class="uk-active"><a href="#">Active</a></li>
1704
+ <li class="uk-parent">
1705
+ <a href="#">Parent</a>
1706
+ <ul class="uk-nav-sub">
1707
+ <li><a href="#">Sub item</a></li>
1708
+ <li><a href="#">Sub item</a></li>
1709
+ </ul>
1710
+ </li>
1711
+ <li class="uk-nav-header">Header</li>
1712
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
1713
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
1714
+ <li class="uk-nav-divider"></li>
1715
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
1716
+ </ul>
1717
+ </div>
1718
+ <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
967
1719
  </div>
968
- <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
969
1720
  </div>
970
- </div>
971
- </li>
972
- </ul>
973
-
974
- </div>
975
- <div class="uk-navbar-right">
976
-
977
- <ul class="uk-navbar-nav">
978
- <li>
979
- <a href="#">Right</a>
980
- <div class="uk-navbar-dropdown">
981
- <ul class="uk-nav uk-navbar-dropdown-nav">
982
- <li class="uk-active"><a href="#">Active</a></li>
983
- <li class="uk-parent">
984
- <a href="#">Parent</a>
985
- <ul class="uk-nav-sub">
986
- <li><a href="#">Sub item</a></li>
987
- <li><a href="#">Sub item</a></li>
988
- </ul>
989
- </li>
990
- <li class="uk-nav-header">Header</li>
991
- <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
992
- <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
993
- <li class="uk-nav-divider"></li>
994
- <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
995
- </ul>
996
- </div>
997
- </li>
998
- </ul>
1721
+ </li>
1722
+ </ul>
1723
+
1724
+ </div>
1725
+ <div class="uk-navbar-right">
1726
+
1727
+ <ul class="uk-navbar-nav">
1728
+ <li>
1729
+ <a href="#">1 Column</a>
1730
+ <div class="uk-navbar-dropdown">
1731
+ <ul class="uk-nav uk-navbar-dropdown-nav">
1732
+ <li class="uk-active"><a href="#">Active</a></li>
1733
+ <li class="uk-parent">
1734
+ <a href="#">Parent</a>
1735
+ <ul class="uk-nav-sub">
1736
+ <li><a href="#">Sub item</a></li>
1737
+ <li><a href="#">Sub item</a></li>
1738
+ </ul>
1739
+ </li>
1740
+ <li class="uk-nav-header">Header</li>
1741
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
1742
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
1743
+ <li class="uk-nav-divider"></li>
1744
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
1745
+ </ul>
1746
+ </div>
1747
+ </li>
1748
+ </ul>
999
1749
 
1750
+ </div>
1000
1751
  </div>
1001
- </nav>
1002
-
1003
- <h2>Dropbar</h2>
1752
+ </div>
1753
+ </nav>
1004
1754
 
1005
- <div class="uk-position-relative uk-margin">
1755
+ <div class="uk-dropbar uk-dropbar-top uk-navbar-dropbar"></div>
1006
1756
 
1007
- <nav class="uk-navbar-container" uk-navbar="dropbar: +.uk-navbar-dropbar">
1757
+ <nav class="uk-navbar-container uk-margin">
1758
+ <div class="uk-container">
1759
+ <div uk-navbar="dropbar: true; dropbar-anchor: !.uk-navbar-container; align: right">
1008
1760
  <div class="uk-navbar-left">
1009
1761
 
1010
1762
  <ul class="uk-navbar-nav">
1011
1763
  <li>
1012
- <a href="#">Hover</a>
1764
+ <a href="#">1 Column</a>
1765
+ <div class="uk-navbar-dropdown">
1766
+ <ul class="uk-nav uk-navbar-dropdown-nav">
1767
+ <li class="uk-active"><a href="#">Active</a></li>
1768
+ <li class="uk-parent">
1769
+ <a href="#">Parent</a>
1770
+ <ul class="uk-nav-sub">
1771
+ <li><a href="#">Sub item</a></li>
1772
+ <li><a href="#">Sub item</a></li>
1773
+ </ul>
1774
+ </li>
1775
+ <li class="uk-nav-header">Header</li>
1776
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
1777
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
1778
+ <li class="uk-nav-divider"></li>
1779
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
1780
+ </ul>
1781
+ </div>
1782
+ </li>
1783
+ </ul>
1784
+
1785
+ </div>
1786
+ <div class="uk-navbar-right">
1787
+
1788
+ <ul class="uk-navbar-nav">
1789
+ <li class="uk-active">
1790
+ <a href="#">Right</a>
1013
1791
  <div class="uk-navbar-dropdown">
1014
1792
  <ul class="uk-nav uk-navbar-dropdown-nav">
1015
1793
  <li class="uk-active"><a href="#">Active</a></li>
@@ -1084,8 +1862,8 @@
1084
1862
  </div>
1085
1863
  </li>
1086
1864
  <li>
1087
- <a href="#">Justify</a>
1088
- <div class="uk-navbar-dropdown" uk-drop="cls-drop: uk-navbar-dropdown; boundary: !nav; 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">
1089
1867
  <div class="uk-navbar-dropdown-grid uk-child-width-1-3@m" uk-grid>
1090
1868
  <div>
1091
1869
  <ul class="uk-nav uk-navbar-dropdown-nav">
@@ -1125,17 +1903,21 @@
1125
1903
  </div>
1126
1904
  </div>
1127
1905
  </li>
1128
- <li>
1129
- <a href="#">Item</a>
1130
- </li>
1131
1906
  </ul>
1132
1907
 
1133
1908
  </div>
1134
- <div class="uk-navbar-right">
1909
+ </div>
1910
+ </div>
1911
+ </nav>
1912
+
1913
+ <nav class="uk-navbar-container uk-margin">
1914
+ <div class="uk-container">
1915
+ <div uk-navbar="dropbar: true; dropbar-anchor: !.uk-navbar-container; align: center">
1916
+ <div class="uk-navbar-left">
1135
1917
 
1136
1918
  <ul class="uk-navbar-nav">
1137
1919
  <li>
1138
- <a href="#">Right</a>
1920
+ <a href="#">1 Column</a>
1139
1921
  <div class="uk-navbar-dropdown">
1140
1922
  <ul class="uk-nav uk-navbar-dropdown-nav">
1141
1923
  <li class="uk-active"><a href="#">Active</a></li>
@@ -1157,20 +1939,11 @@
1157
1939
  </ul>
1158
1940
 
1159
1941
  </div>
1160
- </nav>
1161
-
1162
- <div class="uk-navbar-dropbar"></div>
1163
-
1164
- </div>
1165
-
1166
- <div class="uk-margin">
1167
-
1168
- <nav class="uk-navbar-container" uk-navbar="dropbar: true">
1169
- <div class="uk-navbar-left">
1942
+ <div class="uk-navbar-center">
1170
1943
 
1171
1944
  <ul class="uk-navbar-nav">
1172
- <li>
1173
- <a href="#">Hover</a>
1945
+ <li class="uk-active">
1946
+ <a href="#">Center</a>
1174
1947
  <div class="uk-navbar-dropdown">
1175
1948
  <ul class="uk-nav uk-navbar-dropdown-nav">
1176
1949
  <li class="uk-active"><a href="#">Active</a></li>
@@ -1245,8 +2018,8 @@
1245
2018
  </div>
1246
2019
  </li>
1247
2020
  <li>
1248
- <a href="#">Justify</a>
1249
- <div class="uk-navbar-dropdown" uk-drop="cls-drop: uk-navbar-dropdown; boundary: !nav; 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">
1250
2023
  <div class="uk-navbar-dropdown-grid uk-child-width-1-3@m" uk-grid>
1251
2024
  <div>
1252
2025
  <ul class="uk-nav uk-navbar-dropdown-nav">
@@ -1286,21 +2059,263 @@
1286
2059
  </div>
1287
2060
  </div>
1288
2061
  </li>
2062
+ </ul>
2063
+
2064
+ </div>
2065
+ <div class="uk-navbar-right">
2066
+
2067
+ <ul class="uk-navbar-nav">
2068
+ <li>
2069
+ <a href="#">1 Column</a>
2070
+ <div class="uk-navbar-dropdown">
2071
+ <ul class="uk-nav uk-navbar-dropdown-nav">
2072
+ <li class="uk-active"><a href="#">Active</a></li>
2073
+ <li class="uk-parent">
2074
+ <a href="#">Parent</a>
2075
+ <ul class="uk-nav-sub">
2076
+ <li><a href="#">Sub item</a></li>
2077
+ <li><a href="#">Sub item</a></li>
2078
+ </ul>
2079
+ </li>
2080
+ <li class="uk-nav-header">Header</li>
2081
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
2082
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
2083
+ <li class="uk-nav-divider"></li>
2084
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
2085
+ </ul>
2086
+ </div>
2087
+ </li>
2088
+ </ul>
2089
+
2090
+ </div>
2091
+ </div>
2092
+ </div>
2093
+ </nav>
2094
+
2095
+
2096
+ <div class="uk-container uk-margin-medium-top">
2097
+
2098
+ <h2>Icons and Subtitles</h2>
2099
+
2100
+ </div>
2101
+
2102
+ <nav class="uk-navbar-container uk-margin">
2103
+ <div class="uk-container">
2104
+ <div class="uk-navbar">
2105
+ <div class="uk-navbar-left">
2106
+
2107
+ <ul class="uk-navbar-nav">
2108
+ <li><a href="#"><span uk-icon="icon: home"></span></a></li>
2109
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: home"></span> Item</a></li>
2110
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: cart"></span> Item</a></li>
2111
+ <li><a href="#">Item</a></li>
2112
+ <li><a href="#">
2113
+ <div>
2114
+ Item <div class="uk-navbar-subtitle">Subtitle</div>
2115
+ </div>
2116
+ </a></li>
2117
+ <li><a href="#">
2118
+ <div>
2119
+ Item <div class="uk-navbar-subtitle">Subtitle</div>
2120
+ </div>
2121
+ </a></li>
2122
+ <li><a href="#">
2123
+ <div class="uk-flex uk-flex-middle">
2124
+ <span class="uk-margin-small-right" uk-icon="icon: home; ratio: 1.5"></span>
2125
+ <div>Item <div class="uk-navbar-subtitle">Subtitle</div></div>
2126
+ </div>
2127
+ </a></li>
2128
+ <li><a href="#">
2129
+ <div class="uk-flex uk-flex-middle">
2130
+ <span class="uk-margin-small-right" uk-icon="icon: cart; ratio: 1.5"></span>
2131
+ <div>Item <div class="uk-navbar-subtitle">Subtitle</div></div>
2132
+ </div>
2133
+ </a></li>
2134
+ </ul>
2135
+
2136
+ </div>
2137
+ </div>
2138
+ </div>
2139
+ </nav>
2140
+
2141
+ <div class="uk-container uk-margin-medium-top">
2142
+
2143
+ <h2>Content Items</h2>
2144
+
2145
+ </div>
2146
+
2147
+ <nav class="uk-navbar-container uk-margin">
2148
+ <div class="uk-container">
2149
+ <div class="uk-navbar">
2150
+ <div class="uk-navbar-left">
2151
+
2152
+ <ul class="uk-navbar-nav">
2153
+ <li><a href="#">Item</a></li>
2154
+ </ul>
2155
+ <div class="uk-navbar-item">
2156
+ <div>Some <a href="#">Link</a></div>
2157
+ </div>
2158
+ <div class="uk-navbar-item">
2159
+ <ul class="uk-iconnav">
2160
+ <li>
2161
+ <a href="#" uk-icon="icon: user"></a>
2162
+ </li>
2163
+ <li>
2164
+ <a href="#" uk-icon="icon: bag"></a>
2165
+ </li>
2166
+ <li>
2167
+ <a href="#" uk-icon="icon: heart"></a>
2168
+ </li>
2169
+ </ul>
2170
+ </div>
2171
+ <div class="uk-navbar-item"><img src="images/photo.jpg" width="100" height="67" alt=""></div>
2172
+ <div class="uk-navbar-item">
2173
+ <form>
2174
+ <input class="uk-input uk-form-width-medium" type="text" placeholder="Input">
2175
+ <button class="uk-button uk-button-default">Button</button>
2176
+ </form>
2177
+ </div>
2178
+ <div class="uk-navbar-item">
2179
+ <ul class="uk-grid uk-grid-small">
2180
+ <li>
2181
+ <a class="uk-icon-button" href="#" uk-icon="icon: twitter"></a>
2182
+ </li>
2183
+ <li>
2184
+ <a class="uk-icon-button" href="#" uk-icon="icon: github"></a>
2185
+ </li>
2186
+ <li>
2187
+ <a class="uk-icon-button" href="#" uk-icon="icon: youtube"></a>
2188
+ </li>
2189
+ </ul>
2190
+ </div>
2191
+
2192
+ </div>
2193
+ </div>
2194
+ </div>
2195
+ </nav>
2196
+
2197
+ <div class="uk-container uk-margin-medium-top">
2198
+
2199
+ <h2>Logo and Toggle</h2>
2200
+
2201
+ </div>
2202
+
2203
+ <nav class="uk-navbar-container uk-margin">
2204
+ <div class="uk-container">
2205
+ <div uk-navbar>
2206
+ <div class="uk-navbar-left">
2207
+
2208
+ <a class="uk-navbar-item uk-logo" href="#">Logo</a>
2209
+ <ul class="uk-navbar-nav uk-navbar-nav-primary">
2210
+ <li class="uk-active"><a href="#">Active</a></li>
2211
+ <li>
2212
+ <a href="#">Parent</a>
2213
+ <div class="uk-navbar-dropdown">
2214
+ <ul class="uk-nav uk-navbar-dropdown-nav">
2215
+ <li class="uk-active"><a href="#">Active</a></li>
2216
+ <li class="uk-parent">
2217
+ <a href="#">Parent</a>
2218
+ <ul class="uk-nav-sub">
2219
+ <li><a href="#">Sub item</a></li>
2220
+ <li><a href="#">Sub item</a></li>
2221
+ </ul>
2222
+ </li>
2223
+ <li class="uk-nav-header">Header</li>
2224
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
2225
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
2226
+ <li class="uk-nav-divider"></li>
2227
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
2228
+ </ul>
2229
+ </div>
2230
+ </li>
2231
+ <li>
2232
+ <a href="#">Content</a>
2233
+ <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>
2234
+ </li>
2235
+ <li><a href="#">Item</a></li>
2236
+ <li><a href="#">Item</a></li>
2237
+ </ul>
2238
+
2239
+ </div>
2240
+ <div class="uk-navbar-right">
2241
+
2242
+ <a class="uk-navbar-toggle" 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
+
2245
+ </div>
2246
+ </div>
2247
+ </div>
2248
+ </nav>
2249
+
2250
+ <nav class="uk-navbar-container uk-margin">
2251
+ <div class="uk-container">
2252
+ <div uk-navbar>
2253
+ <div class="uk-navbar-left">
2254
+
2255
+ <a class="uk-navbar-item uk-logo" href="#">Logo</a>
2256
+ <ul class="uk-navbar-nav uk-navbar-nav-primary">
2257
+ <li class="uk-active"><a href="#">Active</a></li>
2258
+ <li>
2259
+ <a href="#">Parent</a>
2260
+ <div class="uk-navbar-dropdown">
2261
+ <ul class="uk-nav uk-navbar-dropdown-nav">
2262
+ <li class="uk-active"><a href="#">Active</a></li>
2263
+ <li class="uk-parent">
2264
+ <a href="#">Parent</a>
2265
+ <ul class="uk-nav-sub">
2266
+ <li><a href="#">Sub item</a></li>
2267
+ <li><a href="#">Sub item</a></li>
2268
+ </ul>
2269
+ </li>
2270
+ <li class="uk-nav-header">Header</li>
2271
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
2272
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
2273
+ <li class="uk-nav-divider"></li>
2274
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
2275
+ </ul>
2276
+ </div>
2277
+ </li>
1289
2278
  <li>
1290
- <a href="#">Item</a>
2279
+ <a href="#">Content</a>
2280
+ <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>
1291
2281
  </li>
2282
+ <li><a href="#">Item</a></li>
2283
+ <li><a href="#">Item</a></li>
1292
2284
  </ul>
1293
2285
 
1294
- </div>
1295
- <div class="uk-navbar-right">
2286
+ </div>
2287
+ <div class="uk-navbar-right">
2288
+
2289
+ <a class="uk-navbar-toggle" href="#">
2290
+ <span class="uk-margin-small-right">Menu</span> <span uk-navbar-toggle-icon></span>
2291
+ </a>
2292
+ <div class="uk-navbar-dropdown" uk-drop="mode: click; cls-drop: uk-navbar-dropdown; boundary: !.uk-navbar; flip: false">Dropdown</div>
2293
+
2294
+ </div>
2295
+ </div>
2296
+ </div>
2297
+ </nav>
2298
+
2299
+ <div class="uk-container uk-margin-medium-top">
1296
2300
 
1297
- <ul class="uk-navbar-nav">
2301
+ <h2>Primary</h2>
2302
+
2303
+ </div>
2304
+
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">
2309
+
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>
1298
2313
  <li>
1299
- <a href="#">Right</a>
2314
+ <a href="#">Parent</a>
1300
2315
  <div class="uk-navbar-dropdown">
1301
2316
  <ul class="uk-nav uk-navbar-dropdown-nav">
1302
2317
  <li class="uk-active"><a href="#">Active</a></li>
1303
- <li class="uk-parent">
2318
+ <li class="uk-parent">
1304
2319
  <a href="#">Parent</a>
1305
2320
  <ul class="uk-nav-sub">
1306
2321
  <li><a href="#">Sub item</a></li>
@@ -1315,222 +2330,43 @@
1315
2330
  </ul>
1316
2331
  </div>
1317
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>
1318
2339
  </ul>
1319
2340
 
1320
2341
  </div>
1321
- </nav>
1322
- </div>
1323
-
1324
- <h2>Icons and Subtitles</h2>
1325
-
1326
- <nav class="uk-navbar uk-navbar-container uk-margin">
1327
- <div class="uk-navbar-left">
1328
-
1329
- <ul class="uk-navbar-nav">
1330
- <li><a href="#">Item</a></li>
1331
- <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
1332
- <li><a href="#">
1333
- <div>
1334
- Item <div class="uk-navbar-subtitle">Subtitle</div>
1335
- </div>
1336
- </a></li>
1337
- <li><a href="#">
1338
- <div class="uk-flex uk-flex-middle">
1339
- <span class="uk-margin-small-right" uk-icon="icon: trash"></span>
1340
- <div>Item <div class="uk-navbar-subtitle">Subtitle</div></div>
1341
- </div>
1342
- </a></li>
1343
- <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span></a></li>
1344
- </ul>
1345
-
1346
- </div>
1347
- </nav>
2342
+ <div class="uk-navbar-right">
1348
2343
 
1349
- <h2>Content Items</h2>
2344
+ <a class="uk-navbar-toggle" 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>
1350
2346
 
1351
- <nav class="uk-navbar uk-navbar-container uk-margin">
1352
- <div class="uk-navbar-left">
1353
- <ul class="uk-navbar-nav">
1354
- <li><a href="#">Item</a></li>
1355
- </ul>
1356
- <div class="uk-navbar-item">
1357
- <div>Some <a href="#">Link</a></div>
1358
- </div>
1359
- <div class="uk-navbar-item">
1360
- <a class="uk-icon-button" href="#" uk-icon="icon: trash"></a>
1361
- </div>
1362
- <div class="uk-navbar-item"><img src="images/photo.jpg" width="100" height="67" alt=""></div>
1363
- <div class="uk-navbar-item">Search</div>
1364
- <div class="uk-navbar-item">
1365
- <form>
1366
- <input class="uk-input uk-form-width-medium" type="text" placeholder="Input">
1367
- <button class="uk-button uk-button-default">Button</button>
1368
- </form>
1369
2347
  </div>
1370
2348
  </div>
1371
- </nav>
1372
-
1373
- <h2>Toggle and Logo</h2>
1374
-
1375
- <div class="uk-child-width-1-2@m" uk-grid>
1376
- <div>
1377
-
1378
- <nav class="uk-navbar uk-navbar-container uk-margin">
1379
- <div class="uk-navbar-left">
1380
- <a class="uk-navbar-toggle" uk-navbar-toggle-icon href="#"></a>
1381
- </div>
1382
- <div class="uk-navbar-right">
1383
- <a class="uk-navbar-item uk-logo" href="#">Logo</a>
1384
- </div>
1385
- </nav>
1386
-
1387
- <nav class="uk-navbar uk-navbar-container uk-margin">
1388
- <div class="uk-navbar-left">
1389
- <a class="uk-navbar-toggle" href="#">
1390
- <span uk-navbar-toggle-icon></span> <span class="uk-margin-small-left">Menu</span>
1391
- </a>
1392
- </div>
1393
- <div class="uk-navbar-right">
1394
- <a class="uk-navbar-toggle" href="#">Menu</a>
1395
- </div>
1396
- </nav>
1397
-
1398
- </div>
1399
- <div>
1400
-
1401
- <nav class="uk-navbar uk-navbar-container uk-margin">
1402
- <div class="uk-navbar-left">
1403
- <a class="uk-navbar-item uk-logo" href="#">Logo</a>
1404
- <div class="uk-navbar-dropdown" uk-drop="mode: click; cls-drop: uk-navbar-dropdown; boundary: !nav; flip: x">Dropdown</div>
1405
- </div>
1406
- <div class="uk-navbar-right">
1407
- <a class="uk-navbar-toggle" href="#" uk-navbar-toggle-icon></a>
1408
- <div class="uk-navbar-dropdown" uk-drop="mode: click; cls-drop: uk-navbar-dropdown; boundary: !nav; flip: x">Dropdown</div>
1409
- </div>
1410
- </nav>
1411
-
1412
- <nav class="uk-navbar uk-navbar-container uk-margin">
1413
- <div class="uk-navbar-left">
1414
- <a class="uk-navbar-toggle" href="#">Menu</a>
1415
- <div class="uk-navbar-dropdown" uk-drop="mode: click; cls-drop: uk-navbar-dropdown; boundary: !nav; flip: x">Dropdown</div>
1416
- </div>
1417
- <div class="uk-navbar-right">
1418
- <a class="uk-navbar-toggle" href="#">
1419
- <span class="uk-margin-small-right">Menu</span> <span uk-navbar-toggle-icon></span>
1420
- </a>
1421
- <div class="uk-navbar-dropdown" uk-drop="mode: click; cls-drop: uk-navbar-dropdown; boundary: !nav; flip: x">Dropdown</div>
1422
- </div>
1423
- </nav>
1424
-
1425
- </div>
1426
2349
  </div>
2350
+ </nav>
1427
2351
 
1428
- <h2>Center</h2>
1429
-
1430
- <nav class="uk-navbar-container uk-margin" uk-navbar>
1431
- <div class="uk-navbar-left">
1432
-
1433
- <ul class="uk-navbar-nav">
1434
- <li>
1435
- <a href="#">Left</a>
1436
- <div class="uk-navbar-dropdown">
1437
- <ul class="uk-nav uk-navbar-dropdown-nav">
1438
- <li class="uk-active"><a href="#">Active</a></li>
1439
- <li class="uk-parent">
1440
- <a href="#">Parent</a>
1441
- <ul class="uk-nav-sub">
1442
- <li><a href="#">Sub item</a></li>
1443
- <li><a href="#">Sub item</a></li>
1444
- </ul>
1445
- </li>
1446
- <li class="uk-nav-header">Header</li>
1447
- <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
1448
- <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
1449
- <li class="uk-nav-divider"></li>
1450
- <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
1451
- </ul>
1452
- </div>
1453
- </li>
1454
- </ul>
1455
-
1456
- </div>
1457
- <div class="uk-navbar-center">
1458
-
1459
- <ul class="uk-navbar-nav">
1460
- <li class="uk-active"><a href="#">Active</a></li>
1461
- <li>
1462
- <a href="#">Parent</a>
1463
- <div class="uk-navbar-dropdown">
1464
- <ul class="uk-nav uk-navbar-dropdown-nav">
1465
- <li class="uk-active"><a href="#">Active</a></li>
1466
- <li class="uk-parent">
1467
- <a href="#">Parent</a>
1468
- <ul class="uk-nav-sub">
1469
- <li><a href="#">Sub item</a></li>
1470
- <li><a href="#">Sub item</a></li>
1471
- </ul>
1472
- </li>
1473
- <li class="uk-nav-header">Header</li>
1474
- <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
1475
- <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
1476
- <li class="uk-nav-divider"></li>
1477
- <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
1478
- </ul>
1479
- </div>
1480
- </li>
1481
- <li>
1482
- <a href="#">Content</a>
1483
- <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>
1484
- </li>
1485
- <li><a href="#">Item</a></li>
1486
- <li><a href="#">Item</a></li>
1487
- <li><a href="#">Item</a></li>
1488
- </ul>
1489
- <div class="uk-navbar-item">
1490
- <div>Some <a href="#">Link</a></div>
1491
- </div>
1492
-
1493
- </div>
1494
- <div class="uk-navbar-right">
2352
+ <div class="uk-container uk-margin-medium-top">
1495
2353
 
1496
- <ul class="uk-navbar-nav">
1497
- <li>
1498
- <a href="#">Right</a>
1499
- <div class="uk-navbar-dropdown">
1500
- <ul class="uk-nav uk-navbar-dropdown-nav">
1501
- <li class="uk-active"><a href="#">Active</a></li>
1502
- <li class="uk-parent">
1503
- <a href="#">Parent</a>
1504
- <ul class="uk-nav-sub">
1505
- <li><a href="#">Sub item</a></li>
1506
- <li><a href="#">Sub item</a></li>
1507
- </ul>
1508
- </li>
1509
- <li class="uk-nav-header">Header</li>
1510
- <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
1511
- <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
1512
- <li class="uk-nav-divider"></li>
1513
- <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
1514
- </ul>
1515
- </div>
1516
- </li>
1517
- </ul>
2354
+ <h2>Center</h2>
1518
2355
 
1519
- </div>
1520
- </nav>
2356
+ </div>
1521
2357
 
1522
- <nav class="uk-navbar-container uk-margin" uk-navbar>
1523
- <div class="uk-navbar-center">
2358
+ <nav class="uk-navbar-container uk-margin">
2359
+ <div class="uk-container">
2360
+ <div uk-navbar>
2361
+ <div class="uk-navbar-left">
1524
2362
 
1525
- <div class="uk-navbar-center-left"><div>
1526
2363
  <ul class="uk-navbar-nav">
1527
- <li class="uk-active"><a href="#">Active</a></li>
1528
2364
  <li>
1529
- <a href="#">Parent</a>
2365
+ <a href="#">Left</a>
1530
2366
  <div class="uk-navbar-dropdown">
1531
2367
  <ul class="uk-nav uk-navbar-dropdown-nav">
1532
2368
  <li class="uk-active"><a href="#">Active</a></li>
1533
- <li class="uk-parent">
2369
+ <li class="uk-parent">
1534
2370
  <a href="#">Parent</a>
1535
2371
  <ul class="uk-nav-sub">
1536
2372
  <li><a href="#">Sub item</a></li>
@@ -1545,16 +2381,11 @@
1545
2381
  </ul>
1546
2382
  </div>
1547
2383
  </li>
1548
- <li>
1549
- <a href="#">Content</a>
1550
- <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>
1551
- </li>
1552
2384
  </ul>
1553
- </div></div>
1554
2385
 
1555
- <a class="uk-navbar-item uk-logo" href="#">Logo</a>
2386
+ </div>
2387
+ <div class="uk-navbar-center">
1556
2388
 
1557
- <div class="uk-navbar-center-right"><div>
1558
2389
  <ul class="uk-navbar-nav">
1559
2390
  <li class="uk-active"><a href="#">Active</a></li>
1560
2391
  <li>
@@ -1562,7 +2393,7 @@
1562
2393
  <div class="uk-navbar-dropdown">
1563
2394
  <ul class="uk-nav uk-navbar-dropdown-nav">
1564
2395
  <li class="uk-active"><a href="#">Active</a></li>
1565
- <li class="uk-parent">
2396
+ <li class="uk-parent">
1566
2397
  <a href="#">Parent</a>
1567
2398
  <ul class="uk-nav-sub">
1568
2399
  <li><a href="#">Sub item</a></li>
@@ -1585,49 +2416,124 @@
1585
2416
  <div class="uk-navbar-item">
1586
2417
  <div>Some <a href="#">Link</a></div>
1587
2418
  </div>
1588
- </div></div>
1589
2419
 
2420
+ </div>
2421
+ <div class="uk-navbar-right">
2422
+
2423
+ <ul class="uk-navbar-nav">
2424
+ <li>
2425
+ <a href="#">Right</a>
2426
+ <div class="uk-navbar-dropdown">
2427
+ <ul class="uk-nav uk-navbar-dropdown-nav">
2428
+ <li class="uk-active"><a href="#">Active</a></li>
2429
+ <li class="uk-parent">
2430
+ <a href="#">Parent</a>
2431
+ <ul class="uk-nav-sub">
2432
+ <li><a href="#">Sub item</a></li>
2433
+ <li><a href="#">Sub item</a></li>
2434
+ </ul>
2435
+ </li>
2436
+ <li class="uk-nav-header">Header</li>
2437
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
2438
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
2439
+ <li class="uk-nav-divider"></li>
2440
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
2441
+ </ul>
2442
+ </div>
2443
+ </li>
2444
+ </ul>
2445
+
2446
+ </div>
1590
2447
  </div>
1591
- </nav>
2448
+ </div>
2449
+ </nav>
1592
2450
 
1593
- <nav class="uk-navbar-container uk-margin" uk-navbar>
1594
- <div class="uk-navbar-left">
2451
+ <nav class="uk-navbar-container uk-margin">
2452
+ <div class="uk-container">
2453
+ <div uk-navbar>
2454
+ <div class="uk-navbar-center">
1595
2455
 
1596
- <ul class="uk-navbar-nav">
1597
- <li>
1598
- <a href="#">Left</a>
1599
- <div class="uk-navbar-dropdown">
1600
- <ul class="uk-nav uk-navbar-dropdown-nav">
1601
- <li class="uk-active"><a href="#">Active</a></li>
1602
- <li class="uk-parent">
1603
- <a href="#">Parent</a>
1604
- <ul class="uk-nav-sub">
1605
- <li><a href="#">Sub item</a></li>
1606
- <li><a href="#">Sub item</a></li>
2456
+ <div class="uk-navbar-center-left">
2457
+ <ul class="uk-navbar-nav">
2458
+ <li class="uk-active"><a href="#">Active</a></li>
2459
+ <li>
2460
+ <a href="#">Parent</a>
2461
+ <div class="uk-navbar-dropdown">
2462
+ <ul class="uk-nav uk-navbar-dropdown-nav">
2463
+ <li class="uk-active"><a href="#">Active</a></li>
2464
+ <li class="uk-parent">
2465
+ <a href="#">Parent</a>
2466
+ <ul class="uk-nav-sub">
2467
+ <li><a href="#">Sub item</a></li>
2468
+ <li><a href="#">Sub item</a></li>
2469
+ </ul>
2470
+ </li>
2471
+ <li class="uk-nav-header">Header</li>
2472
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
2473
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
2474
+ <li class="uk-nav-divider"></li>
2475
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
1607
2476
  </ul>
1608
- </li>
1609
- <li class="uk-nav-header">Header</li>
1610
- <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
1611
- <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
1612
- <li class="uk-nav-divider"></li>
1613
- <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
1614
- </ul>
2477
+ </div>
2478
+ </li>
2479
+ <li>
2480
+ <a href="#">Content</a>
2481
+ <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>
2482
+ </li>
2483
+ </ul>
2484
+ </div>
2485
+
2486
+ <a class="uk-navbar-item uk-logo" href="#">Logo</a>
2487
+
2488
+ <div class="uk-navbar-center-right">
2489
+ <ul class="uk-navbar-nav">
2490
+ <li>
2491
+ <a href="#">Parent</a>
2492
+ <div class="uk-navbar-dropdown">
2493
+ <ul class="uk-nav uk-navbar-dropdown-nav">
2494
+ <li class="uk-active"><a href="#">Active</a></li>
2495
+ <li class="uk-parent">
2496
+ <a href="#">Parent</a>
2497
+ <ul class="uk-nav-sub">
2498
+ <li><a href="#">Sub item</a></li>
2499
+ <li><a href="#">Sub item</a></li>
2500
+ </ul>
2501
+ </li>
2502
+ <li class="uk-nav-header">Header</li>
2503
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
2504
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
2505
+ <li class="uk-nav-divider"></li>
2506
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
2507
+ </ul>
2508
+ </div>
2509
+ </li>
2510
+ <li>
2511
+ <a href="#">Content</a>
2512
+ <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>
2513
+ </li>
2514
+ </ul>
2515
+ <div class="uk-navbar-item">
2516
+ <div>Some <a href="#">Link</a></div>
1615
2517
  </div>
1616
- </li>
1617
- </ul>
2518
+ </div>
1618
2519
 
2520
+ </div>
1619
2521
  </div>
1620
- <div class="uk-navbar-center">
2522
+ </div>
2523
+ </nav>
2524
+
2525
+ <nav class="uk-navbar-container uk-margin">
2526
+ <div class="uk-container">
2527
+ <div uk-navbar>
2528
+ <div class="uk-navbar-left">
1621
2529
 
1622
- <div class="uk-navbar-center-left"><div>
1623
2530
  <ul class="uk-navbar-nav">
1624
- <li class="uk-active"><a href="#">Active</a></li>
1625
2531
  <li>
1626
- <a href="#">Parent</a>
2532
+ <a href="#">Left</a>
1627
2533
  <div class="uk-navbar-dropdown">
1628
2534
  <ul class="uk-nav uk-navbar-dropdown-nav">
1629
2535
  <li class="uk-active"><a href="#">Active</a></li>
1630
- <li class="uk-parent">
2536
+ <li class="uk-parent">
1631
2537
  <a href="#">Parent</a>
1632
2538
  <ul class="uk-nav-sub">
1633
2539
  <li><a href="#">Sub item</a></li>
@@ -1642,24 +2548,85 @@
1642
2548
  </ul>
1643
2549
  </div>
1644
2550
  </li>
1645
- <li>
1646
- <a href="#">Content</a>
1647
- <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>
1648
- </li>
1649
2551
  </ul>
1650
- </div></div>
1651
2552
 
1652
- <a class="uk-navbar-item uk-logo" href="#">Logo</a>
2553
+ </div>
2554
+ <div class="uk-navbar-center">
2555
+
2556
+ <div class="uk-navbar-center-left">
2557
+ <ul class="uk-navbar-nav">
2558
+ <li class="uk-active"><a href="#">Active</a></li>
2559
+ <li>
2560
+ <a href="#">Parent</a>
2561
+ <div class="uk-navbar-dropdown">
2562
+ <ul class="uk-nav uk-navbar-dropdown-nav">
2563
+ <li class="uk-active"><a href="#">Active</a></li>
2564
+ <li class="uk-parent">
2565
+ <a href="#">Parent</a>
2566
+ <ul class="uk-nav-sub">
2567
+ <li><a href="#">Sub item</a></li>
2568
+ <li><a href="#">Sub item</a></li>
2569
+ </ul>
2570
+ </li>
2571
+ <li class="uk-nav-header">Header</li>
2572
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
2573
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
2574
+ <li class="uk-nav-divider"></li>
2575
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
2576
+ </ul>
2577
+ </div>
2578
+ </li>
2579
+ <li>
2580
+ <a href="#">Content</a>
2581
+ <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>
2582
+ </li>
2583
+ </ul>
2584
+ </div>
2585
+
2586
+ <a class="uk-navbar-item uk-logo" href="#">Logo</a>
2587
+
2588
+ <div class="uk-navbar-center-right">
2589
+ <ul class="uk-navbar-nav">
2590
+ <li>
2591
+ <a href="#">Parent</a>
2592
+ <div class="uk-navbar-dropdown">
2593
+ <ul class="uk-nav uk-navbar-dropdown-nav">
2594
+ <li class="uk-active"><a href="#">Active</a></li>
2595
+ <li class="uk-parent">
2596
+ <a href="#">Parent</a>
2597
+ <ul class="uk-nav-sub">
2598
+ <li><a href="#">Sub item</a></li>
2599
+ <li><a href="#">Sub item</a></li>
2600
+ </ul>
2601
+ </li>
2602
+ <li class="uk-nav-header">Header</li>
2603
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
2604
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
2605
+ <li class="uk-nav-divider"></li>
2606
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
2607
+ </ul>
2608
+ </div>
2609
+ </li>
2610
+ <li>
2611
+ <a href="#">Content</a>
2612
+ <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>
2613
+ </li>
2614
+ </ul>
2615
+ <div class="uk-navbar-item">
2616
+ <div>Some <a href="#">Link</a></div>
2617
+ </div>
2618
+ </div>
2619
+
2620
+ </div>
2621
+ <div class="uk-navbar-right">
1653
2622
 
1654
- <div class="uk-navbar-center-right"><div>
1655
2623
  <ul class="uk-navbar-nav">
1656
- <li class="uk-active"><a href="#">Active</a></li>
1657
2624
  <li>
1658
- <a href="#">Parent</a>
2625
+ <a href="#">Right</a>
1659
2626
  <div class="uk-navbar-dropdown">
1660
2627
  <ul class="uk-nav uk-navbar-dropdown-nav">
1661
2628
  <li class="uk-active"><a href="#">Active</a></li>
1662
- <li class="uk-parent">
2629
+ <li class="uk-parent">
1663
2630
  <a href="#">Parent</a>
1664
2631
  <ul class="uk-nav-sub">
1665
2632
  <li><a href="#">Sub item</a></li>
@@ -1674,48 +2641,21 @@
1674
2641
  </ul>
1675
2642
  </div>
1676
2643
  </li>
1677
- <li>
1678
- <a href="#">Content</a>
1679
- <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>
1680
- </li>
1681
2644
  </ul>
1682
- <div class="uk-navbar-item">
1683
- <div>Some <a href="#">Link</a></div>
1684
- </div>
1685
- </div></div>
1686
2645
 
2646
+ </div>
1687
2647
  </div>
1688
- <div class="uk-navbar-right">
2648
+ </div>
2649
+ </nav>
1689
2650
 
1690
- <ul class="uk-navbar-nav">
1691
- <li>
1692
- <a href="#">Right</a>
1693
- <div class="uk-navbar-dropdown">
1694
- <ul class="uk-nav uk-navbar-dropdown-nav">
1695
- <li class="uk-active"><a href="#">Active</a></li>
1696
- <li class="uk-parent">
1697
- <a href="#">Parent</a>
1698
- <ul class="uk-nav-sub">
1699
- <li><a href="#">Sub item</a></li>
1700
- <li><a href="#">Sub item</a></li>
1701
- </ul>
1702
- </li>
1703
- <li class="uk-nav-header">Header</li>
1704
- <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
1705
- <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
1706
- <li class="uk-nav-divider"></li>
1707
- <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
1708
- </ul>
1709
- </div>
1710
- </li>
1711
- </ul>
2651
+ <div class="uk-container uk-margin-medium-top">
1712
2652
 
1713
- </div>
1714
- </nav>
2653
+ <h2>Stretch</h2>
1715
2654
 
1716
- <h2>Justify</h2>
2655
+ </div>
1717
2656
 
1718
- <nav class="uk-navbar-container uk-margin">
2657
+ <nav class="uk-navbar-container uk-margin">
2658
+ <div class="uk-container">
1719
2659
  <div class="uk-navbar-justify" uk-navbar>
1720
2660
  <div class="uk-navbar-left">
1721
2661
 
@@ -1726,29 +2666,29 @@
1726
2666
  <li><a href="#">Parent</a></li>
1727
2667
  <li><a href="#">Item</a></li>
1728
2668
  <li><a href="#">Item</a></li>
1729
- </ul>
1730
-
1731
- </div>
1732
- <div class="uk-navbar-right">
1733
-
1734
- <ul class="uk-navbar-nav">
1735
2669
  <li><a href="#">Item</a></li>
1736
2670
  </ul>
1737
2671
 
1738
2672
  <div class="uk-navbar-item">
1739
- <ul class="uk-grid-small" uk-grid>
2673
+ <ul class="uk-iconnav">
2674
+ <li>
2675
+ <a href="#" uk-icon="icon: user"></a>
2676
+ </li>
1740
2677
  <li>
1741
- <a class="uk-icon-button" href="#" uk-icon="icon: trash"></a>
2678
+ <a href="#" uk-icon="icon: bag"></a>
1742
2679
  </li>
1743
2680
  <li>
1744
- <a class="uk-icon-button" href="#" uk-icon="icon: trash"></a>
2681
+ <a href="#" uk-icon="icon: heart"></a>
1745
2682
  </li>
1746
2683
  </ul>
1747
2684
  </div>
1748
2685
 
1749
2686
  </div>
1750
2687
  </div>
1751
- </nav>
2688
+ </div>
2689
+ </nav>
2690
+
2691
+ <div class="uk-container uk-margin-medium-top">
1752
2692
 
1753
2693
  <h2>Layouts</h2>
1754
2694
 
@@ -1756,12 +2696,31 @@
1756
2696
 
1757
2697
  <nav class="uk-navbar-container uk-margin">
1758
2698
  <div class="uk-container">
1759
- <div class="uk-navbar">
2699
+ <div uk-navbar>
1760
2700
  <div class="uk-navbar-left">
1761
2701
 
1762
2702
  <ul class="uk-navbar-nav">
1763
2703
  <li class="uk-active"><a href="#">Active</a></li>
1764
- <li><a href="#">Parent</a></li>
2704
+ <li>
2705
+ <a href="#">Parent</a>
2706
+ <div class="uk-navbar-dropdown">
2707
+ <ul class="uk-nav uk-navbar-dropdown-nav">
2708
+ <li class="uk-active"><a href="#">Active</a></li>
2709
+ <li class="uk-parent">
2710
+ <a href="#">Parent</a>
2711
+ <ul class="uk-nav-sub">
2712
+ <li><a href="#">Sub item</a></li>
2713
+ <li><a href="#">Sub item</a></li>
2714
+ </ul>
2715
+ </li>
2716
+ <li class="uk-nav-header">Header</li>
2717
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
2718
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
2719
+ <li class="uk-nav-divider"></li>
2720
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
2721
+ </ul>
2722
+ </div>
2723
+ </li>
1765
2724
  <li><a href="#">Item</a></li>
1766
2725
  <li><a href="#">Item</a></li>
1767
2726
  </ul>
@@ -1773,14 +2732,33 @@
1773
2732
 
1774
2733
  <nav class="uk-navbar-container uk-margin">
1775
2734
  <div class="uk-container">
1776
- <div class="uk-navbar">
2735
+ <div uk-navbar>
1777
2736
  <div class="uk-navbar-left">
1778
2737
 
1779
2738
  <a class="uk-navbar-item uk-logo" href="#">Logo</a>
1780
2739
 
1781
2740
  <ul class="uk-navbar-nav">
1782
2741
  <li class="uk-active"><a href="#">Active</a></li>
1783
- <li><a href="#">Parent</a></li>
2742
+ <li>
2743
+ <a href="#">Parent</a>
2744
+ <div class="uk-navbar-dropdown">
2745
+ <ul class="uk-nav uk-navbar-dropdown-nav">
2746
+ <li class="uk-active"><a href="#">Active</a></li>
2747
+ <li class="uk-parent">
2748
+ <a href="#">Parent</a>
2749
+ <ul class="uk-nav-sub">
2750
+ <li><a href="#">Sub item</a></li>
2751
+ <li><a href="#">Sub item</a></li>
2752
+ </ul>
2753
+ </li>
2754
+ <li class="uk-nav-header">Header</li>
2755
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
2756
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
2757
+ <li class="uk-nav-divider"></li>
2758
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
2759
+ </ul>
2760
+ </div>
2761
+ </li>
1784
2762
  <li><a href="#">Item</a></li>
1785
2763
  <li><a href="#">Item</a></li>
1786
2764
  </ul>
@@ -1790,25 +2768,61 @@
1790
2768
 
1791
2769
  <ul class="uk-navbar-nav">
1792
2770
  <li class="uk-active"><a href="#">Active</a></li>
1793
- <li><a href="#">Parent</a></li>
1794
- <li><a href="#">Item</a></li>
2771
+ <li>
2772
+ <a href="#">Parent</a>
2773
+ <div class="uk-navbar-dropdown">
2774
+ <ul class="uk-nav uk-navbar-dropdown-nav">
2775
+ <li class="uk-active"><a href="#">Active</a></li>
2776
+ <li class="uk-parent">
2777
+ <a href="#">Parent</a>
2778
+ <ul class="uk-nav-sub">
2779
+ <li><a href="#">Sub item</a></li>
2780
+ <li><a href="#">Sub item</a></li>
2781
+ </ul>
2782
+ </li>
2783
+ <li class="uk-nav-header">Header</li>
2784
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
2785
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
2786
+ <li class="uk-nav-divider"></li>
2787
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
2788
+ </ul>
2789
+ </div>
2790
+ </li>
2791
+ <li><a href="#">sdaf asdf </a></li>
1795
2792
  </ul>
1796
2793
 
1797
2794
  <div class="uk-navbar-item">
1798
- <ul class="uk-grid-small" uk-grid>
2795
+ <ul class="uk-iconnav">
1799
2796
  <li>
1800
- <a class="uk-icon-button" href="#" uk-icon="icon: trash"></a>
2797
+ <a href="#" uk-icon="icon: user"></a>
1801
2798
  </li>
1802
2799
  <li>
1803
- <a class="uk-icon-button" href="#" uk-icon="icon: trash"></a>
2800
+ <a href="#" uk-icon="icon: bag"></a>
1804
2801
  </li>
1805
2802
  <li>
1806
- <a class="uk-icon-button" href="#" uk-icon="icon: trash"></a>
2803
+ <a href="#" uk-icon="icon: heart"></a>
1807
2804
  </li>
1808
2805
  </ul>
1809
2806
  </div>
1810
2807
 
1811
2808
  <a class="uk-navbar-toggle" 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">
2810
+ <ul class="uk-nav uk-navbar-dropdown-nav">
2811
+ <li class="uk-active"><a href="#">Active</a></li>
2812
+ <li class="uk-parent">
2813
+ <a href="#">Parent</a>
2814
+ <ul class="uk-nav-sub">
2815
+ <li><a href="#">Sub item</a></li>
2816
+ <li><a href="#">Sub item</a></li>
2817
+ </ul>
2818
+ </li>
2819
+ <li class="uk-nav-header">Header</li>
2820
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
2821
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
2822
+ <li class="uk-nav-divider"></li>
2823
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
2824
+ </ul>
2825
+ </div>
1812
2826
 
1813
2827
  </div>
1814
2828
  </div>
@@ -1817,7 +2831,7 @@
1817
2831
 
1818
2832
  <nav class="uk-navbar-container uk-margin">
1819
2833
  <div class="uk-container">
1820
- <div class="uk-navbar">
2834
+ <div uk-navbar>
1821
2835
  <div class="uk-navbar-left">
1822
2836
 
1823
2837
  <a class="uk-navbar-item uk-logo" href="#">Logo</a>
@@ -1827,7 +2841,26 @@
1827
2841
 
1828
2842
  <ul class="uk-navbar-nav">
1829
2843
  <li class="uk-active"><a href="#">Active</a></li>
1830
- <li><a href="#">Parent</a></li>
2844
+ <li>
2845
+ <a href="#">Parent</a>
2846
+ <div class="uk-navbar-dropdown">
2847
+ <ul class="uk-nav uk-navbar-dropdown-nav">
2848
+ <li class="uk-active"><a href="#">Active</a></li>
2849
+ <li class="uk-parent">
2850
+ <a href="#">Parent</a>
2851
+ <ul class="uk-nav-sub">
2852
+ <li><a href="#">Sub item</a></li>
2853
+ <li><a href="#">Sub item</a></li>
2854
+ </ul>
2855
+ </li>
2856
+ <li class="uk-nav-header">Header</li>
2857
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
2858
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
2859
+ <li class="uk-nav-divider"></li>
2860
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
2861
+ </ul>
2862
+ </div>
2863
+ </li>
1831
2864
  <li><a href="#">Item</a></li>
1832
2865
  <li><a href="#">Item</a></li>
1833
2866
  </ul>
@@ -1836,6 +2869,23 @@
1836
2869
  <div class="uk-navbar-right">
1837
2870
 
1838
2871
  <a class="uk-navbar-toggle" 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">
2873
+ <ul class="uk-nav uk-navbar-dropdown-nav">
2874
+ <li class="uk-active"><a href="#">Active</a></li>
2875
+ <li class="uk-parent">
2876
+ <a href="#">Parent</a>
2877
+ <ul class="uk-nav-sub">
2878
+ <li><a href="#">Sub item</a></li>
2879
+ <li><a href="#">Sub item</a></li>
2880
+ </ul>
2881
+ </li>
2882
+ <li class="uk-nav-header">Header</li>
2883
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
2884
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
2885
+ <li class="uk-nav-divider"></li>
2886
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
2887
+ </ul>
2888
+ </div>
1839
2889
 
1840
2890
  </div>
1841
2891
  </div>
@@ -1846,14 +2896,33 @@
1846
2896
 
1847
2897
  <nav class="uk-navbar-container uk-margin">
1848
2898
  <div class="uk-container uk-container-expand">
1849
- <div class="uk-navbar">
2899
+ <div uk-navbar>
1850
2900
  <div class="uk-navbar-left">
1851
2901
 
1852
2902
  <a class="uk-navbar-item uk-logo" href="#">Logo</a>
1853
2903
 
1854
2904
  <ul class="uk-navbar-nav">
1855
2905
  <li class="uk-active"><a href="#">Active</a></li>
1856
- <li><a href="#">Parent</a></li>
2906
+ <li>
2907
+ <a href="#">Parent</a>
2908
+ <div class="uk-navbar-dropdown">
2909
+ <ul class="uk-nav uk-navbar-dropdown-nav">
2910
+ <li class="uk-active"><a href="#">Active</a></li>
2911
+ <li class="uk-parent">
2912
+ <a href="#">Parent</a>
2913
+ <ul class="uk-nav-sub">
2914
+ <li><a href="#">Sub item</a></li>
2915
+ <li><a href="#">Sub item</a></li>
2916
+ </ul>
2917
+ </li>
2918
+ <li class="uk-nav-header">Header</li>
2919
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
2920
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
2921
+ <li class="uk-nav-divider"></li>
2922
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
2923
+ </ul>
2924
+ </div>
2925
+ </li>
1857
2926
  <li><a href="#">Item</a></li>
1858
2927
  <li><a href="#">Item</a></li>
1859
2928
  </ul>
@@ -1865,14 +2934,33 @@
1865
2934
 
1866
2935
  <nav class="uk-navbar-container uk-margin">
1867
2936
  <div class="uk-container uk-container-expand">
1868
- <div class="uk-navbar">
2937
+ <div uk-navbar>
1869
2938
  <div class="uk-navbar-left">
1870
2939
 
1871
2940
  <a class="uk-navbar-item uk-logo" href="#">Logo</a>
1872
2941
 
1873
2942
  <ul class="uk-navbar-nav">
1874
2943
  <li class="uk-active"><a href="#">Active</a></li>
1875
- <li><a href="#">Parent</a></li>
2944
+ <li>
2945
+ <a href="#">Parent</a>
2946
+ <div class="uk-navbar-dropdown">
2947
+ <ul class="uk-nav uk-navbar-dropdown-nav">
2948
+ <li class="uk-active"><a href="#">Active</a></li>
2949
+ <li class="uk-parent">
2950
+ <a href="#">Parent</a>
2951
+ <ul class="uk-nav-sub">
2952
+ <li><a href="#">Sub item</a></li>
2953
+ <li><a href="#">Sub item</a></li>
2954
+ </ul>
2955
+ </li>
2956
+ <li class="uk-nav-header">Header</li>
2957
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
2958
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
2959
+ <li class="uk-nav-divider"></li>
2960
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
2961
+ </ul>
2962
+ </div>
2963
+ </li>
1876
2964
  <li><a href="#">Item</a></li>
1877
2965
  <li><a href="#">Item</a></li>
1878
2966
  </ul>
@@ -1882,11 +2970,47 @@
1882
2970
 
1883
2971
  <ul class="uk-navbar-nav">
1884
2972
  <li class="uk-active"><a href="#">Active</a></li>
1885
- <li><a href="#">Parent</a></li>
1886
- <li><a href="#">Item</a></li>
2973
+ <li>
2974
+ <a href="#">Parent</a>
2975
+ <div class="uk-navbar-dropdown">
2976
+ <ul class="uk-nav uk-navbar-dropdown-nav">
2977
+ <li class="uk-active"><a href="#">Active</a></li>
2978
+ <li class="uk-parent">
2979
+ <a href="#">Parent</a>
2980
+ <ul class="uk-nav-sub">
2981
+ <li><a href="#">Sub item</a></li>
2982
+ <li><a href="#">Sub item</a></li>
2983
+ </ul>
2984
+ </li>
2985
+ <li class="uk-nav-header">Header</li>
2986
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
2987
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
2988
+ <li class="uk-nav-divider"></li>
2989
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
2990
+ </ul>
2991
+ </div>
2992
+ </li>
2993
+ <li><a href="#">asdf</a></li>
1887
2994
  </ul>
1888
2995
 
1889
2996
  <a class="uk-navbar-toggle" 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">
2998
+ <ul class="uk-nav uk-navbar-dropdown-nav">
2999
+ <li class="uk-active"><a href="#">Active</a></li>
3000
+ <li class="uk-parent">
3001
+ <a href="#">Parent</a>
3002
+ <ul class="uk-nav-sub">
3003
+ <li><a href="#">Sub item</a></li>
3004
+ <li><a href="#">Sub item</a></li>
3005
+ </ul>
3006
+ </li>
3007
+ <li class="uk-nav-header">Header</li>
3008
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
3009
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
3010
+ <li class="uk-nav-divider"></li>
3011
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
3012
+ </ul>
3013
+ </div>
1890
3014
 
1891
3015
  </div>
1892
3016
  </div>
@@ -1895,7 +3019,7 @@
1895
3019
 
1896
3020
  <nav class="uk-navbar-container uk-margin">
1897
3021
  <div class="uk-container uk-container-expand">
1898
- <div class="uk-navbar">
3022
+ <div uk-navbar>
1899
3023
  <div class="uk-navbar-left">
1900
3024
 
1901
3025
  <a class="uk-navbar-item uk-logo" href="#">Logo</a>
@@ -1905,7 +3029,26 @@
1905
3029
 
1906
3030
  <ul class="uk-navbar-nav ">
1907
3031
  <li class="uk-active"><a href="#">Active</a></li>
1908
- <li><a href="#">Parent</a></li>
3032
+ <li>
3033
+ <a href="#">Parent</a>
3034
+ <div class="uk-navbar-dropdown">
3035
+ <ul class="uk-nav uk-navbar-dropdown-nav">
3036
+ <li class="uk-active"><a href="#">Active</a></li>
3037
+ <li class="uk-parent">
3038
+ <a href="#">Parent</a>
3039
+ <ul class="uk-nav-sub">
3040
+ <li><a href="#">Sub item</a></li>
3041
+ <li><a href="#">Sub item</a></li>
3042
+ </ul>
3043
+ </li>
3044
+ <li class="uk-nav-header">Header</li>
3045
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
3046
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
3047
+ <li class="uk-nav-divider"></li>
3048
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
3049
+ </ul>
3050
+ </div>
3051
+ </li>
1909
3052
  <li><a href="#">Item</a></li>
1910
3053
  <li><a href="#">Item</a></li>
1911
3054
  </ul>
@@ -1914,13 +3057,30 @@
1914
3057
  <div class="uk-navbar-right">
1915
3058
 
1916
3059
  <a class="uk-navbar-toggle" 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">
3061
+ <ul class="uk-nav uk-navbar-dropdown-nav">
3062
+ <li class="uk-active"><a href="#">Active</a></li>
3063
+ <li class="uk-parent">
3064
+ <a href="#">Parent</a>
3065
+ <ul class="uk-nav-sub">
3066
+ <li><a href="#">Sub item</a></li>
3067
+ <li><a href="#">Sub item</a></li>
3068
+ </ul>
3069
+ </li>
3070
+ <li class="uk-nav-header">Header</li>
3071
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
3072
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
3073
+ <li class="uk-nav-divider"></li>
3074
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
3075
+ </ul>
3076
+ </div>
1917
3077
 
1918
3078
  </div>
1919
3079
  </div>
1920
3080
  </div>
1921
3081
  </nav>
1922
3082
 
1923
- <div class="uk-container">
3083
+ <div class="uk-container uk-margin-medium-top">
1924
3084
 
1925
3085
  <h2>JavaScript Options</h2>
1926
3086
 
@@ -1945,7 +3105,7 @@
1945
3105
  <td><code>mode</code></td>
1946
3106
  <td>hover | click</td>
1947
3107
  <td>click,hover</td>
1948
- <td>Comma separated list of dropdown trigger behaviour modes.</td>
3108
+ <td>Comma-separated list of dropdown trigger behavior modes.</td>
1949
3109
  </tr>
1950
3110
  <tr>
1951
3111
  <td><code>delay-show</code></td>
@@ -1961,15 +3121,15 @@
1961
3121
  </tr>
1962
3122
  <tr>
1963
3123
  <td><code>boundary</code></td>
1964
- <td>CSS selector</td>
3124
+ <td>Boolean, CSS selector</td>
1965
3125
  <td>true</td>
1966
3126
  <td>Referenced element to keep Drop's visibility. By default, it's the navbar component's element.</td>
1967
3127
  </tr>
1968
3128
  <tr>
1969
- <td><code>boundary-align</code></td>
1970
- <td>Boolean</td>
3129
+ <td><code>target</code></td>
3130
+ <td>Boolean, CSS selector</td>
1971
3131
  <td>false</td>
1972
- <td>Align Drop to boundary.</td>
3132
+ <td>Align Drop to navbar.</td>
1973
3133
  </tr>
1974
3134
  <tr>
1975
3135
  <td><code>cls-drop</code></td>
@@ -2018,24 +3178,30 @@
2018
3178
 
2019
3179
  <script>
2020
3180
 
2021
- var util = UIkit.util,
2022
- tracker = new util.MouseTracker(),
2023
- el = util.$('#js-mousetracker'),
2024
- target = util.$('#js-mousetarget'),
2025
- interval;
3181
+ const {$, addClass, on, removeClass, MouseTracker } = UIkit.util;
3182
+ const tracker = MouseTracker();
3183
+ const el = $('#js-mousetracker');
3184
+ const target = $('#js-mousetarget');
3185
+ let interval;
2026
3186
 
2027
- util.on(el, 'mouseenter', function () {
3187
+ on(el, 'mouseenter', () => {
2028
3188
  tracker.init();
2029
- interval = setInterval(function () {
2030
- target.textContent = tracker.movesTo(target.parentNode) ? 'Moves to' : 'Does not move to';
2031
- });
3189
+ interval = setInterval(() => target.textContent = tracker.movesTo(target.parentNode) ? 'Moves to' : 'Does not move to');
2032
3190
  });
2033
3191
 
2034
- util.on(el, 'mouseleave', function () {
3192
+ on(el, 'mouseleave', () => {
2035
3193
  tracker.cancel();
2036
3194
  clearInterval(interval);
2037
3195
  });
2038
3196
 
3197
+ on('#js-size-switcher', 'change', (e) => {
3198
+ const options = $$('option', e.target).map(({value}) => value);
3199
+ for (const el of $$('.uk-navbar-dropdown')) {
3200
+ removeClass(el, options);
3201
+ addClass(el, e.target.value);
3202
+ }
3203
+ });
3204
+
2039
3205
  </script>
2040
3206
 
2041
3207
  </body>