uikit 3.14.4-dev.fea9fd466 → 3.14.4-dev.fef7412a0

package/tests/index.html

@@ -20,7 +20,7 @@
                         <ul class="uk-navbar-nav">
                             <li class="uk-active"><a href="#">Active</a></li>
                             <li>
-                                <a href="#">Parent <span uk-navbar-parent-icon></span></a>
+                                <a href="#">Dropdown <span uk-navbar-parent-icon></span></a>
                                 <div class="uk-navbar-dropdown">
                                     <ul class="uk-nav uk-navbar-dropdown-nav">
                                         <li class="uk-active"><a href="#">Active</a></li>
@@ -39,6 +39,26 @@
                                     </ul>
                                 </div>
                             </li>
+                            <li>
+                                <a href="#">Dropbar <span uk-navbar-parent-icon></span></a>
+                                <div class="uk-dropbar uk-dropbar-top" uk-drop="pos: bottom-left; stretch: x; target-y: !.uk-navbar-container; animation: slide-top; animate-out: true">
+                                    <ul class="uk-nav uk-navbar-dropdown-nav">
+                                        <li class="uk-active"><a href="#">Active</a></li>
+                                        <li class="uk-parent">
+                                            <a href="#">Parent</a>
+                                            <ul class="uk-nav-sub">
+                                                <li><a href="#">Sub item</a></li>
+                                                <li><a href="#">Sub item</a></li>
+                                            </ul>
+                                        </li>
+                                        <li class="uk-nav-header">Header</li>
+                                        <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: table"></span> Item</a></li>
+                                        <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: thumbnails"></span> Item</a></li>
+                                        <li class="uk-nav-divider"></li>
+                                        <li><a href="#"><span class="uk-margin-small-right" uk-icon="icon: trash"></span> Item</a></li>
+                                    </ul>
+                                </div>
+                            </li>
                             <li><a href="#">Item</a></li>
                             <li><a href="#">Item</a></li>
                         </ul>
@@ -237,7 +257,7 @@
                             </form>
                         </div>
 
-                        <ul class="uk-nav-default uk-nav-parent-icon uk-margin-medium" uk-nav>
+                        <ul class="uk-nav-default uk-margin-medium" uk-nav>
                             <li class="uk-active"><a href="#">Active</a></li>
                             <li class="uk-parent">
                                 <a href="#">Parent <span uk-nav-parent-icon></span></a>
@@ -291,68 +311,24 @@
                 <hr class="uk-margin-large">
 
                 <div class="uk-grid-divider" uk-grid>
-                    <div class="uk-width-3-5@m">
-
-                        <div class="uk-child-width-expand@s" uk-grid>
-                            <div>
-
-                                <form class="uk-form-stacked">
-
-                                    <div class="uk-margin-small">
-                                        <label class="uk-form-label">Text</label>
-                                        <input class="uk-input" type="text" placeholder="Some text...">
-                                    </div>
-
-                                    <div class="uk-margin-small">
-                                        <select class="uk-select">
-                                            <option>Option 01</option>
-                                            <option>Option 02</option>
-                                        </select>
-                                    </div>
-
-                                    <div class="uk-margin-small">
-                                         <textarea class="uk-textarea" rows="2" placeholder="Some text..."></textarea>
-                                    </div>
-
-                                    <div class="uk-grid-small uk-child-width-auto" uk-grid>
-                                        <div>
-                                            <label><input class="uk-radio" type="radio" name="radio"> Radio</label>
-                                        </div>
-                                        <div>
-                                            <label><input class="uk-checkbox" type="checkbox"> Checkbox</label>
-                                        </div>
-                                    </div>
-
-                                    <div class="uk-margin-small">
-                                        <input class="uk-range" type="range" value="2" min="0" max="10" step="0.1">
-                                    </div>
-
-                                </form>
-
-                            </div>
-                            <div>
-
-                                <form class="uk-form-stacked">
-
-                                    <div class="uk-margin-small">
-                                        <label class="uk-form-label">States</label>
-                                        <input class="uk-input" type="text" placeholder=":disabled" disabled>
-                                    </div>
+                    <div class="uk-width-2-3@m">
 
-                                    <div class="uk-margin-small">
-                                        <input class="uk-input uk-form-danger" type="text" placeholder="form-danger" value="form-danger">
-                                    </div>
-                                    <div class="uk-margin-small">
-                                        <input class="uk-input uk-form-success" type="text" placeholder="form-success" value="form-success">
-                                    </div>
-                                    <div class="uk-margin-small">
-                                        <input class="uk-input uk-form-blank" type="text" placeholder="form-blank">
-                                    </div>
+                        <h1 class="uk-heading-2xlarge uk-margin-small">2X-Large</h1>
+                        <h1 class="uk-heading-xlarge uk-margin-small">X-Large</h1>
+                        <h1 class="uk-heading-large uk-margin-small">Heading L</h1>
+                        <h1 class="uk-heading-medium uk-margin-small">Heading M</h1>
+                        <h1 class="uk-heading-small uk-margin-small">Heading S</h1>
 
-                                </form>
+                        <h1 class="uk-margin-small">Heading H1</h1>
+                        <h2 class="uk-margin-small">Heading H2</h2>
+                        <h3 class="uk-margin-small">Heading H3</h3>
+                        <h4 class="uk-margin-small">Heading H4</h4>
+                        <h5 class="uk-margin-small">Heading H5</h5>
+                        <h6 class="uk-margin-small">Heading H6</h6>
 
-                            </div>
-                        </div>
+                        <h3 class="uk-heading-divider">Heading Divider</h3>
+                        <h3 class="uk-heading-bullet">Heading Bullet</h3>
+                        <h3 class="uk-heading-line"><span>Heading Line</span></h3>
 
                         <div class="uk-overflow-auto uk-margin-medium-top">
                             <table class="uk-table uk-table-divider uk-table-hover uk-table-small">
@@ -388,31 +364,6 @@
                             </table>
                         </div>
 
-                        <div class="uk-margin-medium-top" uk-alert>
-                            <a href="#" class="uk-alert-close" uk-close></a>
-                            <p>Default</p>
-                        </div>
-
-                        <div class="uk-alert-primary" uk-alert>
-                            <a href="#" class="uk-alert-close" uk-close></a>
-                            <p>Primary</p>
-                        </div>
-
-                        <div class="uk-alert-success" uk-alert>
-                            <a href="#" class="uk-alert-close" uk-close></a>
-                            <p>Success</p>
-                        </div>
-
-                        <div class="uk-alert-warning" uk-alert>
-                            <a href="#" class="uk-alert-close" uk-close></a>
-                            <p>Warning</p>
-                        </div>
-
-                        <div class="uk-alert-danger uk-margin-remove-bottom" uk-alert>
-                            <a href="#" class="uk-alert-close" uk-close></a>
-                            <p>Danger</p>
-                        </div>
-
                         <div class="uk-grid-small uk-child-width-auto uk-margin-medium-top" uk-grid js-countdown>
                             <div>
                                 <div class="uk-countdown-number uk-countdown-days"></div>
@@ -433,33 +384,101 @@
 
                         <script>
 
-                            var date = (new Date(Date.now() + 864e5 * 7)).toISOString();
-
-                            UIkit.util.$$('[js-countdown]').forEach(function(el) {
-                                UIkit.countdown(el, {date: date});
+                            UIkit.countdown('[js-countdown]', {
+                                date: (new Date(Date.now() + 864e5 * 7)).toISOString()
                             });
 
                         </script>
 
                     </div>
-                    <div class="uk-width-2-5@m">
+                    <div class="uk-width-1-3@m">
 
-                        <h1 class="uk-heading-2xlarge uk-margin-small">2XL</h1>
-                        <h1 class="uk-heading-xlarge uk-margin-small">X-Large</h1>
-                        <h1 class="uk-heading-large uk-margin-small">Heading L</h1>
-                        <h1 class="uk-heading-medium uk-margin-small">Heading M</h1>
-                        <h1 class="uk-heading-small uk-margin-small">Heading S</h1>
+                        <form class="uk-form-stacked">
 
-                        <h1 class="uk-margin-small">Heading H1</h1>
-                        <h2 class="uk-margin-small">Heading H2</h2>
-                        <h3 class="uk-margin-small">Heading H3</h3>
-                        <h4 class="uk-margin-small">Heading H4</h4>
-                        <h5 class="uk-margin-small">Heading H5</h5>
-                        <h6 class="uk-margin-small">Heading H6</h6>
+                            <div class="uk-margin-small">
+                                <label class="uk-form-label">Text</label>
+                                <input class="uk-input" type="text" placeholder="Some text...">
+                            </div>
 
-                        <h3 class="uk-heading-divider">Heading Divider</h3>
-                        <h3 class="uk-heading-bullet">Heading Bullet</h3>
-                        <h3 class="uk-heading-line"><span>Heading Line</span></h3>
+                            <div class="uk-margin-small">
+                                <select class="uk-select">
+                                    <option>Option 01</option>
+                                    <option>Option 02</option>
+                                </select>
+                            </div>
+
+                            <div class="uk-margin-small">
+                                 <textarea class="uk-textarea" rows="2" placeholder="Some text..."></textarea>
+                            </div>
+
+                            <div class="uk-grid-small uk-child-width-auto" uk-grid>
+                                <div>
+                                    <label><input class="uk-radio" type="radio" name="radio"> Radio</label>
+                                </div>
+                                <div>
+                                    <label><input class="uk-checkbox" type="checkbox"> Checkbox</label>
+                                </div>
+                            </div>
+
+                            <div class="uk-margin-small">
+                                <input class="uk-range" type="range" value="2" min="0" max="10" step="0.1">
+                            </div>
+
+                            <div class="uk-margin-small">
+                                <label class="uk-form-label">States</label>
+                                <input class="uk-input" type="text" placeholder=":disabled" disabled>
+                            </div>
+
+                            <div class="uk-margin-small">
+                                <input class="uk-input uk-form-danger" type="text" placeholder="form-danger" value="form-danger">
+                            </div>
+                            <div class="uk-margin-small">
+                                <input class="uk-input uk-form-success" type="text" placeholder="form-success" value="form-success">
+                            </div>
+                            <div class="uk-margin-small">
+                                <input class="uk-input uk-form-blank" type="text" placeholder="form-blank">
+                            </div>
+
+                        </form>
+
+                        <ul class="uk-nav uk-nav-primary uk-margin-medium">
+                            <li class="uk-active"><a href="#">Active</a></li>
+                            <li><a href="#">Item</a></li>
+                            <li><a href="#">Item</a></li>
+                            <li><a href="#">Item</a></li>
+                        </ul>
+
+                        <ul class="uk-nav uk-nav-secondary uk-margin-medium">
+                            <li class="uk-active"><a href="#"><div>Active<div class="uk-nav-subtitle">Subtitle lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do.</div></div></a></li>
+                            <li><a href="#"><div>Item<div class="uk-nav-subtitle">Subtitle lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do.</div></div></a></li>
+                            <li><a href="#"><div>Item<div class="uk-nav-subtitle">Subtitle lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do.</div></div></a></li>
+                            <li><a href="#"><div>Item<div class="uk-nav-subtitle">Subtitle lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do.</div></div></a></li>
+                        </ul>
+
+                        <div class="uk-margin-medium-top" uk-alert>
+                            <a href="#" class="uk-alert-close" uk-close></a>
+                            <p>Default</p>
+                        </div>
+
+                        <div class="uk-alert-primary" uk-alert>
+                            <a href="#" class="uk-alert-close" uk-close></a>
+                            <p>Primary</p>
+                        </div>
+
+                        <div class="uk-alert-success" uk-alert>
+                            <a href="#" class="uk-alert-close" uk-close></a>
+                            <p>Success</p>
+                        </div>
+
+                        <div class="uk-alert-warning" uk-alert>
+                            <a href="#" class="uk-alert-close" uk-close></a>
+                            <p>Warning</p>
+                        </div>
+
+                        <div class="uk-alert-danger uk-margin-remove-bottom" uk-alert>
+                            <a href="#" class="uk-alert-close" uk-close></a>
+                            <p>Danger</p>
+                        </div>
 
                     </div>
                 </div>

package/tests/js/index.js

@@ -16,16 +16,13 @@ const themes = request.status === 200 ? JSON.parse(request.responseText) : {};
 const styles = {
     core: { css: '../dist/css/uikit-core.css' },
     theme: { css: '../dist/css/uikit.css' },
+    ...themes,
 };
 const component = location.pathname
     .split('/')
     .pop()
     .replace(/.html$/, '');
 
-for (const theme in themes) {
-    styles[theme] = themes[theme];
-}
-
 const variations = {
     '': 'Default',
     light: 'Dark',

package/tests/lightbox.html

@@ -273,13 +273,13 @@
 
         <script>
 
-            var util = UIkit.util;
+            const {$, attr, on } = UIkit.util;
 
-            util.on('#js-animation-switcher', 'change', function() {
-                util.attr(util.$('#js-lightbox-animation'), 'animation', this.value);
-            });
+            on('#js-animation-switcher', 'change', () =>
+                attr($('#js-lightbox-animation'), 'animation', this.value)
+            );
 
-            util.on('#js-lightbox', 'click', function (e) {
+            on('#js-lightbox', 'click', (e) => {
                 e.preventDefault();
 
                 UIkit.lightboxPanel({

package/tests/list.html

@@ -474,14 +474,14 @@
 
         <script>
 
-            var options = UIkit.util.$$('#js-color-switcher option').map(function (option) { return option.value; });
-
-            UIkit.util.on('#js-color-switcher', 'change', function () {
-                var value = this.value;
-                UIkit.util.$$('.uk-list').forEach(function (table) {
-                    UIkit.util.removeClass(table, options);
-                    UIkit.util.addClass(table, value);
-                });
+            const {$$, addClass, on, removeClass } = UIkit.util;
+
+            on('#js-color-switcher', 'change', (e) => {
+                const options = $$('option', e.target).map(({value}) => value);
+                for (const el of $$('.uk-list')) {
+                    removeClass(el, options);
+                    addClass(el, e.target.value);
+                }
             });
 
         </script>

package/tests/modal.html

@@ -458,37 +458,37 @@
         </div>
 
         <script>
+            const {on} = UIkit.util;
 
-            UIkit.util.on('#js-modal-dialog', 'click', function (e) {
+            on('#js-modal-dialog', 'click', e => {
                 e.preventDefault();
                 e.target.blur();
                 UIkit.modal.dialog('<p class="uk-modal-body">UIkit dialog!</p>');
             });
 
-            UIkit.util.on('#js-modal-alert', 'click', function (e) {
+            on('#js-modal-alert', 'click', e => {
                 e.preventDefault();
                 e.target.blur();
-                UIkit.modal.alert('UIkit alert!').then(function () {
+                UIkit.modal.alert('UIkit alert!').then(() =>
                     console.log('Alert closed.')
-                });
+                );
             });
 
-            UIkit.util.on('#js-modal-confirm', 'click', function (e) {
+            on('#js-modal-confirm', 'click', e => {
                 e.preventDefault();
                 e.target.blur();
-                UIkit.modal.confirm('UIkit confirm!').then(function () {
-                    console.log('Confirmed.')
-                }, function () {
-                    console.log('Rejected.')
-                });
+                UIkit.modal.confirm('UIkit confirm!').then(
+                    () => console.log('Confirmed.'),
+                    () => console.log('Rejected.')
+                );
             });
 
-            UIkit.util.on('#js-modal-prompt', 'click', function (e) {
+            on('#js-modal-prompt', 'click', e => {
                 e.preventDefault();
                 e.target.blur();
-                UIkit.modal.prompt('Name:', 'Your name').then(function (name) {
+                UIkit.modal.prompt('Name:', 'Your name').then(name =>
                     console.log('Prompted:', name)
-                });
+                );
             });
 
           </script>

package/tests/nav.html

@@ -58,7 +58,7 @@
                 <div>
 
                     <h2>Accordion</h2>
-                    <ul class="uk-nav-default uk-nav-parent-icon" uk-nav>
+                    <ul class="uk-nav-default" uk-nav>
                         <li class="uk-active"><a href="#">Active</a></li>
                         <li class="uk-parent">
                             <a href="#">Parent <span uk-nav-parent-icon></span></a>
@@ -91,7 +91,7 @@
 
                     <h2 class="uk-text-center">Center + Multiple</h2>
 
-                    <ul class="uk-nav-default uk-nav-center uk-nav-parent-icon" uk-nav="multiple: true">
+                    <ul class="uk-nav-default uk-nav-center" uk-nav="multiple: true">
                         <li class="uk-active"><a href="#">Active</a></li>
                         <li class="uk-parent">
                             <a href="#">Parent <span uk-nav-parent-icon></span></a>
@@ -171,7 +171,7 @@
                 <div>
 
                     <h2>Accordion</h2>
-                    <ul class="uk-nav-primary uk-nav-parent-icon" uk-nav>
+                    <ul class="uk-nav-primary" uk-nav>
                         <li class="uk-active"><a href="#">Active</a></li>
                         <li class="uk-parent">
                             <a href="#">Parent <span uk-nav-parent-icon></span></a>
@@ -204,7 +204,7 @@
 
                     <h2 class="uk-text-center">Center + Multiple</h2>
 
-                    <ul class="uk-nav-primary uk-nav-center uk-nav-parent-icon" uk-nav="multiple: true">
+                    <ul class="uk-nav-primary uk-nav-center" uk-nav="multiple: true">
                         <li class="uk-active"><a href="#">Active</a></li>
                         <li class="uk-parent">
                             <a href="#">Parent <span uk-nav-parent-icon></span></a>
@@ -247,6 +247,115 @@
                 </div>
             </div>
 
+            <div class="uk-child-width-1-3@m" uk-grid>
+                <div>
+
+                    <h2>Secondary</h2>
+
+                    <ul class="uk-nav uk-nav-secondary">
+                        <li class="uk-active"><a href="#"><div>Active<div class="uk-nav-subtitle">Subtitle lorem ipsum dolor sit amet, consectetur.</div></div></a></li>
+                        <li class="uk-parent">
+                            <a href="#"><div>Parent<div class="uk-nav-subtitle">Subtitle lorem ipsum dolor sit amet, consectetur.</div></div></a>
+                            <ul class="uk-nav-sub">
+                                <li><a href="#">Sub item</a></li>
+                                <li><a href="#">Sub item</a>
+                                    <ul>
+                                        <li><a href="#">Sub item</a></li>
+                                        <li><a href="#">Sub item</a></li>
+                                    </ul>
+                                </li>
+                            </ul>
+                        </li>
+                        <li class="uk-parent">
+                            <a href="#"><div>Parent<div class="uk-nav-subtitle">Subtitle lorem ipsum dolor sit amet, consectetur.</div></div></a>
+                            <ul class="uk-nav-sub">
+                                <li class="uk-active"><a href="#">Active</a></li>
+                                <li><a href="#">Sub item</a></li>
+                            </ul>
+                        </li>
+                        <li class="uk-nav-header">Header</li>
+                        <li><a href="#">
+                            <span class="uk-margin-small-right uk-preserve-width" uk-icon="icon: table; ratio: 1"></span>
+                            <div>Item<div class="uk-nav-subtitle">Subtitle lorem ipsum dolor sit amet, consectetur.</div></div>
+                        </a></li>
+                        <li><a href="#">
+                            <span class="uk-margin-small-right uk-preserve-width" uk-icon="icon: thumbnails; ratio: 1"></span>
+                            <div>Item<div class="uk-nav-subtitle">Subtitle lorem ipsum dolor sit amet, consectetur.</div></div>
+                        </a></li>
+                        <li class="uk-nav-divider"></li>
+                        <li><a href="#">
+                            <span class="uk-margin-small-right uk-preserve-width" uk-icon="icon: trash; ratio: 1"></span>
+                            <div>Item<div class="uk-nav-subtitle">Subtitle lorem ipsum dolor sit amet, consectetur.</div></div>
+                        </a></li>
+                    </ul>
+
+                </div>
+                <div>
+
+                    <h2>Icon + Grid Top</h2>
+
+                    <ul class="uk-nav uk-nav-secondary">
+                        <li class="uk-active"><a href="#">
+                            <div class="uk-grid uk-grid-small">
+                                <div class="uk-width-auto"><span uk-icon="icon: settings; ratio: 1.5"></span></div>
+                                <div class="uk-width-expand">Active<div class="uk-nav-subtitle">Subtitle lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do.</div></div>
+                            </div>
+                        </a></li>
+                        <li><a href="#">
+                            <div class="uk-grid uk-grid-small">
+                                <div class="uk-width-auto"><span uk-icon="icon: bell; ratio: 1.5"></span></div>
+                                <div class="uk-width-expand">Item<div class="uk-nav-subtitle">Subtitle lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do.</div></div>
+                            </div>
+                        </a></li>
+                        <li><a href="#">
+                            <div class="uk-grid uk-grid-small">
+                                <div class="uk-width-auto"><span uk-icon="icon: microphone; ratio: 1.5"></span></div>
+                                <div class="uk-width-expand">Item<div class="uk-nav-subtitle">Subtitle lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do.</div></div>
+                            </div>
+                        </a></li>
+                        <li><a href="#">
+                            <div class="uk-grid uk-grid-small">
+                                <div class="uk-width-auto"><span uk-icon="icon: camera; ratio: 1.5"></span></div>
+                                <div class="uk-width-expand">Item<div class="uk-nav-subtitle">Subtitle lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do.</div></div>
+                            </div>
+                        </a></li>
+                    </ul>
+
+                </div>
+                <div>
+
+                    <h2>Icon + Grid Middle</h2>
+
+                    <ul class="uk-nav uk-nav-secondary">
+                        <li class="uk-active"><a href="#">
+                            <div class="uk-grid uk-grid-small uk-flex-middle">
+                                <div class="uk-width-auto"><span uk-icon="icon: settings; ratio: 1.5"></span></div>
+                                <div class="uk-width-expand">Active<div class="uk-nav-subtitle">Subtitle lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do.</div></div>
+                            </div>
+                        </a></li>
+                        <li><a href="#">
+                            <div class="uk-grid uk-grid-small uk-flex-middle">
+                                <div class="uk-width-auto"><span uk-icon="icon: bell; ratio: 1.5"></span></div>
+                                <div class="uk-width-expand">Item<div class="uk-nav-subtitle">Subtitle lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do.</div></div>
+                            </div>
+                        </a></li>
+                        <li><a href="#">
+                            <div class="uk-grid uk-grid-small uk-flex-middle">
+                                <div class="uk-width-auto"><span uk-icon="icon: microphone; ratio: 1.5"></span></div>
+                                <div class="uk-width-expand">Item<div class="uk-nav-subtitle">Subtitle lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do.</div></div>
+                            </div>
+                        </a></li>
+                        <li><a href="#">
+                            <div class="uk-grid uk-grid-small uk-flex-middle">
+                                <div class="uk-width-auto"><span uk-icon="icon: camera; ratio: 1.5"></span></div>
+                                <div class="uk-width-expand">Item<div class="uk-nav-subtitle">Subtitle lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do.</div></div>
+                            </div>
+                        </a></li>
+                    </ul>
+
+                </div>
+            </div>
+
             <h2>JavaScript Options</h2>
 
             <table class="uk-table uk-table-striped">
@@ -305,7 +414,7 @@
                         <td><code>animation</code></td>
                         <td>String</td>
                         <td>true</td>
-                        <td>The space separated names of animations to use. (Comma separate for animation out)</td>
+                        <td>Space-separated names of animations. Comma-separated for animation out.</td>
                     </tr>
                     <tr>
                         <td><code>duration</code></td>
@@ -320,14 +429,14 @@
 
         <script>
 
-            var options = UIkit.util.$$('#js-divider-switcher option').map(function (option) { return option.value; });
+            const {$$, addClass, on, removeClass } = UIkit.util;
 
-            UIkit.util.on('#js-divider-switcher', 'change', function () {
-                var value = this.value;
-                UIkit.util.$$('.uk-nav').forEach(function (table) {
-                    UIkit.util.removeClass(table, options);
-                    UIkit.util.addClass(table, value);
-                });
+            on('#js-divider-switcher', 'change', (e) => {
+                const options = $$('option', e.target).map(({value}) => value);
+                for (const el of $$('.uk-nav')) {
+                    removeClass(el, options);
+                    addClass(el, e.target.value);
+                }
             });
 
         </script>