uikit 3.14.4-dev.e3664d0d2 → 3.14.4-dev.e8873dd80

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