uikit 3.14.3 → 3.14.4-dev.008162cc3

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