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
Bij volgende versie depricated
Deze vorm van navigatie is bij een volgende major release (UNO 6) depricatedSimpele navigatiebalk met submenu
Deze variant is op een aparte pagina te bekijken, om de volledige functionaliteit te laten zien inclusief de mobiele variant.
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).
Aangeboden opleidingen
Stichting ROC West-Brabant
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