uikit 3.14.4-dev.838f092aa → 3.14.4-dev.846652f92

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 (72) hide show
  1. package/CHANGELOG.md +8 -0
  2. package/dist/css/uikit-core-rtl.css +45 -11
  3. package/dist/css/uikit-core-rtl.min.css +1 -1
  4. package/dist/css/uikit-core.css +45 -11
  5. package/dist/css/uikit-core.min.css +1 -1
  6. package/dist/css/uikit-rtl.css +42 -11
  7. package/dist/css/uikit-rtl.min.css +1 -1
  8. package/dist/css/uikit.css +42 -11
  9. package/dist/css/uikit.min.css +1 -1
  10. package/dist/js/components/countdown.js +1 -1
  11. package/dist/js/components/countdown.min.js +1 -1
  12. package/dist/js/components/filter.js +1 -1
  13. package/dist/js/components/filter.min.js +1 -1
  14. package/dist/js/components/lightbox-panel.js +23 -8
  15. package/dist/js/components/lightbox-panel.min.js +1 -1
  16. package/dist/js/components/lightbox.js +23 -8
  17. package/dist/js/components/lightbox.min.js +1 -1
  18. package/dist/js/components/notification.js +1 -1
  19. package/dist/js/components/notification.min.js +1 -1
  20. package/dist/js/components/parallax.js +1 -1
  21. package/dist/js/components/parallax.min.js +1 -1
  22. package/dist/js/components/slider-parallax.js +1 -1
  23. package/dist/js/components/slider-parallax.min.js +1 -1
  24. package/dist/js/components/slider.js +22 -7
  25. package/dist/js/components/slider.min.js +1 -1
  26. package/dist/js/components/slideshow-parallax.js +1 -1
  27. package/dist/js/components/slideshow-parallax.min.js +1 -1
  28. package/dist/js/components/slideshow.js +22 -7
  29. package/dist/js/components/slideshow.min.js +1 -1
  30. package/dist/js/components/sortable.js +3 -3
  31. package/dist/js/components/sortable.min.js +1 -1
  32. package/dist/js/components/tooltip.js +23 -6
  33. package/dist/js/components/tooltip.min.js +1 -1
  34. package/dist/js/components/upload.js +1 -1
  35. package/dist/js/components/upload.min.js +1 -1
  36. package/dist/js/uikit-core.js +50 -42
  37. package/dist/js/uikit-core.min.js +1 -1
  38. package/dist/js/uikit-icons.js +1 -1
  39. package/dist/js/uikit-icons.min.js +1 -1
  40. package/dist/js/uikit.js +97 -74
  41. package/dist/js/uikit.min.js +1 -1
  42. package/package.json +1 -1
  43. package/src/images/backgrounds/nav-parent-close.svg +1 -1
  44. package/src/images/backgrounds/nav-parent-open.svg +1 -1
  45. package/src/js/components/sortable.js +2 -3
  46. package/src/js/core/drop.js +2 -1
  47. package/src/js/core/height-viewport.js +9 -5
  48. package/src/js/core/sticky.js +8 -9
  49. package/src/js/mixin/modal.js +1 -1
  50. package/src/js/mixin/position.js +27 -5
  51. package/src/js/mixin/slider-drag.js +20 -8
  52. package/src/js/util/dimensions.js +6 -6
  53. package/src/js/util/position.js +1 -0
  54. package/src/js/util/viewport.js +2 -27
  55. package/src/less/components/dropdown.less +8 -0
  56. package/src/less/components/nav.less +22 -4
  57. package/src/less/components/navbar.less +12 -3
  58. package/src/less/components/utility.less +12 -3
  59. package/src/less/theme/nav.less +3 -7
  60. package/src/less/theme/navbar.less +2 -0
  61. package/src/scss/components/dropdown.scss +8 -0
  62. package/src/scss/components/nav.scss +24 -6
  63. package/src/scss/components/navbar.scss +12 -3
  64. package/src/scss/components/utility.scss +12 -3
  65. package/src/scss/mixins-theme.scss +1 -1
  66. package/src/scss/theme/nav.scss +3 -7
  67. package/src/scss/theme/navbar.scss +2 -0
  68. package/src/scss/variables-theme.scss +13 -6
  69. package/src/scss/variables.scss +13 -5
  70. package/tests/drop.html +66 -16
  71. package/tests/dropdown.html +103 -16
  72. package/tests/navbar.html +1927 -1125
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">
@@ -236,780 +206,1384 @@
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">
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="#">Justify</a>
349
+ <div class="uk-navbar-dropdown" uk-drop="cls-drop: uk-navbar-dropdown; boundary: !.uk-navbar; boundary-align: true; pos: bottom-justify; flip: x">
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="#">Justify Full</a>
391
+ <div class="uk-navbar-dropdown" uk-drop="cls-drop: uk-navbar-dropdown; boundary: !.uk-navbar-container; pos: bottom-justify; flip: x">
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="#">Justify</a>
573
+ <div class="uk-navbar-dropdown" uk-drop="cls-drop: uk-navbar-dropdown; boundary: !.uk-navbar; boundary-align: true; pos: bottom-justify; flip: x">
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="#">Justify</a>
729
+ <div class="uk-navbar-dropdown" uk-drop="cls-drop: uk-navbar-dropdown; boundary: !.uk-navbar; boundary-align: true; pos: bottom-justify; flip: x">
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">
803
+
804
+ <h2>Boundary Align</h2>
805
+
806
+ </div>
807
+
808
+ <nav class="uk-navbar-container uk-margin">
809
+ <div class="uk-container">
810
+
811
+ <div uk-navbar="boundary-align: true">
812
+ <div class="uk-navbar-left">
813
+
814
+ <ul class="uk-navbar-nav">
815
+ <li class="uk-active">
816
+ <a href="#">Left</a>
817
+ <div class="uk-navbar-dropdown">
818
+ <ul class="uk-nav uk-navbar-dropdown-nav">
819
+ <li class="uk-active"><a href="#">Active</a></li>
820
+ <li class="uk-parent">
821
+ <a href="#">Parent</a>
822
+ <ul class="uk-nav-sub">
823
+ <li><a href="#">Sub item</a></li>
824
+ <li><a href="#">Sub item</a></li>
825
+ </ul>
826
+ </li>
827
+ <li class="uk-nav-header">Header</li>
828
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
829
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
830
+ <li class="uk-nav-divider"></li>
831
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
832
+ </ul>
833
+ </div>
834
+ </li>
835
+ <li>
836
+ <a href="#">2 Columns</a>
837
+ <div class="uk-navbar-dropdown uk-navbar-dropdown-width-2">
838
+ <div class="uk-navbar-dropdown-grid uk-child-width-1-2" uk-grid>
839
+ <div>
840
+ <ul class="uk-nav uk-navbar-dropdown-nav">
841
+ <li class="uk-active"><a href="#">Active</a></li>
842
+ <li class="uk-parent"><a href="#">Parent</a></li>
843
+ <li class="uk-nav-header">Header</li>
844
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
845
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
846
+ <li class="uk-nav-divider"></li>
847
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
848
+ </ul>
849
+ </div>
850
+ <div>
851
+ <ul class="uk-nav uk-navbar-dropdown-nav">
852
+ <li class="uk-active"><a href="#">Active</a></li>
853
+ <li class="uk-parent"><a href="#">Parent</a></li>
854
+ <li class="uk-nav-header">Header</li>
855
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
856
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
857
+ <li class="uk-nav-divider"></li>
858
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
859
+ </ul>
860
+ </div>
861
+ </div>
862
+ </div>
863
+ </li>
864
+ <li>
865
+ <a href="#">3 Columns</a>
866
+ <div class="uk-navbar-dropdown uk-navbar-dropdown-width-3">
867
+ <div class="uk-navbar-dropdown-grid uk-child-width-1-3" uk-grid>
868
+ <div>
869
+ <ul class="uk-nav uk-navbar-dropdown-nav">
870
+ <li class="uk-active"><a href="#">Active</a></li>
871
+ <li class="uk-parent"><a href="#">Parent</a></li>
872
+ <li class="uk-nav-header">Header</li>
873
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
874
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
875
+ </ul>
876
+ </div>
877
+ <div>
878
+ <ul class="uk-nav uk-navbar-dropdown-nav">
879
+ <li class="uk-active"><a href="#">Active</a></li>
880
+ <li class="uk-parent"><a href="#">Parent</a></li>
881
+ <li class="uk-nav-header">Header</li>
882
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
883
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
884
+ </ul>
885
+ </div>
886
+ <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
887
+ </div>
888
+ </div>
889
+ </li>
890
+ <li>
891
+ <a href="#">Justify</a>
892
+ <div class="uk-navbar-dropdown" uk-drop="cls-drop: uk-navbar-dropdown; boundary: !.uk-navbar; boundary-align: true; pos: bottom-justify; flip: x">
893
+ <div class="uk-navbar-dropdown-grid uk-child-width-1-3@m" uk-grid>
894
+ <div>
895
+ <ul class="uk-nav uk-navbar-dropdown-nav">
896
+ <li class="uk-active"><a href="#">Active</a></li>
897
+ <li class="uk-parent">
898
+ <a href="#">Parent</a>
899
+ <ul class="uk-nav-sub">
900
+ <li><a href="#">Sub item</a></li>
901
+ <li><a href="#">Sub item</a></li>
902
+ </ul>
903
+ </li>
904
+ <li class="uk-nav-header">Header</li>
905
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
906
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
907
+ <li class="uk-nav-divider"></li>
908
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
909
+ </ul>
910
+ </div>
911
+ <div>
912
+ <ul class="uk-nav uk-navbar-dropdown-nav">
913
+ <li class="uk-active"><a href="#">Active</a></li>
914
+ <li class="uk-parent">
915
+ <a href="#">Parent</a>
916
+ <ul class="uk-nav-sub">
917
+ <li><a href="#">Sub item</a></li>
918
+ <li><a href="#">Sub item</a></li>
919
+ </ul>
920
+ </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
+ <li class="uk-nav-divider"></li>
925
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
926
+ </ul>
927
+ </div>
928
+ <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
492
929
  </div>
493
- <div>
494
- <ul class="uk-nav uk-navbar-dropdown-nav">
495
- <li class="uk-active"><a href="#">Active</a></li>
496
- <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>
930
+ </div>
931
+ </li>
932
+ <li>
933
+ <a href="#">Justify Full</a>
934
+ <div class="uk-navbar-dropdown" uk-drop="cls-drop: uk-navbar-dropdown; boundary: !.uk-navbar-container; boundary-align: true; pos: bottom-justify; flip: x">
935
+ <div class="uk-navbar-dropdown-grid uk-child-width-1-3@m" uk-grid>
936
+ <div>
937
+ <ul class="uk-nav uk-navbar-dropdown-nav">
938
+ <li class="uk-active"><a href="#">Active</a></li>
939
+ <li class="uk-parent">
940
+ <a href="#">Parent</a>
941
+ <ul class="uk-nav-sub">
942
+ <li><a href="#">Sub item</a></li>
943
+ <li><a href="#">Sub item</a></li>
944
+ </ul>
945
+ </li>
946
+ <li class="uk-nav-header">Header</li>
947
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
948
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
949
+ <li class="uk-nav-divider"></li>
950
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
951
+ </ul>
952
+ </div>
953
+ <div>
954
+ <ul class="uk-nav uk-navbar-dropdown-nav">
955
+ <li class="uk-active"><a href="#">Active</a></li>
956
+ <li class="uk-parent">
957
+ <a href="#">Parent</a>
958
+ <ul class="uk-nav-sub">
959
+ <li><a href="#">Sub item</a></li>
960
+ <li><a href="#">Sub item</a></li>
961
+ </ul>
962
+ </li>
963
+ <li class="uk-nav-header">Header</li>
964
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
965
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
966
+ <li class="uk-nav-divider"></li>
967
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
968
+ </ul>
969
+ </div>
970
+ <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
509
971
  </div>
510
- <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
511
972
  </div>
512
- </div>
513
- </li>
514
- </ul>
973
+ </li>
974
+ </ul>
515
975
 
516
- </div>
517
- <div class="uk-navbar-right">
976
+ </div>
977
+ <div class="uk-navbar-right">
518
978
 
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>
979
+ <ul class="uk-navbar-nav">
980
+ <li>
981
+ <a href="#">1 Column</a>
982
+ <div class="uk-navbar-dropdown">
983
+ <ul class="uk-nav uk-navbar-dropdown-nav">
984
+ <li class="uk-active"><a href="#">Active</a></li>
985
+ <li class="uk-parent">
986
+ <a href="#">Parent</a>
987
+ <ul class="uk-nav-sub">
988
+ <li><a href="#">Sub item</a></li>
989
+ <li><a href="#">Sub item</a></li>
990
+ </ul>
991
+ </li>
992
+ <li class="uk-nav-header">Header</li>
993
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
994
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
995
+ <li class="uk-nav-divider"></li>
996
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
997
+ </ul>
998
+ </div>
999
+ </li>
1000
+ </ul>
541
1001
 
1002
+ </div>
542
1003
  </div>
543
- </nav>
1004
+ </div>
1005
+ </nav>
1006
+
1007
+ <nav class="uk-navbar-container uk-margin">
1008
+ <div class="uk-container">
1009
+ <div uk-navbar="align: right; boundary-align: true">
1010
+ <div class="uk-navbar-left">
544
1011
 
545
- <nav class="uk-navbar-container uk-margin" uk-navbar="align: center; boundary: html">
546
- <div class="uk-navbar-left">
1012
+ <ul class="uk-navbar-nav">
1013
+ <li>
1014
+ <a href="#">1 Column</a>
1015
+ <div class="uk-navbar-dropdown">
1016
+ <ul class="uk-nav uk-navbar-dropdown-nav">
1017
+ <li class="uk-active"><a href="#">Active</a></li>
1018
+ <li class="uk-parent">
1019
+ <a href="#">Parent</a>
1020
+ <ul class="uk-nav-sub">
1021
+ <li><a href="#">Sub item</a></li>
1022
+ <li><a href="#">Sub item</a></li>
1023
+ </ul>
1024
+ </li>
1025
+ <li class="uk-nav-header">Header</li>
1026
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
1027
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
1028
+ <li class="uk-nav-divider"></li>
1029
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
1030
+ </ul>
1031
+ </div>
1032
+ </li>
1033
+ </ul>
547
1034
 
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>
1035
+ </div>
1036
+ <div class="uk-navbar-right">
1037
+
1038
+ <ul class="uk-navbar-nav">
1039
+ <li class="uk-active">
1040
+ <a href="#">Right</a>
1041
+ <div class="uk-navbar-dropdown">
1042
+ <ul class="uk-nav uk-navbar-dropdown-nav">
1043
+ <li class="uk-active"><a href="#">Active</a></li>
1044
+ <li class="uk-parent">
1045
+ <a href="#">Parent</a>
1046
+ <ul class="uk-nav-sub">
1047
+ <li><a href="#">Sub item</a></li>
1048
+ <li><a href="#">Sub item</a></li>
1049
+ </ul>
1050
+ </li>
1051
+ <li class="uk-nav-header">Header</li>
1052
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
1053
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
1054
+ <li class="uk-nav-divider"></li>
1055
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
1056
+ </ul>
595
1057
  </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>
1058
+ </li>
1059
+ <li>
1060
+ <a href="#">2 Columns</a>
1061
+ <div class="uk-navbar-dropdown uk-navbar-dropdown-width-2">
1062
+ <div class="uk-navbar-dropdown-grid uk-child-width-1-2" uk-grid>
1063
+ <div>
1064
+ <ul class="uk-nav uk-navbar-dropdown-nav">
1065
+ <li class="uk-active"><a href="#">Active</a></li>
1066
+ <li class="uk-parent"><a href="#">Parent</a></li>
1067
+ <li class="uk-nav-header">Header</li>
1068
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
1069
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
1070
+ <li class="uk-nav-divider"></li>
1071
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
1072
+ </ul>
1073
+ </div>
1074
+ <div>
1075
+ <ul class="uk-nav uk-navbar-dropdown-nav">
1076
+ <li class="uk-active"><a href="#">Active</a></li>
1077
+ <li class="uk-parent"><a href="#">Parent</a></li>
1078
+ <li class="uk-nav-header">Header</li>
1079
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
1080
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
1081
+ <li class="uk-nav-divider"></li>
1082
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
1083
+ </ul>
1084
+ </div>
610
1085
  </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>
1086
+ </div>
1087
+ </li>
1088
+ <li>
1089
+ <a href="#">3 Columns</a>
1090
+ <div class="uk-navbar-dropdown uk-navbar-dropdown-width-3">
1091
+ <div class="uk-navbar-dropdown-grid uk-child-width-1-3" uk-grid>
1092
+ <div>
1093
+ <ul class="uk-nav uk-navbar-dropdown-nav">
1094
+ <li class="uk-active"><a href="#">Active</a></li>
1095
+ <li class="uk-parent"><a href="#">Parent</a></li>
1096
+ <li class="uk-nav-header">Header</li>
1097
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
1098
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
1099
+ </ul>
1100
+ </div>
1101
+ <div>
1102
+ <ul class="uk-nav uk-navbar-dropdown-nav">
1103
+ <li class="uk-active"><a href="#">Active</a></li>
1104
+ <li class="uk-parent"><a href="#">Parent</a></li>
1105
+ <li class="uk-nav-header">Header</li>
1106
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
1107
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
1108
+ </ul>
1109
+ </div>
1110
+ <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
619
1111
  </div>
620
- <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
621
1112
  </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>
644
- </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>
1113
+ </li>
1114
+ <li>
1115
+ <a href="#">Justify</a>
1116
+ <div class="uk-navbar-dropdown" uk-drop="cls-drop: uk-navbar-dropdown; boundary: !.uk-navbar; boundary-align: true; pos: bottom-justify; flip: x">
1117
+ <div class="uk-navbar-dropdown-grid uk-child-width-1-3@m" uk-grid>
1118
+ <div>
1119
+ <ul class="uk-nav uk-navbar-dropdown-nav">
1120
+ <li class="uk-active"><a href="#">Active</a></li>
1121
+ <li class="uk-parent">
1122
+ <a href="#">Parent</a>
1123
+ <ul class="uk-nav-sub">
1124
+ <li><a href="#">Sub item</a></li>
1125
+ <li><a href="#">Sub item</a></li>
1126
+ </ul>
1127
+ </li>
1128
+ <li class="uk-nav-header">Header</li>
1129
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
1130
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
1131
+ <li class="uk-nav-divider"></li>
1132
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
1133
+ </ul>
1134
+ </div>
1135
+ <div>
1136
+ <ul class="uk-nav uk-navbar-dropdown-nav">
1137
+ <li class="uk-active"><a href="#">Active</a></li>
1138
+ <li class="uk-parent">
1139
+ <a href="#">Parent</a>
1140
+ <ul class="uk-nav-sub">
1141
+ <li><a href="#">Sub item</a></li>
1142
+ <li><a href="#">Sub item</a></li>
1143
+ </ul>
1144
+ </li>
1145
+ <li class="uk-nav-header">Header</li>
1146
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
1147
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
1148
+ <li class="uk-nav-divider"></li>
1149
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
1150
+ </ul>
1151
+ </div>
1152
+ <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
661
1153
  </div>
662
- <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
663
1154
  </div>
664
- </div>
665
- </li>
666
- </ul>
1155
+ </li>
1156
+ </ul>
667
1157
 
1158
+ </div>
668
1159
  </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>
1160
+ </div>
1161
+ </nav>
693
1162
 
694
- </div>
695
- </nav>
1163
+ <nav class="uk-navbar-container uk-margin">
1164
+ <div class="uk-container">
1165
+ <div uk-navbar="align: center; boundary-align: true">
1166
+ <div class="uk-navbar-left">
696
1167
 
697
- <h3>Boundary</h3>
1168
+ <ul class="uk-navbar-nav">
1169
+ <li>
1170
+ <a href="#">1 Column</a>
1171
+ <div class="uk-navbar-dropdown">
1172
+ <ul class="uk-nav uk-navbar-dropdown-nav">
1173
+ <li class="uk-active"><a href="#">Active</a></li>
1174
+ <li class="uk-parent">
1175
+ <a href="#">Parent</a>
1176
+ <ul class="uk-nav-sub">
1177
+ <li><a href="#">Sub item</a></li>
1178
+ <li><a href="#">Sub item</a></li>
1179
+ </ul>
1180
+ </li>
1181
+ <li class="uk-nav-header">Header</li>
1182
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
1183
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
1184
+ <li class="uk-nav-divider"></li>
1185
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
1186
+ </ul>
1187
+ </div>
1188
+ </li>
1189
+ </ul>
698
1190
 
699
- <nav class="uk-navbar-container uk-margin" uk-navbar="align: center; boundary-align: true">
700
- <div class="uk-navbar-left">
1191
+ </div>
1192
+ <div class="uk-navbar-center">
701
1193
 
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>
1194
+ <ul class="uk-navbar-nav">
1195
+ <li class="uk-active">
1196
+ <a href="#">Center</a>
1197
+ <div class="uk-navbar-dropdown">
1198
+ <ul class="uk-nav uk-navbar-dropdown-nav">
1199
+ <li class="uk-active"><a href="#">Active</a></li>
1200
+ <li class="uk-parent">
1201
+ <a href="#">Parent</a>
1202
+ <ul class="uk-nav-sub">
1203
+ <li><a href="#">Sub item</a></li>
1204
+ <li><a href="#">Sub item</a></li>
1205
+ </ul>
1206
+ </li>
1207
+ <li class="uk-nav-header">Header</li>
1208
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
1209
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
1210
+ <li class="uk-nav-divider"></li>
1211
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
1212
+ </ul>
1213
+ </div>
1214
+ </li>
1215
+ <li>
1216
+ <a href="#">2 Columns</a>
1217
+ <div class="uk-navbar-dropdown uk-navbar-dropdown-width-2">
1218
+ <div class="uk-navbar-dropdown-grid uk-child-width-1-2" uk-grid>
1219
+ <div>
1220
+ <ul class="uk-nav uk-navbar-dropdown-nav">
1221
+ <li class="uk-active"><a href="#">Active</a></li>
1222
+ <li class="uk-parent"><a href="#">Parent</a></li>
1223
+ <li class="uk-nav-header">Header</li>
1224
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
1225
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
1226
+ <li class="uk-nav-divider"></li>
1227
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
1228
+ </ul>
1229
+ </div>
1230
+ <div>
1231
+ <ul class="uk-nav uk-navbar-dropdown-nav">
1232
+ <li class="uk-active"><a href="#">Active</a></li>
1233
+ <li class="uk-parent"><a href="#">Parent</a></li>
1234
+ <li class="uk-nav-header">Header</li>
1235
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
1236
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
1237
+ <li class="uk-nav-divider"></li>
1238
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
1239
+ </ul>
1240
+ </div>
748
1241
  </div>
749
1242
  </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>
1243
+ </li>
1244
+ <li>
1245
+ <a href="#">3 Columns</a>
1246
+ <div class="uk-navbar-dropdown uk-navbar-dropdown-width-3">
1247
+ <div class="uk-navbar-dropdown-grid uk-child-width-1-3" uk-grid>
1248
+ <div>
1249
+ <ul class="uk-nav uk-navbar-dropdown-nav">
1250
+ <li class="uk-active"><a href="#">Active</a></li>
1251
+ <li class="uk-parent"><a href="#">Parent</a></li>
1252
+ <li class="uk-nav-header">Header</li>
1253
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
1254
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
1255
+ </ul>
1256
+ </div>
1257
+ <div>
1258
+ <ul class="uk-nav uk-navbar-dropdown-nav">
1259
+ <li class="uk-active"><a href="#">Active</a></li>
1260
+ <li class="uk-parent"><a href="#">Parent</a></li>
1261
+ <li class="uk-nav-header">Header</li>
1262
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
1263
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
1264
+ </ul>
1265
+ </div>
1266
+ <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
764
1267
  </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>
1268
+ </div>
1269
+ </li>
1270
+ <li>
1271
+ <a href="#">Justify</a>
1272
+ <div class="uk-navbar-dropdown" uk-drop="cls-drop: uk-navbar-dropdown; boundary: !.uk-navbar; boundary-align: true; pos: bottom-justify; flip: x">
1273
+ <div class="uk-navbar-dropdown-grid uk-child-width-1-3@m" uk-grid>
1274
+ <div>
1275
+ <ul class="uk-nav uk-navbar-dropdown-nav">
1276
+ <li class="uk-active"><a href="#">Active</a></li>
1277
+ <li class="uk-parent">
1278
+ <a href="#">Parent</a>
1279
+ <ul class="uk-nav-sub">
1280
+ <li><a href="#">Sub item</a></li>
1281
+ <li><a href="#">Sub item</a></li>
1282
+ </ul>
1283
+ </li>
1284
+ <li class="uk-nav-header">Header</li>
1285
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
1286
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
1287
+ <li class="uk-nav-divider"></li>
1288
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
1289
+ </ul>
1290
+ </div>
1291
+ <div>
1292
+ <ul class="uk-nav uk-navbar-dropdown-nav">
1293
+ <li class="uk-active"><a href="#">Active</a></li>
1294
+ <li class="uk-parent">
1295
+ <a href="#">Parent</a>
1296
+ <ul class="uk-nav-sub">
1297
+ <li><a href="#">Sub item</a></li>
1298
+ <li><a href="#">Sub item</a></li>
1299
+ </ul>
1300
+ </li>
1301
+ <li class="uk-nav-header">Header</li>
1302
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
1303
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
1304
+ <li class="uk-nav-divider"></li>
1305
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
1306
+ </ul>
1307
+ </div>
1308
+ <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
773
1309
  </div>
774
- <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
775
1310
  </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>
798
- </div>
799
- <div>
800
- <ul class="uk-nav uk-navbar-dropdown-nav">
801
- <li class="uk-active"><a href="#">Active</a></li>
1311
+ </li>
1312
+ </ul>
1313
+
1314
+ </div>
1315
+ <div class="uk-navbar-right">
1316
+
1317
+ <ul class="uk-navbar-nav">
1318
+ <li>
1319
+ <a href="#">1 Column</a>
1320
+ <div class="uk-navbar-dropdown">
1321
+ <ul class="uk-nav uk-navbar-dropdown-nav">
1322
+ <li class="uk-active"><a href="#">Active</a></li>
802
1323
  <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>
1324
+ <a href="#">Parent</a>
1325
+ <ul class="uk-nav-sub">
1326
+ <li><a href="#">Sub item</a></li>
1327
+ <li><a href="#">Sub item</a></li>
1328
+ </ul>
1329
+ </li>
1330
+ <li class="uk-nav-header">Header</li>
1331
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
1332
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
1333
+ <li class="uk-nav-divider"></li>
1334
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
1335
+ </ul>
817
1336
  </div>
818
- </div>
819
- </li>
820
- </ul>
1337
+ </li>
1338
+ </ul>
821
1339
 
1340
+ </div>
822
1341
  </div>
823
- <div class="uk-navbar-right">
1342
+ </div>
1343
+ </nav>
824
1344
 
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>
1345
+ <div class="uk-container">
847
1346
 
848
- </div>
849
- </nav>
1347
+ <h2>Dropbar</h2>
850
1348
 
851
- <nav class="uk-navbar-container uk-margin" uk-navbar="align: left; boundary-align: true">
852
- <div class="uk-navbar-left">
1349
+ <p>First example using <code>dropbar: SELECTOR</code> and second example using <code>dropbar: true</code>.</p>
853
1350
 
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>
1351
+ </div>
1352
+
1353
+ <nav class="uk-navbar-container uk-margin-top"><!-- Margin top only because of dropbar follows already in markup -->
1354
+ <div class="uk-container">
1355
+ <div uk-navbar="dropbar: +.uk-navbar-dropbar">
1356
+ <div class="uk-navbar-left">
1357
+
1358
+ <ul class="uk-navbar-nav">
1359
+ <li class="uk-active">
1360
+ <a href="#">Left</a>
1361
+ <div class="uk-navbar-dropdown">
1362
+ <ul class="uk-nav uk-navbar-dropdown-nav">
1363
+ <li class="uk-active"><a href="#">Active</a></li>
1364
+ <li class="uk-parent">
1365
+ <a href="#">Parent</a>
1366
+ <ul class="uk-nav-sub">
1367
+ <li><a href="#">Sub item</a></li>
1368
+ <li><a href="#">Sub item</a></li>
1369
+ </ul>
1370
+ </li>
1371
+ <li class="uk-nav-header">Header</li>
1372
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
1373
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
1374
+ <li class="uk-nav-divider"></li>
1375
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
1376
+ </ul>
901
1377
  </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>
916
- </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>
1378
+ </li>
1379
+ <li>
1380
+ <a href="#">2 Columns</a>
1381
+ <div class="uk-navbar-dropdown uk-navbar-dropdown-width-2">
1382
+ <div class="uk-navbar-dropdown-grid uk-child-width-1-2" uk-grid>
1383
+ <div>
1384
+ <ul class="uk-nav uk-navbar-dropdown-nav">
1385
+ <li class="uk-active"><a href="#">Active</a></li>
1386
+ <li class="uk-parent"><a href="#">Parent</a></li>
1387
+ <li class="uk-nav-header">Header</li>
1388
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
1389
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
1390
+ <li class="uk-nav-divider"></li>
1391
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
1392
+ </ul>
1393
+ </div>
1394
+ <div>
1395
+ <ul class="uk-nav uk-navbar-dropdown-nav">
1396
+ <li class="uk-active"><a href="#">Active</a></li>
1397
+ <li class="uk-parent"><a href="#">Parent</a></li>
1398
+ <li class="uk-nav-header">Header</li>
1399
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
1400
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
1401
+ <li class="uk-nav-divider"></li>
1402
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
1403
+ </ul>
1404
+ </div>
925
1405
  </div>
926
- <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
927
1406
  </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>
1407
+ </li>
1408
+ <li>
1409
+ <a href="#">3 Columns</a>
1410
+ <div class="uk-navbar-dropdown uk-navbar-dropdown-width-3">
1411
+ <div class="uk-navbar-dropdown-grid uk-child-width-1-3" uk-grid>
1412
+ <div>
1413
+ <ul class="uk-nav uk-navbar-dropdown-nav">
1414
+ <li class="uk-active"><a href="#">Active</a></li>
1415
+ <li class="uk-parent"><a href="#">Parent</a></li>
1416
+ <li class="uk-nav-header">Header</li>
1417
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
1418
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
1419
+ </ul>
1420
+ </div>
1421
+ <div>
1422
+ <ul class="uk-nav uk-navbar-dropdown-nav">
1423
+ <li class="uk-active"><a href="#">Active</a></li>
1424
+ <li class="uk-parent"><a href="#">Parent</a></li>
1425
+ <li class="uk-nav-header">Header</li>
1426
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
1427
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
1428
+ </ul>
1429
+ </div>
1430
+ <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
950
1431
  </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>
1432
+ </div>
1433
+ </li>
1434
+ <li>
1435
+ <a href="#">Justify</a>
1436
+ <div class="uk-navbar-dropdown" uk-drop="cls-drop: uk-navbar-dropdown; boundary: !.uk-navbar; boundary-align: true; pos: bottom-justify; flip: x">
1437
+ <div class="uk-navbar-dropdown-grid uk-child-width-1-3@m" uk-grid>
1438
+ <div>
1439
+ <ul class="uk-nav uk-navbar-dropdown-nav">
1440
+ <li class="uk-active"><a href="#">Active</a></li>
1441
+ <li class="uk-parent">
1442
+ <a href="#">Parent</a>
1443
+ <ul class="uk-nav-sub">
1444
+ <li><a href="#">Sub item</a></li>
1445
+ <li><a href="#">Sub item</a></li>
1446
+ </ul>
1447
+ </li>
1448
+ <li class="uk-nav-header">Header</li>
1449
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
1450
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
1451
+ <li class="uk-nav-divider"></li>
1452
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
1453
+ </ul>
1454
+ </div>
1455
+ <div>
1456
+ <ul class="uk-nav uk-navbar-dropdown-nav">
1457
+ <li class="uk-active"><a href="#">Active</a></li>
1458
+ <li class="uk-parent">
1459
+ <a href="#">Parent</a>
1460
+ <ul class="uk-nav-sub">
1461
+ <li><a href="#">Sub item</a></li>
1462
+ <li><a href="#">Sub item</a></li>
1463
+ </ul>
1464
+ </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
+ <li class="uk-nav-divider"></li>
1469
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
1470
+ </ul>
1471
+ </div>
1472
+ <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
967
1473
  </div>
968
- <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
969
1474
  </div>
970
- </div>
971
- </li>
972
- </ul>
1475
+ </li>
1476
+ <li>
1477
+ <a href="#">Justify Full</a>
1478
+ <div class="uk-navbar-dropdown" uk-drop="cls-drop: uk-navbar-dropdown; boundary: !.uk-navbar-container; pos: bottom-justify; flip: x">
1479
+ <div class="uk-navbar-dropdown-grid uk-child-width-1-3@m" uk-grid>
1480
+ <div>
1481
+ <ul class="uk-nav uk-navbar-dropdown-nav">
1482
+ <li class="uk-active"><a href="#">Active</a></li>
1483
+ <li class="uk-parent">
1484
+ <a href="#">Parent</a>
1485
+ <ul class="uk-nav-sub">
1486
+ <li><a href="#">Sub item</a></li>
1487
+ <li><a href="#">Sub item</a></li>
1488
+ </ul>
1489
+ </li>
1490
+ <li class="uk-nav-header">Header</li>
1491
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
1492
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
1493
+ <li class="uk-nav-divider"></li>
1494
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
1495
+ </ul>
1496
+ </div>
1497
+ <div>
1498
+ <ul class="uk-nav uk-navbar-dropdown-nav">
1499
+ <li class="uk-active"><a href="#">Active</a></li>
1500
+ <li class="uk-parent">
1501
+ <a href="#">Parent</a>
1502
+ <ul class="uk-nav-sub">
1503
+ <li><a href="#">Sub item</a></li>
1504
+ <li><a href="#">Sub item</a></li>
1505
+ </ul>
1506
+ </li>
1507
+ <li class="uk-nav-header">Header</li>
1508
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
1509
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
1510
+ <li class="uk-nav-divider"></li>
1511
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
1512
+ </ul>
1513
+ </div>
1514
+ <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
1515
+ </div>
1516
+ </div>
1517
+ </li>
1518
+ </ul>
973
1519
 
974
- </div>
975
- <div class="uk-navbar-right">
1520
+ </div>
1521
+ <div class="uk-navbar-right">
976
1522
 
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>
1523
+ <ul class="uk-navbar-nav">
1524
+ <li>
1525
+ <a href="#">1 Column</a>
1526
+ <div class="uk-navbar-dropdown">
1527
+ <ul class="uk-nav uk-navbar-dropdown-nav">
1528
+ <li class="uk-active"><a href="#">Active</a></li>
1529
+ <li class="uk-parent">
1530
+ <a href="#">Parent</a>
1531
+ <ul class="uk-nav-sub">
1532
+ <li><a href="#">Sub item</a></li>
1533
+ <li><a href="#">Sub item</a></li>
1534
+ </ul>
1535
+ </li>
1536
+ <li class="uk-nav-header">Header</li>
1537
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
1538
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
1539
+ <li class="uk-nav-divider"></li>
1540
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
1541
+ </ul>
1542
+ </div>
1543
+ </li>
1544
+ </ul>
999
1545
 
1546
+ </div>
1000
1547
  </div>
1001
- </nav>
1002
-
1003
- <h2>Dropbar</h2>
1548
+ </div>
1549
+ </nav>
1004
1550
 
1005
- <div class="uk-position-relative uk-margin">
1551
+ <div class="uk-navbar-dropbar"></div>
1006
1552
 
1007
- <nav class="uk-navbar-container" uk-navbar="dropbar: +.uk-navbar-dropbar">
1553
+ <nav class="uk-navbar-container uk-margin">
1554
+ <div class="uk-container">
1555
+ <div uk-navbar="dropbar: true; align: right">
1008
1556
  <div class="uk-navbar-left">
1009
1557
 
1010
1558
  <ul class="uk-navbar-nav">
1011
1559
  <li>
1012
- <a href="#">Hover</a>
1560
+ <a href="#">1 Column</a>
1561
+ <div class="uk-navbar-dropdown">
1562
+ <ul class="uk-nav uk-navbar-dropdown-nav">
1563
+ <li class="uk-active"><a href="#">Active</a></li>
1564
+ <li class="uk-parent">
1565
+ <a href="#">Parent</a>
1566
+ <ul class="uk-nav-sub">
1567
+ <li><a href="#">Sub item</a></li>
1568
+ <li><a href="#">Sub item</a></li>
1569
+ </ul>
1570
+ </li>
1571
+ <li class="uk-nav-header">Header</li>
1572
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
1573
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
1574
+ <li class="uk-nav-divider"></li>
1575
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
1576
+ </ul>
1577
+ </div>
1578
+ </li>
1579
+ </ul>
1580
+
1581
+ </div>
1582
+ <div class="uk-navbar-right">
1583
+
1584
+ <ul class="uk-navbar-nav">
1585
+ <li class="uk-active">
1586
+ <a href="#">Right</a>
1013
1587
  <div class="uk-navbar-dropdown">
1014
1588
  <ul class="uk-nav uk-navbar-dropdown-nav">
1015
1589
  <li class="uk-active"><a href="#">Active</a></li>
@@ -1085,7 +1659,7 @@
1085
1659
  </li>
1086
1660
  <li>
1087
1661
  <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">
1662
+ <div class="uk-navbar-dropdown" uk-drop="cls-drop: uk-navbar-dropdown; boundary: !.uk-navbar; boundary-align: true; pos: bottom-justify; flip: x">
1089
1663
  <div class="uk-navbar-dropdown-grid uk-child-width-1-3@m" uk-grid>
1090
1664
  <div>
1091
1665
  <ul class="uk-nav uk-navbar-dropdown-nav">
@@ -1125,17 +1699,21 @@
1125
1699
  </div>
1126
1700
  </div>
1127
1701
  </li>
1128
- <li>
1129
- <a href="#">Item</a>
1130
- </li>
1131
1702
  </ul>
1132
1703
 
1133
1704
  </div>
1134
- <div class="uk-navbar-right">
1705
+ </div>
1706
+ </div>
1707
+ </nav>
1708
+
1709
+ <nav class="uk-navbar-container uk-margin uk-position-relative uk-position-z-index"><!-- Position context only needed for demo showcase -->
1710
+ <div class="uk-container">
1711
+ <div uk-navbar="dropbar: true; align: center">
1712
+ <div class="uk-navbar-left">
1135
1713
 
1136
1714
  <ul class="uk-navbar-nav">
1137
1715
  <li>
1138
- <a href="#">Right</a>
1716
+ <a href="#">1 Column</a>
1139
1717
  <div class="uk-navbar-dropdown">
1140
1718
  <ul class="uk-nav uk-navbar-dropdown-nav">
1141
1719
  <li class="uk-active"><a href="#">Active</a></li>
@@ -1157,20 +1735,11 @@
1157
1735
  </ul>
1158
1736
 
1159
1737
  </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">
1738
+ <div class="uk-navbar-center">
1170
1739
 
1171
1740
  <ul class="uk-navbar-nav">
1172
- <li>
1173
- <a href="#">Hover</a>
1741
+ <li class="uk-active">
1742
+ <a href="#">Center</a>
1174
1743
  <div class="uk-navbar-dropdown">
1175
1744
  <ul class="uk-nav uk-navbar-dropdown-nav">
1176
1745
  <li class="uk-active"><a href="#">Active</a></li>
@@ -1246,7 +1815,7 @@
1246
1815
  </li>
1247
1816
  <li>
1248
1817
  <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">
1818
+ <div class="uk-navbar-dropdown" uk-drop="cls-drop: uk-navbar-dropdown; boundary: !.uk-navbar; boundary-align: true; pos: bottom-justify; flip: x">
1250
1819
  <div class="uk-navbar-dropdown-grid uk-child-width-1-3@m" uk-grid>
1251
1820
  <div>
1252
1821
  <ul class="uk-nav uk-navbar-dropdown-nav">
@@ -1286,21 +1855,208 @@
1286
1855
  </div>
1287
1856
  </div>
1288
1857
  </li>
1858
+ </ul>
1859
+
1860
+ </div>
1861
+ <div class="uk-navbar-right">
1862
+
1863
+ <ul class="uk-navbar-nav">
1864
+ <li>
1865
+ <a href="#">1 Column</a>
1866
+ <div class="uk-navbar-dropdown">
1867
+ <ul class="uk-nav uk-navbar-dropdown-nav">
1868
+ <li class="uk-active"><a href="#">Active</a></li>
1869
+ <li class="uk-parent">
1870
+ <a href="#">Parent</a>
1871
+ <ul class="uk-nav-sub">
1872
+ <li><a href="#">Sub item</a></li>
1873
+ <li><a href="#">Sub item</a></li>
1874
+ </ul>
1875
+ </li>
1876
+ <li class="uk-nav-header">Header</li>
1877
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
1878
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
1879
+ <li class="uk-nav-divider"></li>
1880
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
1881
+ </ul>
1882
+ </div>
1883
+ </li>
1884
+ </ul>
1885
+
1886
+ </div>
1887
+ </div>
1888
+ </div>
1889
+ </nav>
1890
+
1891
+
1892
+ <div class="uk-container">
1893
+
1894
+ <h2>Icons and Subtitles</h2>
1895
+
1896
+ </div>
1897
+
1898
+ <nav class="uk-navbar-container uk-margin">
1899
+ <div class="uk-container">
1900
+ <div class="uk-navbar">
1901
+ <div class="uk-navbar-left">
1902
+
1903
+ <ul class="uk-navbar-nav">
1904
+ <li><a href="#"><span uk-icon="icon: home"></span></a></li>
1905
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: home"></span> Item</a></li>
1906
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: cart"></span> Item</a></li>
1907
+ <li><a href="#">Item</a></li>
1908
+ <li><a href="#">
1909
+ <div>
1910
+ Item <div class="uk-navbar-subtitle">Subtitle</div>
1911
+ </div>
1912
+ </a></li>
1913
+ <li><a href="#">
1914
+ <div>
1915
+ Item <div class="uk-navbar-subtitle">Subtitle</div>
1916
+ </div>
1917
+ </a></li>
1918
+ <li><a href="#">
1919
+ <div class="uk-flex uk-flex-middle">
1920
+ <span class="uk-margin-small-right" uk-icon="icon: home; ratio: 1.5"></span>
1921
+ <div>Item <div class="uk-navbar-subtitle">Subtitle</div></div>
1922
+ </div>
1923
+ </a></li>
1924
+ <li><a href="#">
1925
+ <div class="uk-flex uk-flex-middle">
1926
+ <span class="uk-margin-small-right" uk-icon="icon: cart; ratio: 1.5"></span>
1927
+ <div>Item <div class="uk-navbar-subtitle">Subtitle</div></div>
1928
+ </div>
1929
+ </a></li>
1930
+ </ul>
1931
+
1932
+ </div>
1933
+ </div>
1934
+ </div>
1935
+ </nav>
1936
+
1937
+ <div class="uk-container">
1938
+
1939
+ <h2>Content Items</h2>
1940
+
1941
+ </div>
1942
+
1943
+ <nav class="uk-navbar-container uk-margin">
1944
+ <div class="uk-container">
1945
+ <div class="uk-navbar">
1946
+ <div class="uk-navbar-left">
1947
+
1948
+ <ul class="uk-navbar-nav">
1949
+ <li><a href="#">Item</a></li>
1950
+ </ul>
1951
+ <div class="uk-navbar-item">
1952
+ <div>Some <a href="#">Link</a></div>
1953
+ </div>
1954
+ <div class="uk-navbar-item">
1955
+ <ul class="uk-iconnav">
1956
+ <li>
1957
+ <a href="#" uk-icon="icon: user"></a>
1958
+ </li>
1959
+ <li>
1960
+ <a href="#" uk-icon="icon: bag"></a>
1961
+ </li>
1962
+ <li>
1963
+ <a href="#" uk-icon="icon: heart"></a>
1964
+ </li>
1965
+ </ul>
1966
+ </div>
1967
+ <div class="uk-navbar-item"><img src="images/photo.jpg" width="100" height="67" alt=""></div>
1968
+ <div class="uk-navbar-item">
1969
+ <form>
1970
+ <input class="uk-input uk-form-width-medium" type="text" placeholder="Input">
1971
+ <button class="uk-button uk-button-default">Button</button>
1972
+ </form>
1973
+ </div>
1974
+ <div class="uk-navbar-item">
1975
+ <ul class="uk-grid uk-grid-small">
1976
+ <li>
1977
+ <a class="uk-icon-button" href="#" uk-icon="icon: twitter"></a>
1978
+ </li>
1979
+ <li>
1980
+ <a class="uk-icon-button" href="#" uk-icon="icon: github"></a>
1981
+ </li>
1982
+ <li>
1983
+ <a class="uk-icon-button" href="#" uk-icon="icon: youtube"></a>
1984
+ </li>
1985
+ </ul>
1986
+ </div>
1987
+
1988
+ </div>
1989
+ </div>
1990
+ </div>
1991
+ </nav>
1992
+
1993
+ <div class="uk-container">
1994
+
1995
+ <h2>Logo and Toggle</h2>
1996
+
1997
+ </div>
1998
+
1999
+ <nav class="uk-navbar-container uk-margin">
2000
+ <div class="uk-container">
2001
+ <div uk-navbar>
2002
+ <div class="uk-navbar-left">
2003
+
2004
+ <a class="uk-navbar-item uk-logo" href="#">Logo</a>
2005
+ <ul class="uk-navbar-nav uk-navbar-nav-primary">
2006
+ <li class="uk-active"><a href="#">Active</a></li>
2007
+ <li>
2008
+ <a href="#">Parent</a>
2009
+ <div class="uk-navbar-dropdown">
2010
+ <ul class="uk-nav uk-navbar-dropdown-nav">
2011
+ <li class="uk-active"><a href="#">Active</a></li>
2012
+ <li class="uk-parent">
2013
+ <a href="#">Parent</a>
2014
+ <ul class="uk-nav-sub">
2015
+ <li><a href="#">Sub item</a></li>
2016
+ <li><a href="#">Sub item</a></li>
2017
+ </ul>
2018
+ </li>
2019
+ <li class="uk-nav-header">Header</li>
2020
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
2021
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
2022
+ <li class="uk-nav-divider"></li>
2023
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
2024
+ </ul>
2025
+ </div>
2026
+ </li>
1289
2027
  <li>
1290
- <a href="#">Item</a>
2028
+ <a href="#">Content</a>
2029
+ <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
2030
  </li>
2031
+ <li><a href="#">Item</a></li>
2032
+ <li><a href="#">Item</a></li>
1292
2033
  </ul>
1293
2034
 
1294
2035
  </div>
1295
2036
  <div class="uk-navbar-right">
1296
2037
 
1297
- <ul class="uk-navbar-nav">
2038
+ <a class="uk-navbar-toggle" href="#" uk-navbar-toggle-icon></a>
2039
+ <div class="uk-navbar-dropdown" uk-drop="mode: click; cls-drop: uk-navbar-dropdown; boundary: !nav; flip: x">Dropdown</div>
2040
+
2041
+ </div>
2042
+ </div>
2043
+ </div>
2044
+ </nav>
2045
+
2046
+ <nav class="uk-navbar-container uk-margin">
2047
+ <div class="uk-container">
2048
+ <div uk-navbar>
2049
+ <div class="uk-navbar-left">
2050
+
2051
+ <a class="uk-navbar-item uk-logo" href="#">Logo</a>
2052
+ <ul class="uk-navbar-nav uk-navbar-nav-primary">
2053
+ <li class="uk-active"><a href="#">Active</a></li>
1298
2054
  <li>
1299
- <a href="#">Right</a>
2055
+ <a href="#">Parent</a>
1300
2056
  <div class="uk-navbar-dropdown">
1301
2057
  <ul class="uk-nav uk-navbar-dropdown-nav">
1302
2058
  <li class="uk-active"><a href="#">Active</a></li>
1303
- <li class="uk-parent">
2059
+ <li class="uk-parent">
1304
2060
  <a href="#">Parent</a>
1305
2061
  <ul class="uk-nav-sub">
1306
2062
  <li><a href="#">Sub item</a></li>
@@ -1315,309 +2071,226 @@
1315
2071
  </ul>
1316
2072
  </div>
1317
2073
  </li>
2074
+ <li>
2075
+ <a href="#">Content</a>
2076
+ <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>
2077
+ </li>
2078
+ <li><a href="#">Item</a></li>
2079
+ <li><a href="#">Item</a></li>
1318
2080
  </ul>
1319
2081
 
1320
2082
  </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>
1348
-
1349
- <h2>Content Items</h2>
2083
+ <div class="uk-navbar-right">
1350
2084
 
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>
2085
+ <a class="uk-navbar-toggle" href="#">
2086
+ <span class="uk-margin-small-right">Menu</span> <span uk-navbar-toggle-icon></span>
2087
+ </a>
2088
+ <div class="uk-navbar-dropdown" uk-drop="mode: click; cls-drop: uk-navbar-dropdown; boundary: !nav; flip: x">Dropdown</div>
2089
+
1369
2090
  </div>
1370
2091
  </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>
2092
+ </div>
2093
+ </nav>
1400
2094
 
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>
2095
+ <div class="uk-container">
1411
2096
 
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>
2097
+ <h2>Primary</h2>
1424
2098
 
1425
- </div>
1426
- </div>
2099
+ </div>
1427
2100
 
1428
- <h2>Dropdown Stretch</h2>
2101
+ <nav class="uk-navbar-container uk-margin">
2102
+ <div class="uk-container">
2103
+ <div class="uk-navbar-primary" uk-navbar>
2104
+ <div class="uk-navbar-left">
1429
2105
 
1430
- <nav class="uk-navbar uk-navbar-container uk-margin">
1431
- <div class="uk-navbar-left">
1432
- <a class="uk-navbar-toggle" href="#">
1433
- <span uk-navbar-toggle-icon></span><span class="uk-margin-small-left">Fade</span>
1434
- </a>
1435
- <div class="uk-navbar-dropdown" uk-drop="mode: click; cls-drop: uk-navbar-dropdown; pos: bottom-stretch; animate-out: true">
1436
- <ul class="uk-nav uk-navbar-dropdown-nav">
1437
- <li class="uk-active"><a href="#">Active</a></li>
1438
- <li class="uk-parent">
1439
- <a href="#">Parent</a>
1440
- <ul class="uk-nav-sub">
1441
- <li><a href="#">Sub item</a></li>
1442
- <li><a href="#">Sub item</a></li>
1443
- </ul>
1444
- </li>
1445
- <li class="uk-nav-header">Header</li>
1446
- <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
1447
- <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
1448
- <li class="uk-nav-divider"></li>
1449
- <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
1450
- </ul>
1451
- </div>
1452
- <a class="uk-navbar-toggle" href="#">
1453
- <span uk-navbar-toggle-icon></span><span class="uk-margin-small-left">Slide</span>
1454
- </a>
1455
- <div class="uk-navbar-dropdown" uk-drop="mode: click; cls-drop: uk-navbar-dropdown; pos: bottom-stretch; animate-out: true; animation: slide">
1456
- <ul class="uk-nav uk-navbar-dropdown-nav">
2106
+ <a class="uk-navbar-item uk-logo" href="#">Logo</a>
2107
+ <ul class="uk-navbar-nav uk-navbar-nav-primary">
1457
2108
  <li class="uk-active"><a href="#">Active</a></li>
1458
- <li class="uk-parent">
2109
+ <li>
1459
2110
  <a href="#">Parent</a>
1460
- <ul class="uk-nav-sub">
1461
- <li><a href="#">Sub item</a></li>
1462
- <li><a href="#">Sub item</a></li>
1463
- </ul>
2111
+ <div class="uk-navbar-dropdown">
2112
+ <ul class="uk-nav uk-navbar-dropdown-nav">
2113
+ <li class="uk-active"><a href="#">Active</a></li>
2114
+ <li class="uk-parent">
2115
+ <a href="#">Parent</a>
2116
+ <ul class="uk-nav-sub">
2117
+ <li><a href="#">Sub item</a></li>
2118
+ <li><a href="#">Sub item</a></li>
2119
+ </ul>
2120
+ </li>
2121
+ <li class="uk-nav-header">Header</li>
2122
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
2123
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
2124
+ <li class="uk-nav-divider"></li>
2125
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
2126
+ </ul>
2127
+ </div>
1464
2128
  </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
- <li class="uk-nav-divider"></li>
1469
- <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
1470
- </ul>
1471
- </div>
1472
- <a class="uk-navbar-toggle" href="#">
1473
- <span uk-navbar-toggle-icon></span><span class="uk-margin-small-left">Slide Left</span>
1474
- </a>
1475
- <div class="uk-navbar-dropdown" uk-drop="mode: click; cls-drop: uk-navbar-dropdown; pos: bottom-stretch; animate-out: true; animation: slide-left">
1476
- <ul class="uk-nav uk-navbar-dropdown-nav">
1477
- <li class="uk-active"><a href="#">Active</a></li>
1478
- <li class="uk-parent">
1479
- <a href="#">Parent</a>
1480
- <ul class="uk-nav-sub">
1481
- <li><a href="#">Sub item</a></li>
1482
- <li><a href="#">Sub item</a></li>
1483
- </ul>
2129
+ <li>
2130
+ <a href="#">Content</a>
2131
+ <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
2132
  </li>
1485
- <li class="uk-nav-header">Header</li>
1486
- <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
1487
- <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
1488
- <li class="uk-nav-divider"></li>
1489
- <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
2133
+ <li><a href="#">Item</a></li>
2134
+ <li><a href="#">Item</a></li>
1490
2135
  </ul>
2136
+
1491
2137
  </div>
1492
- <a class="uk-navbar-toggle" href="#">
1493
- <span uk-navbar-toggle-icon></span><span class="uk-margin-small-left">Slide Right</span>
1494
- </a>
1495
- <div class="uk-navbar-dropdown" uk-drop="mode: click; cls-drop: uk-navbar-dropdown; pos: bottom-stretch; animate-out: true; animation: slide-right">
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>
2138
+ <div class="uk-navbar-right">
2139
+
2140
+ <a class="uk-navbar-toggle" href="#" uk-navbar-toggle-icon></a>
2141
+ <div class="uk-navbar-dropdown" uk-drop="mode: click; cls-drop: uk-navbar-dropdown; boundary: !nav; flip: x">Dropdown</div>
2142
+
1511
2143
  </div>
1512
2144
  </div>
1513
- </nav>
2145
+ </div>
2146
+ </nav>
1514
2147
 
1515
- <h2>Center</h2>
2148
+ <div class="uk-container">
1516
2149
 
1517
- <nav class="uk-navbar-container uk-margin" uk-navbar>
1518
- <div class="uk-navbar-left">
2150
+ <h2>Dropdown Stretch</h2>
1519
2151
 
1520
- <ul class="uk-navbar-nav">
1521
- <li>
1522
- <a href="#">Left</a>
1523
- <div class="uk-navbar-dropdown">
1524
- <ul class="uk-nav uk-navbar-dropdown-nav">
1525
- <li class="uk-active"><a href="#">Active</a></li>
1526
- <li class="uk-parent">
1527
- <a href="#">Parent</a>
1528
- <ul class="uk-nav-sub">
1529
- <li><a href="#">Sub item</a></li>
1530
- <li><a href="#">Sub item</a></li>
1531
- </ul>
1532
- </li>
1533
- <li class="uk-nav-header">Header</li>
1534
- <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
1535
- <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
1536
- <li class="uk-nav-divider"></li>
1537
- <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
1538
- </ul>
2152
+ <div class="uk-child-width-1-4@m" uk-grid>
2153
+ <div>
2154
+ <div class="scroll-container uk-height-large uk-resize-vertical">
2155
+
2156
+ <nav class="uk-navbar uk-navbar-container">
2157
+ <div class="uk-navbar-left">
2158
+ <a class="uk-navbar-toggle" href="#">
2159
+ <span uk-navbar-toggle-icon></span><span class="uk-margin-small-left">Fade</span>
2160
+ </a>
2161
+ <div class="uk-navbar-dropdown" uk-drop="mode: click; cls-drop: uk-navbar-dropdown; pos: bottom-stretch; animate-out: true">
2162
+ <ul class="uk-nav uk-navbar-dropdown-nav">
2163
+ <li class="uk-active"><a href="#">Active</a></li>
2164
+ <li class="uk-parent">
2165
+ <a href="#">Parent</a>
2166
+ <ul class="uk-nav-sub">
2167
+ <li><a href="#">Sub item</a></li>
2168
+ <li><a href="#">Sub item</a></li>
2169
+ </ul>
2170
+ </li>
2171
+ <li class="uk-nav-header">Header</li>
2172
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
2173
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
2174
+ <li class="uk-nav-divider"></li>
2175
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
2176
+ </ul>
2177
+ </div>
1539
2178
  </div>
1540
- </li>
1541
- </ul>
2179
+ </nav>
1542
2180
 
2181
+ </div>
1543
2182
  </div>
1544
- <div class="uk-navbar-center">
1545
-
1546
- <ul class="uk-navbar-nav">
1547
- <li class="uk-active"><a href="#">Active</a></li>
1548
- <li>
1549
- <a href="#">Parent</a>
1550
- <div class="uk-navbar-dropdown">
1551
- <ul class="uk-nav uk-navbar-dropdown-nav">
1552
- <li class="uk-active"><a href="#">Active</a></li>
1553
- <li class="uk-parent">
1554
- <a href="#">Parent</a>
1555
- <ul class="uk-nav-sub">
1556
- <li><a href="#">Sub item</a></li>
1557
- <li><a href="#">Sub item</a></li>
1558
- </ul>
1559
- </li>
1560
- <li class="uk-nav-header">Header</li>
1561
- <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
1562
- <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
1563
- <li class="uk-nav-divider"></li>
1564
- <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
1565
- </ul>
2183
+ <div>
2184
+ <div class="scroll-container uk-height-large uk-resize-vertical">
2185
+
2186
+ <nav class="uk-navbar uk-navbar-container">
2187
+ <div class="uk-navbar-left">
2188
+ <a class="uk-navbar-toggle" href="#">
2189
+ <span uk-navbar-toggle-icon></span><span class="uk-margin-small-left">Slide</span>
2190
+ </a>
2191
+ <div class="uk-navbar-dropdown" uk-drop="mode: click; cls-drop: uk-navbar-dropdown; pos: bottom-stretch; animate-out: true; animation: slide">
2192
+ <ul class="uk-nav uk-navbar-dropdown-nav">
2193
+ <li class="uk-active"><a href="#">Active</a></li>
2194
+ <li class="uk-parent">
2195
+ <a href="#">Parent</a>
2196
+ <ul class="uk-nav-sub">
2197
+ <li><a href="#">Sub item</a></li>
2198
+ <li><a href="#">Sub item</a></li>
2199
+ </ul>
2200
+ </li>
2201
+ <li class="uk-nav-header">Header</li>
2202
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
2203
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
2204
+ <li class="uk-nav-divider"></li>
2205
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
2206
+ </ul>
2207
+ </div>
2208
+ </div>
2209
+ </nav>
2210
+
2211
+ </div>
2212
+ </div>
2213
+ <div>
2214
+ <div class="scroll-container uk-height-large uk-resize-vertical">
2215
+
2216
+ <nav class="uk-navbar uk-navbar-container">
2217
+ <div class="uk-navbar-left">
2218
+ <a class="uk-navbar-toggle" href="#">
2219
+ <span uk-navbar-toggle-icon></span><span class="uk-margin-small-left">Slide Left</span>
2220
+ </a>
2221
+ <div class="uk-navbar-dropdown" uk-drop="mode: click; cls-drop: uk-navbar-dropdown; pos: bottom-stretch; animate-out: true; animation: slide-left">
2222
+ <ul class="uk-nav uk-navbar-dropdown-nav">
2223
+ <li class="uk-active"><a href="#">Active</a></li>
2224
+ <li class="uk-parent">
2225
+ <a href="#">Parent</a>
2226
+ <ul class="uk-nav-sub">
2227
+ <li><a href="#">Sub item</a></li>
2228
+ <li><a href="#">Sub item</a></li>
2229
+ </ul>
2230
+ </li>
2231
+ <li class="uk-nav-header">Header</li>
2232
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
2233
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
2234
+ <li class="uk-nav-divider"></li>
2235
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
2236
+ </ul>
2237
+ </div>
2238
+ </div>
2239
+ </nav>
2240
+
2241
+ </div>
2242
+ </div>
2243
+ <div>
2244
+ <div class="scroll-container uk-height-large uk-resize-vertical">
2245
+
2246
+ <nav class="uk-navbar uk-navbar-container">
2247
+ <div class="uk-navbar-left">
2248
+ <a class="uk-navbar-toggle" href="#">
2249
+ <span uk-navbar-toggle-icon></span><span class="uk-margin-small-left">Slide Right</span>
2250
+ </a>
2251
+ <div class="uk-navbar-dropdown" uk-drop="mode: click; cls-drop: uk-navbar-dropdown; pos: bottom-stretch; animate-out: true; animation: slide-right">
2252
+ <ul class="uk-nav uk-navbar-dropdown-nav">
2253
+ <li class="uk-active"><a href="#">Active</a></li>
2254
+ <li class="uk-parent">
2255
+ <a href="#">Parent</a>
2256
+ <ul class="uk-nav-sub">
2257
+ <li><a href="#">Sub item</a></li>
2258
+ <li><a href="#">Sub item</a></li>
2259
+ </ul>
2260
+ </li>
2261
+ <li class="uk-nav-header">Header</li>
2262
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
2263
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
2264
+ <li class="uk-nav-divider"></li>
2265
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
2266
+ </ul>
2267
+ </div>
1566
2268
  </div>
1567
- </li>
1568
- <li>
1569
- <a href="#">Content</a>
1570
- <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>
1571
- </li>
1572
- <li><a href="#">Item</a></li>
1573
- <li><a href="#">Item</a></li>
1574
- <li><a href="#">Item</a></li>
1575
- </ul>
1576
- <div class="uk-navbar-item">
1577
- <div>Some <a href="#">Link</a></div>
1578
- </div>
2269
+ </nav>
1579
2270
 
2271
+ </div>
1580
2272
  </div>
1581
- <div class="uk-navbar-right">
2273
+ </div>
2274
+ </div>
1582
2275
 
1583
- <ul class="uk-navbar-nav">
1584
- <li>
1585
- <a href="#">Right</a>
1586
- <div class="uk-navbar-dropdown">
1587
- <ul class="uk-nav uk-navbar-dropdown-nav">
1588
- <li class="uk-active"><a href="#">Active</a></li>
1589
- <li class="uk-parent">
1590
- <a href="#">Parent</a>
1591
- <ul class="uk-nav-sub">
1592
- <li><a href="#">Sub item</a></li>
1593
- <li><a href="#">Sub item</a></li>
1594
- </ul>
1595
- </li>
1596
- <li class="uk-nav-header">Header</li>
1597
- <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
1598
- <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
1599
- <li class="uk-nav-divider"></li>
1600
- <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
1601
- </ul>
1602
- </div>
1603
- </li>
1604
- </ul>
2276
+ <div class="uk-container">
1605
2277
 
1606
- </div>
1607
- </nav>
2278
+ <h2>Center</h2>
2279
+
2280
+ </div>
1608
2281
 
1609
- <nav class="uk-navbar-container uk-margin" uk-navbar>
1610
- <div class="uk-navbar-center">
2282
+ <nav class="uk-navbar-container uk-margin">
2283
+ <div class="uk-container">
2284
+ <div uk-navbar>
2285
+ <div class="uk-navbar-left">
1611
2286
 
1612
- <div class="uk-navbar-center-left">
1613
2287
  <ul class="uk-navbar-nav">
1614
- <li class="uk-active"><a href="#">Active</a></li>
1615
2288
  <li>
1616
- <a href="#">Parent</a>
2289
+ <a href="#">Left</a>
1617
2290
  <div class="uk-navbar-dropdown">
1618
2291
  <ul class="uk-nav uk-navbar-dropdown-nav">
1619
2292
  <li class="uk-active"><a href="#">Active</a></li>
1620
- <li class="uk-parent">
2293
+ <li class="uk-parent">
1621
2294
  <a href="#">Parent</a>
1622
2295
  <ul class="uk-nav-sub">
1623
2296
  <li><a href="#">Sub item</a></li>
@@ -1632,16 +2305,11 @@
1632
2305
  </ul>
1633
2306
  </div>
1634
2307
  </li>
1635
- <li>
1636
- <a href="#">Content</a>
1637
- <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>
1638
- </li>
1639
2308
  </ul>
1640
- </div>
1641
2309
 
1642
- <a class="uk-navbar-item uk-logo" href="#">Logo</a>
2310
+ </div>
2311
+ <div class="uk-navbar-center">
1643
2312
 
1644
- <div class="uk-navbar-center-right"><div>
1645
2313
  <ul class="uk-navbar-nav">
1646
2314
  <li class="uk-active"><a href="#">Active</a></li>
1647
2315
  <li>
@@ -1649,7 +2317,7 @@
1649
2317
  <div class="uk-navbar-dropdown">
1650
2318
  <ul class="uk-nav uk-navbar-dropdown-nav">
1651
2319
  <li class="uk-active"><a href="#">Active</a></li>
1652
- <li class="uk-parent">
2320
+ <li class="uk-parent">
1653
2321
  <a href="#">Parent</a>
1654
2322
  <ul class="uk-nav-sub">
1655
2323
  <li><a href="#">Sub item</a></li>
@@ -1668,53 +2336,132 @@
1668
2336
  <a href="#">Content</a>
1669
2337
  <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>
1670
2338
  </li>
2339
+ <li><a href="#">Item</a></li>
2340
+ <li><a href="#">Item</a></li>
2341
+ <li><a href="#">Item</a></li>
1671
2342
  </ul>
1672
2343
  <div class="uk-navbar-item">
1673
2344
  <div>Some <a href="#">Link</a></div>
1674
2345
  </div>
1675
- </div></div>
1676
2346
 
2347
+ </div>
2348
+ <div class="uk-navbar-right">
2349
+
2350
+ <ul class="uk-navbar-nav">
2351
+ <li>
2352
+ <a href="#">Right</a>
2353
+ <div class="uk-navbar-dropdown">
2354
+ <ul class="uk-nav uk-navbar-dropdown-nav">
2355
+ <li class="uk-active"><a href="#">Active</a></li>
2356
+ <li class="uk-parent">
2357
+ <a href="#">Parent</a>
2358
+ <ul class="uk-nav-sub">
2359
+ <li><a href="#">Sub item</a></li>
2360
+ <li><a href="#">Sub item</a></li>
2361
+ </ul>
2362
+ </li>
2363
+ <li class="uk-nav-header">Header</li>
2364
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
2365
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
2366
+ <li class="uk-nav-divider"></li>
2367
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
2368
+ </ul>
2369
+ </div>
2370
+ </li>
2371
+ </ul>
2372
+
2373
+ </div>
1677
2374
  </div>
1678
- </nav>
2375
+ </div>
2376
+ </nav>
1679
2377
 
1680
- <nav class="uk-navbar-container uk-margin" uk-navbar>
1681
- <div class="uk-navbar-left">
2378
+ <nav class="uk-navbar-container uk-margin">
2379
+ <div class="uk-container">
2380
+ <div uk-navbar>
2381
+ <div class="uk-navbar-center">
1682
2382
 
1683
- <ul class="uk-navbar-nav">
1684
- <li>
1685
- <a href="#">Left</a>
1686
- <div class="uk-navbar-dropdown">
1687
- <ul class="uk-nav uk-navbar-dropdown-nav">
1688
- <li class="uk-active"><a href="#">Active</a></li>
1689
- <li class="uk-parent">
1690
- <a href="#">Parent</a>
1691
- <ul class="uk-nav-sub">
1692
- <li><a href="#">Sub item</a></li>
1693
- <li><a href="#">Sub item</a></li>
2383
+ <div class="uk-navbar-center-left">
2384
+ <ul class="uk-navbar-nav">
2385
+ <li class="uk-active"><a href="#">Active</a></li>
2386
+ <li>
2387
+ <a href="#">Parent</a>
2388
+ <div class="uk-navbar-dropdown">
2389
+ <ul class="uk-nav uk-navbar-dropdown-nav">
2390
+ <li class="uk-active"><a href="#">Active</a></li>
2391
+ <li class="uk-parent">
2392
+ <a href="#">Parent</a>
2393
+ <ul class="uk-nav-sub">
2394
+ <li><a href="#">Sub item</a></li>
2395
+ <li><a href="#">Sub item</a></li>
2396
+ </ul>
2397
+ </li>
2398
+ <li class="uk-nav-header">Header</li>
2399
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
2400
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
2401
+ <li class="uk-nav-divider"></li>
2402
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
1694
2403
  </ul>
1695
- </li>
1696
- <li class="uk-nav-header">Header</li>
1697
- <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
1698
- <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
1699
- <li class="uk-nav-divider"></li>
1700
- <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
1701
- </ul>
2404
+ </div>
2405
+ </li>
2406
+ <li>
2407
+ <a href="#">Content</a>
2408
+ <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>
2409
+ </li>
2410
+ </ul>
2411
+ </div>
2412
+
2413
+ <a class="uk-navbar-item uk-logo" href="#">Logo</a>
2414
+
2415
+ <div class="uk-navbar-center-right">
2416
+ <ul class="uk-navbar-nav">
2417
+ <li class="uk-active"><a href="#">Active</a></li>
2418
+ <li>
2419
+ <a href="#">Parent</a>
2420
+ <div class="uk-navbar-dropdown">
2421
+ <ul class="uk-nav uk-navbar-dropdown-nav">
2422
+ <li class="uk-active"><a href="#">Active</a></li>
2423
+ <li class="uk-parent">
2424
+ <a href="#">Parent</a>
2425
+ <ul class="uk-nav-sub">
2426
+ <li><a href="#">Sub item</a></li>
2427
+ <li><a href="#">Sub item</a></li>
2428
+ </ul>
2429
+ </li>
2430
+ <li class="uk-nav-header">Header</li>
2431
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
2432
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
2433
+ <li class="uk-nav-divider"></li>
2434
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
2435
+ </ul>
2436
+ </div>
2437
+ </li>
2438
+ <li>
2439
+ <a href="#">Content</a>
2440
+ <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>
2441
+ </li>
2442
+ </ul>
2443
+ <div class="uk-navbar-item">
2444
+ <div>Some <a href="#">Link</a></div>
1702
2445
  </div>
1703
- </li>
1704
- </ul>
2446
+ </div>
1705
2447
 
2448
+ </div>
1706
2449
  </div>
1707
- <div class="uk-navbar-center">
2450
+ </div>
2451
+ </nav>
2452
+
2453
+ <nav class="uk-navbar-container uk-margin">
2454
+ <div class="uk-container">
2455
+ <div uk-navbar>
2456
+ <div class="uk-navbar-left">
1708
2457
 
1709
- <div class="uk-navbar-center-left">
1710
2458
  <ul class="uk-navbar-nav">
1711
- <li class="uk-active"><a href="#">Active</a></li>
1712
2459
  <li>
1713
- <a href="#">Parent</a>
2460
+ <a href="#">Left</a>
1714
2461
  <div class="uk-navbar-dropdown">
1715
2462
  <ul class="uk-nav uk-navbar-dropdown-nav">
1716
2463
  <li class="uk-active"><a href="#">Active</a></li>
1717
- <li class="uk-parent">
2464
+ <li class="uk-parent">
1718
2465
  <a href="#">Parent</a>
1719
2466
  <ul class="uk-nav-sub">
1720
2467
  <li><a href="#">Sub item</a></li>
@@ -1729,24 +2476,86 @@
1729
2476
  </ul>
1730
2477
  </div>
1731
2478
  </li>
1732
- <li>
1733
- <a href="#">Content</a>
1734
- <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>
1735
- </li>
1736
2479
  </ul>
2480
+
1737
2481
  </div>
2482
+ <div class="uk-navbar-center">
2483
+
2484
+ <div class="uk-navbar-center-left">
2485
+ <ul class="uk-navbar-nav">
2486
+ <li class="uk-active"><a href="#">Active</a></li>
2487
+ <li>
2488
+ <a href="#">Parent</a>
2489
+ <div class="uk-navbar-dropdown">
2490
+ <ul class="uk-nav uk-navbar-dropdown-nav">
2491
+ <li class="uk-active"><a href="#">Active</a></li>
2492
+ <li class="uk-parent">
2493
+ <a href="#">Parent</a>
2494
+ <ul class="uk-nav-sub">
2495
+ <li><a href="#">Sub item</a></li>
2496
+ <li><a href="#">Sub item</a></li>
2497
+ </ul>
2498
+ </li>
2499
+ <li class="uk-nav-header">Header</li>
2500
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
2501
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
2502
+ <li class="uk-nav-divider"></li>
2503
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
2504
+ </ul>
2505
+ </div>
2506
+ </li>
2507
+ <li>
2508
+ <a href="#">Content</a>
2509
+ <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>
2510
+ </li>
2511
+ </ul>
2512
+ </div>
2513
+
2514
+ <a class="uk-navbar-item uk-logo" href="#">Logo</a>
2515
+
2516
+ <div class="uk-navbar-center-right">
2517
+ <ul class="uk-navbar-nav">
2518
+ <li class="uk-active"><a href="#">Active</a></li>
2519
+ <li>
2520
+ <a href="#">Parent</a>
2521
+ <div class="uk-navbar-dropdown">
2522
+ <ul class="uk-nav uk-navbar-dropdown-nav">
2523
+ <li class="uk-active"><a href="#">Active</a></li>
2524
+ <li class="uk-parent">
2525
+ <a href="#">Parent</a>
2526
+ <ul class="uk-nav-sub">
2527
+ <li><a href="#">Sub item</a></li>
2528
+ <li><a href="#">Sub item</a></li>
2529
+ </ul>
2530
+ </li>
2531
+ <li class="uk-nav-header">Header</li>
2532
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
2533
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
2534
+ <li class="uk-nav-divider"></li>
2535
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
2536
+ </ul>
2537
+ </div>
2538
+ </li>
2539
+ <li>
2540
+ <a href="#">Content</a>
2541
+ <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>
2542
+ </li>
2543
+ </ul>
2544
+ <div class="uk-navbar-item">
2545
+ <div>Some <a href="#">Link</a></div>
2546
+ </div>
2547
+ </div>
1738
2548
 
1739
- <a class="uk-navbar-item uk-logo" href="#">Logo</a>
2549
+ </div>
2550
+ <div class="uk-navbar-right">
1740
2551
 
1741
- <div class="uk-navbar-center-right"><div>
1742
2552
  <ul class="uk-navbar-nav">
1743
- <li class="uk-active"><a href="#">Active</a></li>
1744
2553
  <li>
1745
- <a href="#">Parent</a>
2554
+ <a href="#">Right</a>
1746
2555
  <div class="uk-navbar-dropdown">
1747
2556
  <ul class="uk-nav uk-navbar-dropdown-nav">
1748
2557
  <li class="uk-active"><a href="#">Active</a></li>
1749
- <li class="uk-parent">
2558
+ <li class="uk-parent">
1750
2559
  <a href="#">Parent</a>
1751
2560
  <ul class="uk-nav-sub">
1752
2561
  <li><a href="#">Sub item</a></li>
@@ -1761,48 +2570,21 @@
1761
2570
  </ul>
1762
2571
  </div>
1763
2572
  </li>
1764
- <li>
1765
- <a href="#">Content</a>
1766
- <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>
1767
- </li>
1768
2573
  </ul>
1769
- <div class="uk-navbar-item">
1770
- <div>Some <a href="#">Link</a></div>
1771
- </div>
1772
- </div></div>
1773
2574
 
2575
+ </div>
1774
2576
  </div>
1775
- <div class="uk-navbar-right">
1776
-
1777
- <ul class="uk-navbar-nav">
1778
- <li>
1779
- <a href="#">Right</a>
1780
- <div class="uk-navbar-dropdown">
1781
- <ul class="uk-nav uk-navbar-dropdown-nav">
1782
- <li class="uk-active"><a href="#">Active</a></li>
1783
- <li class="uk-parent">
1784
- <a href="#">Parent</a>
1785
- <ul class="uk-nav-sub">
1786
- <li><a href="#">Sub item</a></li>
1787
- <li><a href="#">Sub item</a></li>
1788
- </ul>
1789
- </li>
1790
- <li class="uk-nav-header">Header</li>
1791
- <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
1792
- <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
1793
- <li class="uk-nav-divider"></li>
1794
- <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
1795
- </ul>
1796
- </div>
1797
- </li>
1798
- </ul>
2577
+ </div>
2578
+ </nav>
1799
2579
 
1800
- </div>
1801
- </nav>
2580
+ <div class="uk-container">
1802
2581
 
1803
2582
  <h2>Justify</h2>
1804
2583
 
1805
- <nav class="uk-navbar-container uk-margin">
2584
+ </div>
2585
+
2586
+ <nav class="uk-navbar-container uk-margin">
2587
+ <div class="uk-container">
1806
2588
  <div class="uk-navbar-justify" uk-navbar>
1807
2589
  <div class="uk-navbar-left">
1808
2590
 
@@ -1823,19 +2605,25 @@
1823
2605
  </ul>
1824
2606
 
1825
2607
  <div class="uk-navbar-item">
1826
- <ul class="uk-grid-small" uk-grid>
2608
+ <ul class="uk-iconnav">
2609
+ <li>
2610
+ <a href="#" uk-icon="icon: user"></a>
2611
+ </li>
1827
2612
  <li>
1828
- <a class="uk-icon-button" href="#" uk-icon="icon: trash"></a>
2613
+ <a href="#" uk-icon="icon: bag"></a>
1829
2614
  </li>
1830
2615
  <li>
1831
- <a class="uk-icon-button" href="#" uk-icon="icon: trash"></a>
2616
+ <a href="#" uk-icon="icon: heart"></a>
1832
2617
  </li>
1833
2618
  </ul>
1834
2619
  </div>
1835
2620
 
1836
2621
  </div>
1837
2622
  </div>
1838
- </nav>
2623
+ </div>
2624
+ </nav>
2625
+
2626
+ <div class="uk-container">
1839
2627
 
1840
2628
  <h2>Layouts</h2>
1841
2629
 
@@ -1939,15 +2727,15 @@
1939
2727
  </ul>
1940
2728
 
1941
2729
  <div class="uk-navbar-item">
1942
- <ul class="uk-grid-small" uk-grid>
2730
+ <ul class="uk-iconnav">
1943
2731
  <li>
1944
- <a class="uk-icon-button" href="#" uk-icon="icon: trash"></a>
2732
+ <a href="#" uk-icon="icon: user"></a>
1945
2733
  </li>
1946
2734
  <li>
1947
- <a class="uk-icon-button" href="#" uk-icon="icon: trash"></a>
2735
+ <a href="#" uk-icon="icon: bag"></a>
1948
2736
  </li>
1949
2737
  <li>
1950
- <a class="uk-icon-button" href="#" uk-icon="icon: trash"></a>
2738
+ <a href="#" uk-icon="icon: heart"></a>
1951
2739
  </li>
1952
2740
  </ul>
1953
2741
  </div>
@@ -2345,5 +3133,19 @@
2345
3133
 
2346
3134
  </script>
2347
3135
 
3136
+ <script>
3137
+
3138
+ var options = UIkit.util.$$('#js-size-switcher option').map(function (option) { return option.value; });
3139
+
3140
+ UIkit.util.on('#js-size-switcher', 'change', function () {
3141
+ var value = this.value;
3142
+ UIkit.util.$$('.uk-navbar-dropdown').forEach(function (table) {
3143
+ UIkit.util.removeClass(table, options);
3144
+ UIkit.util.addClass(table, value);
3145
+ });
3146
+ });
3147
+
3148
+ </script>
3149
+
2348
3150
  </body>
2349
3151
  </html>