uikit 3.14.4-dev.871ba3c05 → 3.14.4-dev.ae765cd84

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 (138) hide show
  1. package/CHANGELOG.md +45 -11
  2. package/build/util.js +1 -0
  3. package/dist/css/uikit-core-rtl.css +385 -110
  4. package/dist/css/uikit-core-rtl.min.css +1 -1
  5. package/dist/css/uikit-core.css +385 -110
  6. package/dist/css/uikit-core.min.css +1 -1
  7. package/dist/css/uikit-rtl.css +402 -115
  8. package/dist/css/uikit-rtl.min.css +1 -1
  9. package/dist/css/uikit.css +402 -115
  10. package/dist/css/uikit.min.css +1 -1
  11. package/dist/js/components/countdown.js +1 -1
  12. package/dist/js/components/countdown.min.js +1 -1
  13. package/dist/js/components/filter.js +7 -5
  14. package/dist/js/components/filter.min.js +1 -1
  15. package/dist/js/components/lightbox-panel.js +185 -137
  16. package/dist/js/components/lightbox-panel.min.js +1 -1
  17. package/dist/js/components/lightbox.js +185 -137
  18. package/dist/js/components/lightbox.min.js +1 -1
  19. package/dist/js/components/notification.js +1 -1
  20. package/dist/js/components/notification.min.js +1 -1
  21. package/dist/js/components/parallax.js +4 -5
  22. package/dist/js/components/parallax.min.js +1 -1
  23. package/dist/js/components/slider-parallax.js +4 -5
  24. package/dist/js/components/slider-parallax.min.js +1 -1
  25. package/dist/js/components/slider.js +22 -7
  26. package/dist/js/components/slider.min.js +1 -1
  27. package/dist/js/components/slideshow-parallax.js +4 -5
  28. package/dist/js/components/slideshow-parallax.min.js +1 -1
  29. package/dist/js/components/slideshow.js +22 -7
  30. package/dist/js/components/slideshow.min.js +1 -1
  31. package/dist/js/components/sortable.js +3 -3
  32. package/dist/js/components/sortable.min.js +1 -1
  33. package/dist/js/components/tooltip.js +97 -135
  34. package/dist/js/components/tooltip.min.js +1 -1
  35. package/dist/js/components/upload.js +1 -1
  36. package/dist/js/components/upload.min.js +1 -1
  37. package/dist/js/uikit-core.js +1803 -1709
  38. package/dist/js/uikit-core.min.js +14 -1
  39. package/dist/js/uikit-icons.js +1 -1
  40. package/dist/js/uikit-icons.min.js +1 -1
  41. package/dist/js/uikit.js +1051 -940
  42. package/dist/js/uikit.min.js +14 -1
  43. package/package.json +1 -1
  44. package/src/images/{backgrounds/nav-parent-open.svg → components/nav-parent-icon-large.svg} +0 -0
  45. package/src/images/components/nav-parent-icon.svg +3 -0
  46. package/src/images/components/navbar-parent-icon.svg +3 -0
  47. package/src/images/components/navbar-toggle-icon.svg +22 -3
  48. package/src/js/api/state.js +2 -2
  49. package/src/js/components/filter.js +5 -3
  50. package/src/js/components/sortable.js +2 -3
  51. package/src/js/core/accordion.js +9 -17
  52. package/src/js/core/alert.js +35 -14
  53. package/src/js/core/drop.js +95 -61
  54. package/src/js/core/height-viewport.js +14 -6
  55. package/src/js/core/icon.js +16 -0
  56. package/src/js/core/index.js +2 -0
  57. package/src/js/core/leader.js +2 -2
  58. package/src/js/core/navbar.js +44 -30
  59. package/src/js/core/offcanvas.js +1 -47
  60. package/src/js/core/scroll.js +37 -10
  61. package/src/js/core/sticky.js +8 -9
  62. package/src/js/core/toggle.js +3 -5
  63. package/src/js/mixin/media.js +4 -5
  64. package/src/js/mixin/modal.js +97 -8
  65. package/src/js/mixin/position.js +26 -11
  66. package/src/js/mixin/slider-drag.js +20 -8
  67. package/src/js/mixin/style.js +11 -0
  68. package/src/js/mixin/togglable.js +80 -133
  69. package/src/js/util/animation.js +4 -3
  70. package/src/js/util/dimensions.js +6 -6
  71. package/src/js/util/filter.js +3 -7
  72. package/src/js/util/position.js +108 -107
  73. package/src/js/util/style.js +4 -13
  74. package/src/js/util/viewport.js +5 -32
  75. package/src/less/components/_import.less +1 -0
  76. package/src/less/components/drop.less +1 -18
  77. package/src/less/components/dropbar.less +115 -0
  78. package/src/less/components/dropdown.less +16 -16
  79. package/src/less/components/leader.less +1 -1
  80. package/src/less/components/nav.less +240 -63
  81. package/src/less/components/navbar.less +81 -38
  82. package/src/less/components/utility.less +21 -4
  83. package/src/less/theme/_import.less +1 -0
  84. package/src/less/theme/dropbar.less +44 -0
  85. package/src/less/theme/dropdown.less +0 -11
  86. package/src/less/theme/nav.less +43 -9
  87. package/src/less/theme/navbar.less +7 -11
  88. package/src/scss/components/_import.scss +1 -0
  89. package/src/scss/components/drop.scss +1 -18
  90. package/src/scss/components/dropbar.scss +115 -0
  91. package/src/scss/components/dropdown.scss +16 -16
  92. package/src/scss/components/leader.scss +1 -1
  93. package/src/scss/components/nav.scss +189 -51
  94. package/src/scss/components/navbar.scss +69 -38
  95. package/src/scss/components/utility.scss +19 -3
  96. package/src/scss/mixins-theme.scss +93 -25
  97. package/src/scss/mixins.scss +89 -17
  98. package/src/scss/theme/_import.scss +1 -0
  99. package/src/scss/theme/dropbar.scss +44 -0
  100. package/src/scss/theme/dropdown.scss +0 -8
  101. package/src/scss/theme/nav.scss +41 -9
  102. package/src/scss/theme/navbar.scss +7 -8
  103. package/src/scss/variables-theme.scss +71 -18
  104. package/src/scss/variables.scss +60 -14
  105. package/tests/accordion.html +2 -2
  106. package/tests/alert.html +2 -2
  107. package/tests/countdown.html +1 -1
  108. package/tests/drop.html +457 -371
  109. package/tests/dropbar.html +456 -0
  110. package/tests/dropdown.html +26 -401
  111. package/tests/filter.html +9 -12
  112. package/tests/form.html +1 -1
  113. package/tests/index.html +126 -107
  114. package/tests/js/index.js +1 -4
  115. package/tests/lightbox.html +5 -5
  116. package/tests/list.html +8 -8
  117. package/tests/modal.html +13 -13
  118. package/tests/nav.html +117 -75
  119. package/tests/navbar.html +2002 -1131
  120. package/tests/offcanvas.html +17 -21
  121. package/tests/parallax.html +1 -1
  122. package/tests/position.html +18 -16
  123. package/tests/progress.html +9 -9
  124. package/tests/scroll.html +7 -10
  125. package/tests/search.html +5 -5
  126. package/tests/slider.html +6 -5
  127. package/tests/slideshow.html +8 -8
  128. package/tests/sortable.html +6 -8
  129. package/tests/sticky-navbar.html +6 -6
  130. package/tests/sticky.html +8 -8
  131. package/tests/switcher.html +1 -1
  132. package/tests/tab.html +1 -1
  133. package/tests/table.html +7 -7
  134. package/tests/toggle.html +2 -2
  135. package/tests/tooltip.html +1 -1
  136. package/tests/upload.html +11 -11
  137. package/tests/utility.html +19 -0
  138. package/src/images/backgrounds/nav-parent-close.svg +0 -3
package/tests/dropbar.html ADDED
@@ -0,0 +1,456 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en-gb" dir="ltr">
3
+
4
+ <head>
5
+ <meta charset="utf-8">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1">
7
+ <title>Dropbar - UIkit tests</title>
8
+ <script src="js/test.js"></script>
9
+ <style>
10
+
11
+ .test {
12
+ display: block;
13
+ position: relative;
14
+ width: 100%;
15
+ }
16
+
17
+ .test-boundary {
18
+ border: 1px dashed rgba(0,0,0,0.2);
19
+ }
20
+
21
+ </style>
22
+ </head>
23
+
24
+ <body>
25
+
26
+ <div class="uk-container">
27
+
28
+ <h1>Dropbar</h1>
29
+
30
+ <div class="uk-margin">
31
+ <select id="js-size-switcher" class="uk-select uk-form-width-small">
32
+ <option value="">Default</option>
33
+ <option value="uk-dropbar-large">Large</option>
34
+ </select>
35
+ </div>
36
+
37
+ <div class="uk-child-width-1-4@m uk-grid-match" uk-grid>
38
+ <div>
39
+
40
+ <div class="uk-dropbar uk-dropbar-top test">
41
+ <h3>Top</h3>
42
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
43
+ </div>
44
+
45
+ </div>
46
+ <div>
47
+
48
+ <div class="uk-dropbar uk-dropbar-bottom test">
49
+ <h3>Bottom</h3>
50
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
51
+ </div>
52
+
53
+ </div>
54
+ <div>
55
+
56
+ <div class="uk-dropbar uk-dropbar-left test">
57
+ <h3>Left</h3>
58
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
59
+ </div>
60
+
61
+ </div>
62
+ <div>
63
+
64
+ <div class="uk-dropbar uk-dropbar-right test">
65
+ <h3>Right</h3>
66
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
67
+ </div>
68
+
69
+ </div>
70
+ </div>
71
+
72
+ <h2>Navbar</h2>
73
+
74
+ </div>
75
+
76
+ <nav class="uk-navbar-container uk-margin-top">
77
+ <div class="uk-container">
78
+ <div uk-navbar>
79
+ <div class="uk-navbar-left">
80
+
81
+ <ul class="uk-navbar-nav">
82
+ <li class="uk-active"><a href="#">Active</a></li>
83
+ <li><a href="#">Item</a></li>
84
+ <li><a href="#">Item</a></li>
85
+ </ul>
86
+
87
+ </div>
88
+ </div>
89
+ </div>
90
+ </nav>
91
+
92
+ <div class="uk-dropbar uk-dropbar-top test">
93
+ <div class="uk-container">
94
+
95
+ <div class="uk-child-width-1-3" uk-grid>
96
+ <div>
97
+ <ul class="uk-nav uk-navbar-dropdown-nav">
98
+ <li class="uk-active"><a href="#">Active</a></li>
99
+ <li class="uk-parent">
100
+ <a href="#">Parent</a>
101
+ <ul class="uk-nav-sub">
102
+ <li><a href="#">Sub item</a></li>
103
+ <li><a href="#">Sub item</a>
104
+ <ul>
105
+ <li><a href="#">Sub item</a></li>
106
+ <li><a href="#">Sub item</a></li>
107
+ </ul>
108
+ </li>
109
+ </ul>
110
+ </li>
111
+ <li class="uk-parent">
112
+ <a href="#">Parent</a>
113
+ <ul class="uk-nav-sub">
114
+ <li class="uk-active"><a href="#">Active</a></li>
115
+ <li><a href="#">Sub item</a></li>
116
+ </ul>
117
+ </li>
118
+ <li class="uk-nav-header">Header</li>
119
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
120
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
121
+ <li class="uk-nav-divider"></li>
122
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
123
+ </ul>
124
+ </div>
125
+ <div>
126
+ <ul class="uk-nav uk-nav-secondary">
127
+ <li class="uk-active"><a href="#"><div>Active<div class="uk-nav-subtitle">Subtitle lorem ipsum dolor sit amet, consectetur adipiscing.</div></div></a></li>
128
+ <li><a href="#"><div>Item<div class="uk-nav-subtitle">Subtitle lorem ipsum dolor sit amet, consectetur adipiscing.</div></div></a></li>
129
+ <li><a href="#"><div>Item<div class="uk-nav-subtitle">Subtitle lorem ipsum dolor sit amet, consectetur adipiscing.</div></div></a></li>
130
+ <li><a href="#"><div>Item<div class="uk-nav-subtitle">Subtitle lorem ipsum dolor sit amet, consectetur adipiscing.</div></div></a></li>
131
+ </ul>
132
+ </div>
133
+ <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
134
+ </div>
135
+
136
+ </div>
137
+ </div>
138
+
139
+ <div class="uk-container uk-margin-medium-top">
140
+
141
+ <h2>Animation</h2>
142
+
143
+ <div class="uk-child-width-1-4@m" uk-grid>
144
+ <div>
145
+ <div class="test-boundary uk-overflow-auto uk-height-large uk-resize-vertical">
146
+
147
+ <nav class="uk-navbar-container" uk-navbar>
148
+ <div class="uk-navbar-center">
149
+
150
+ <ul class="uk-navbar-nav">
151
+ <li>
152
+ <a href="#">Fade</a>
153
+ <div class="uk-dropbar uk-dropbar-top" uk-drop="stretch: x; animate-out: true">
154
+ <ul class="uk-nav uk-navbar-dropdown-nav">
155
+ <li class="uk-active"><a href="#">Active</a></li>
156
+ <li><a href="#">Item</a></li>
157
+ <li><a href="#">Item</a></li>
158
+ </ul>
159
+ </div>
160
+ </li>
161
+ </ul>
162
+
163
+ </div>
164
+ </nav>
165
+
166
+ </div>
167
+ </div>
168
+ <div>
169
+ <div class="test-boundary uk-overflow-auto uk-height-large uk-resize-vertical">
170
+
171
+ <nav class="uk-navbar-container" uk-navbar>
172
+ <div class="uk-navbar-center">
173
+
174
+ <ul class="uk-navbar-nav">
175
+ <li>
176
+ <a href="#">Slide Top</a>
177
+ <div class="uk-dropbar uk-dropbar-top" uk-drop="stretch: x; animation: slide-top; animate-out: true">
178
+ <ul class="uk-nav uk-navbar-dropdown-nav">
179
+ <li class="uk-active"><a href="#">Active</a></li>
180
+ <li><a href="#">Item</a></li>
181
+ <li><a href="#">Item</a></li>
182
+ </ul>
183
+ </div>
184
+ </li>
185
+ </ul>
186
+
187
+ </div>
188
+ </nav>
189
+
190
+ </div>
191
+ </div>
192
+ <div>
193
+ <div class="test-boundary uk-overflow-auto uk-height-large uk-resize-vertical">
194
+
195
+ <nav class="uk-navbar-container" uk-navbar>
196
+ <div class="uk-navbar-center">
197
+
198
+ <ul class="uk-navbar-nav">
199
+ <li>
200
+ <a href="#">Slide Left</a>
201
+ <div class="uk-dropbar uk-dropbar-left" uk-drop="stretch: y; animation: slide-left; animate-out: true">
202
+ <ul class="uk-nav uk-navbar-dropdown-nav">
203
+ <li class="uk-active"><a href="#">Active</a></li>
204
+ <li><a href="#">Item</a></li>
205
+ <li><a href="#">Item</a></li>
206
+ </ul>
207
+ </div>
208
+ </li>
209
+ </ul>
210
+
211
+ </div>
212
+ </nav>
213
+
214
+ </div>
215
+ </div>
216
+ <div>
217
+ <div class="test-boundary uk-overflow-auto uk-height-large uk-resize-vertical">
218
+
219
+ <nav class="uk-navbar-container" uk-navbar>
220
+ <div class="uk-navbar-center">
221
+
222
+ <ul class="uk-navbar-nav">
223
+ <li>
224
+ <a href="#">Slide Right</a>
225
+ <div class="uk-dropbar uk-dropbar-right" uk-drop="stretch: y; animation: slide-right; animate-out: true">
226
+ <ul class="uk-nav uk-navbar-dropdown-nav">
227
+ <li class="uk-active"><a href="#">Active</a></li>
228
+ <li><a href="#">Item</a></li>
229
+ <li><a href="#">Item</a></li>
230
+ </ul>
231
+ </div>
232
+ </li>
233
+ </ul>
234
+
235
+ </div>
236
+ </nav>
237
+
238
+ </div>
239
+ </div>
240
+ </div>
241
+
242
+ <h2>Stretch and Overflow Content</h2>
243
+
244
+ <div class="uk-child-width-1-4@m" uk-grid>
245
+ <div>
246
+ <div class="test-boundary uk-overflow-auto uk-height-large uk-resize-vertical">
247
+
248
+ <nav class="uk-navbar-container" uk-navbar>
249
+ <div class="uk-navbar-center">
250
+
251
+ <ul class="uk-navbar-nav">
252
+ <li>
253
+ <a href="#">Fade</a>
254
+ <div class="uk-dropbar uk-dropbar-top" uk-drop="stretch: true; animate-out: true">
255
+
256
+ <ul class="uk-nav uk-navbar-dropdown-nav">
257
+ <li class="uk-active"><a href="#">Active</a></li>
258
+ <li class="uk-parent">
259
+ <a href="#">Parent</a>
260
+ <ul class="uk-nav-sub">
261
+ <li><a href="#">Sub item</a></li>
262
+ <li><a href="#">Sub item</a>
263
+ <ul>
264
+ <li><a href="#">Sub item</a></li>
265
+ <li><a href="#">Sub item</a></li>
266
+ </ul>
267
+ </li>
268
+ </ul>
269
+ </li>
270
+ <li class="uk-parent">
271
+ <a href="#">Parent</a>
272
+ <ul class="uk-nav-sub">
273
+ <li class="uk-active"><a href="#">Active</a></li>
274
+ <li><a href="#">Sub item</a></li>
275
+ </ul>
276
+ </li>
277
+ <li class="uk-nav-header">Header</li>
278
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
279
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
280
+ <li class="uk-nav-divider"></li>
281
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
282
+ </ul>
283
+
284
+ </div>
285
+ </li>
286
+ </ul>
287
+
288
+ </div>
289
+ </nav>
290
+
291
+ </div>
292
+ </div>
293
+ <div>
294
+ <div class="test-boundary uk-overflow-auto uk-height-large uk-resize-vertical">
295
+
296
+ <nav class="uk-navbar-container" uk-navbar>
297
+ <div class="uk-navbar-center">
298
+
299
+ <ul class="uk-navbar-nav">
300
+ <li>
301
+ <a href="#">Slide Top</a>
302
+ <div class="uk-dropbar uk-dropbar-top" uk-drop="stretch: true; animation: slide-top; animate-out: true">
303
+
304
+ <ul class="uk-nav uk-navbar-dropdown-nav">
305
+ <li class="uk-active"><a href="#">Active</a></li>
306
+ <li class="uk-parent">
307
+ <a href="#">Parent</a>
308
+ <ul class="uk-nav-sub">
309
+ <li><a href="#">Sub item</a></li>
310
+ <li><a href="#">Sub item</a>
311
+ <ul>
312
+ <li><a href="#">Sub item</a></li>
313
+ <li><a href="#">Sub item</a></li>
314
+ </ul>
315
+ </li>
316
+ </ul>
317
+ </li>
318
+ <li class="uk-parent">
319
+ <a href="#">Parent</a>
320
+ <ul class="uk-nav-sub">
321
+ <li class="uk-active"><a href="#">Active</a></li>
322
+ <li><a href="#">Sub item</a></li>
323
+ </ul>
324
+ </li>
325
+ <li class="uk-nav-header">Header</li>
326
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
327
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
328
+ <li class="uk-nav-divider"></li>
329
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
330
+ </ul>
331
+
332
+ </div>
333
+ </li>
334
+ </ul>
335
+
336
+ </div>
337
+ </nav>
338
+
339
+ </div>
340
+ </div>
341
+ <div>
342
+ <div class="test-boundary uk-overflow-auto uk-height-large uk-resize-vertical">
343
+
344
+ <nav class="uk-navbar-container" uk-navbar>
345
+ <div class="uk-navbar-center">
346
+
347
+ <ul class="uk-navbar-nav">
348
+ <li>
349
+ <a href="#">Slide Left</a>
350
+ <div class="uk-dropbar uk-dropbar-left" uk-drop="stretch: true; animation: slide-left; animate-out: true">
351
+
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>
359
+ <ul>
360
+ <li><a href="#">Sub item</a></li>
361
+ <li><a href="#">Sub item</a></li>
362
+ </ul>
363
+ </li>
364
+ </ul>
365
+ </li>
366
+ <li class="uk-parent">
367
+ <a href="#">Parent</a>
368
+ <ul class="uk-nav-sub">
369
+ <li class="uk-active"><a href="#">Active</a></li>
370
+ <li><a href="#">Sub item</a></li>
371
+ </ul>
372
+ </li>
373
+ <li class="uk-nav-header">Header</li>
374
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
375
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
376
+ <li class="uk-nav-divider"></li>
377
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
378
+ </ul>
379
+
380
+ </div>
381
+ </li>
382
+ </ul>
383
+
384
+ </div>
385
+ </nav>
386
+
387
+ </div>
388
+ </div>
389
+ <div>
390
+ <div class="test-boundary uk-overflow-auto uk-height-large uk-resize-vertical">
391
+
392
+ <nav class="uk-navbar-container" uk-navbar>
393
+ <div class="uk-navbar-center">
394
+
395
+ <ul class="uk-navbar-nav">
396
+ <li>
397
+ <a href="#">Slide Right</a>
398
+ <div class="uk-dropbar uk-dropbar-right" uk-drop="stretch: true; animation: slide-right; animate-out: true">
399
+
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>
407
+ <ul>
408
+ <li><a href="#">Sub item</a></li>
409
+ <li><a href="#">Sub item</a></li>
410
+ </ul>
411
+ </li>
412
+ </ul>
413
+ </li>
414
+ <li class="uk-parent">
415
+ <a href="#">Parent</a>
416
+ <ul class="uk-nav-sub">
417
+ <li class="uk-active"><a href="#">Active</a></li>
418
+ <li><a href="#">Sub item</a></li>
419
+ </ul>
420
+ </li>
421
+ <li class="uk-nav-header">Header</li>
422
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
423
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
424
+ <li class="uk-nav-divider"></li>
425
+ <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
426
+ </ul>
427
+
428
+ </div>
429
+ </li>
430
+ </ul>
431
+
432
+ </div>
433
+ </nav>
434
+
435
+ </div>
436
+ </div>
437
+ </div>
438
+
439
+ </div>
440
+
441
+ <script>
442
+
443
+ const {$$, addClass, on, removeClass } = UIkit.util;
444
+
445
+ on('#js-size-switcher', 'change', (e) => {
446
+ const options = $$('option', e.target).map(({value}) => value);
447
+ for (const dropbar of $$('.uk-dropbar')) {
448
+ removeClass(dropbar, options);
449
+ addClass(dropbar, e.target.value);
450
+ }
451
+ });
452
+
453
+ </script>
454
+
455
+ </body>
456
+ </html>