uikit 3.14.4-dev.cd89debeb → 3.14.4-dev.f2e3be255

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