uikit 3.14.4-dev.f2e3be255 → 3.14.4-dev.fab1c7b7c

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 (135) hide show
  1. package/CHANGELOG.md +37 -18
  2. package/build/util.js +1 -0
  3. package/dist/css/uikit-core-rtl.css +349 -109
  4. package/dist/css/uikit-core-rtl.min.css +1 -1
  5. package/dist/css/uikit-core.css +349 -109
  6. package/dist/css/uikit-core.min.css +1 -1
  7. package/dist/css/uikit-rtl.css +369 -113
  8. package/dist/css/uikit-rtl.min.css +1 -1
  9. package/dist/css/uikit.css +369 -113
  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 +4 -2
  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 +102 -147
  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 +509 -483
  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 +518 -488
  42. package/dist/js/uikit.min.js +17 -1
  43. package/package.json +11 -11
  44. package/src/images/{backgrounds/nav-parent-close.svg → components/nav-parent-icon-large.svg} +0 -0
  45. package/src/images/{backgrounds/navbar-parent-close.svg → components/nav-parent-icon.svg} +0 -0
  46. package/src/images/{backgrounds/navbar-parent-open.svg → components/navbar-parent-icon.svg} +1 -1
  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/components/notification.js +3 -1
  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 +110 -82
  54. package/src/js/core/height-viewport.js +6 -2
  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 +30 -45
  59. package/src/js/core/scroll.js +37 -10
  60. package/src/js/core/toggle.js +3 -5
  61. package/src/js/mixin/media.js +4 -5
  62. package/src/js/mixin/modal.js +15 -12
  63. package/src/js/mixin/position.js +24 -26
  64. package/src/js/mixin/style.js +11 -0
  65. package/src/js/mixin/togglable.js +88 -133
  66. package/src/js/util/animation.js +9 -7
  67. package/src/js/util/class.js +3 -1
  68. package/src/js/util/filter.js +3 -7
  69. package/src/js/util/position.js +107 -107
  70. package/src/js/util/style.js +4 -13
  71. package/src/js/util/viewport.js +3 -5
  72. package/src/less/components/_import.less +1 -0
  73. package/src/less/components/drop.less +1 -18
  74. package/src/less/components/dropbar.less +126 -0
  75. package/src/less/components/dropdown.less +11 -19
  76. package/src/less/components/leader.less +1 -1
  77. package/src/less/components/nav.less +218 -59
  78. package/src/less/components/navbar.less +62 -47
  79. package/src/less/components/utility.less +10 -2
  80. package/src/less/theme/_import.less +1 -0
  81. package/src/less/theme/dropbar.less +44 -0
  82. package/src/less/theme/dropdown.less +0 -11
  83. package/src/less/theme/nav.less +45 -7
  84. package/src/less/theme/navbar.less +1 -5
  85. package/src/scss/components/_import.scss +1 -0
  86. package/src/scss/components/drop.scss +1 -18
  87. package/src/scss/components/dropbar.scss +126 -0
  88. package/src/scss/components/dropdown.scss +11 -19
  89. package/src/scss/components/leader.scss +1 -1
  90. package/src/scss/components/nav.scss +167 -47
  91. package/src/scss/components/navbar.scss +50 -47
  92. package/src/scss/components/utility.scss +8 -1
  93. package/src/scss/mixins-theme.scss +92 -21
  94. package/src/scss/mixins.scss +89 -17
  95. package/src/scss/theme/_import.scss +1 -0
  96. package/src/scss/theme/dropbar.scss +44 -0
  97. package/src/scss/theme/dropdown.scss +0 -8
  98. package/src/scss/theme/nav.scss +43 -7
  99. package/src/scss/theme/navbar.scss +1 -5
  100. package/src/scss/variables-theme.scss +60 -19
  101. package/src/scss/variables.scss +49 -17
  102. package/tests/accordion.html +2 -2
  103. package/tests/alert.html +2 -2
  104. package/tests/countdown.html +1 -1
  105. package/tests/drop.html +446 -416
  106. package/tests/dropbar.html +458 -0
  107. package/tests/dropdown.html +8 -470
  108. package/tests/filter.html +9 -12
  109. package/tests/form.html +1 -1
  110. package/tests/index.html +126 -107
  111. package/tests/js/index.js +1 -4
  112. package/tests/lightbox.html +5 -5
  113. package/tests/list.html +8 -8
  114. package/tests/modal.html +13 -13
  115. package/tests/nav.html +117 -75
  116. package/tests/navbar.html +126 -246
  117. package/tests/offcanvas.html +17 -21
  118. package/tests/parallax.html +1 -1
  119. package/tests/position.html +18 -16
  120. package/tests/progress.html +9 -9
  121. package/tests/scroll.html +7 -10
  122. package/tests/search.html +6 -6
  123. package/tests/slider.html +6 -5
  124. package/tests/slideshow.html +8 -8
  125. package/tests/sortable.html +6 -8
  126. package/tests/sticky-navbar.html +15 -15
  127. package/tests/sticky.html +8 -8
  128. package/tests/switcher.html +1 -1
  129. package/tests/tab.html +1 -1
  130. package/tests/table.html +7 -7
  131. package/tests/toggle.html +2 -2
  132. package/tests/tooltip.html +1 -1
  133. package/tests/upload.html +11 -11
  134. package/tests/utility.html +19 -0
  135. package/src/images/backgrounds/nav-parent-open.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>