Simpele navigatie

Een simpele navigatiebalk variant, met een submenu voor een item.

De submenu functionaliteit maakt gebruik van javascript: collapse voor het uitklappen en de modal voor het mobiele menu.

De active state van het submenu is te activeren met de volgende class: nav__link--active. In het voorbeeld hieronder is dat te zien bij het item 'Changelog' en het subitem 'Combobox' onder 'Componenten'.


// Load nav component
System.import('/uno/components/collapse/collapse.js').then(function (module) {
    // Select all collapsible elements on the page
    var collapses = document.querySelectorAll('[x-uno-collapse]');
    // Initialize all collapses
    for (var i = 0; i < collapses.length; i++) {
        new module.Collapse(collapses.item(i));
    }
});

// Load modal component
System.import('/uno/components/modal/modal.js').then(function (module) {
    var modalMenu = new module.Modal(document.getElementById('modalMenu'));
});

// Load subnav component
System.import('/uno/components/navigation/navigation.js').then(function (module) {
    var submenus = document.querySelectorAll('.nav--submenu');
    // Initialize all submenus
    for (var i = 0; i < submenus.length; i++) {
        new module.SubMenuNavigation(submenus.item(i));
    }
});

function openModal() {
    modalMenu.open();
}
                            

Profiel bar

Indien het een inlogscherm betreft, kan er voor gekozen worden om het profiel, uitloggen bovenaan te laten verschijnen. Om zo meer menu items kwijt te kunnen.

Wanneer deze gebruikt wordt, moet deze bovenin geplaatst worden na .wrapper div