Navigation

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 en menu

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.

Navigatiebalk met breadcrumbs en knoppen

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).

Opleidingen

Aangeboden opleidingen

Stichting ROC West-Brabant

  1. Wat moet je doen
  2. Voorwaarden
  3. Hoe het werkt
  4. Hoe zit het met studiefinanciering
  5. Ouders

Wat moet je doen

We hebben we een stappenplan voor je samengesteld. Volg deze stappen en je kunt in januari gratis of met korting reizen met je eigen studentenreisproduct.

Cross-media value

Efficiently unleash cross-media information without cross-media value. Quickly maximize timely deliverables for real-time schemas. Dramatically maintain clicks-and-mortar solutions without functional solutions.

Completely synergize resource taxing relationships via premier niche markets. Professionally cultivate one-to-one customer service with robust ideas. Dynamically innovate resource-leveling customer service for state of the art customer service.

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