Themakleuren

De navigatie moet een modifier class hebben met de gewenste themakleur. Gebruik één van de volgende kleuren:
nav--violet nav--roze nav--rood nav--robijnrood nav--paars nav--oranje nav--mosgroen nav--mintgroen nav--lichtblauw nav--hemelblauw nav--donkerblauw nav--groen nav--geel nav--donkergroen nav--donkergeel nav--donkerbruin nav--bruin

Navigatiebalk met breadcrumbs menu en knoppen

Navigatie met breadcrumbs en een menu. Op mobiel is bij de breadcrumbs alleen het laatste niveau en de home-icon zichtbaar. De andere niveaus zijn voor blinde mensen wel zichtbaar. Het hamburgermenu is een collapsable, dus je moet wel de collapse javascript toevoegen (zie de pagina van de collapse).

Zorg dat alle knoppen die iets open- en dichtklappen een x-uno-collapse-group="..." hebben met op de puntjes dezelfde unieke naam. Dat zorgt er voor dat het openklappen van het ene menu automatisch het openstaande menu dichtklapt.

Zet knoppen in een div met class top-nav__block--right zodat die rechts uitgelijnd worden.

Simpele navigatiebalk

Een simpele navigatiebalk variant

Navigatiebalk met subnavigatie

Simpele navigatiebalk met submenu

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

De submenu functionaliteit maakt gebruik van javascript voor het uitklappen.

// Load nav 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));
            }
        });
        

Javascript

Simpele navigatiebalk met auto-resize

Een simpele navigatiebalk variant, waarbij automatisch een -meer- knop komt als niet alle navigatie elementen in de breedte passen.
De autoresize wordt automatisch tot één item teruggebracht op mobiele schermen.

De auto-resize functionaliteit maakt gebruik van javascript voor het dynamisch bepalen van de breedte en het samenstellen van het -meer- menu. Daarvoor is het nodig de collapse class in te laden.

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

Zijnavigatie

Een navigatiebalk links van de content. Subnavigatie is alleen bedoeld voor in-page navigatie.

In site navigatie

Navigatie binnen een sectie van de site. Het bestaat uit een list-links met een overzicht van de pagina's bovenin.
En onderaan de pagina staat een link naar de vorige en de volgende stap (indien van toepassing).

Benodigde stylesheets

• uno/components/navigation/backlink.css
• uno/components/navigation/breadcrumbs.css
• uno/components/navigation/navigation.css
• uno/components/navigation/inpage.css
• uno/components/navigation/sidenav.css