Zijmenu

Introductie

Bij lange documenten of pagina’s kan een zijmenu gebruikt worden om het navigeren voor de gebruiker toegankelijk en overzichtelijk te houden.

Snelstart

SCSS importeren:

    
    @use "@minvws/manon/components/sidemenu";

JavaScript importeren:

    
    import "@minvws/manon/js/sidemenu.js";

Voorbeelden

Hoofdnavigatie

Implementatiedetails
  1. Voeg de class `sidemenu` toe aan de `body`.
  2. Voeg direct binnen de `body` een `nav` toe met de gewenste inhoud.
  3. Groepeer de overige content in een enkel element indien dat nog niet gebeurd is. Bijvoorbeeld: `div` 'article' of 'section'. Eventueel met de class page-content.
SCSS importeren: 
    
    @use "@minvws/manon/components/sidemenu";

JavaScript importeren:

    
    import "@minvws/manon/js/sidemenu.js";

Instructiesdetails
  1. Voeg de class `sidemenu-closed` toe aan de body.
  2. Voeg direct binnen de `body` een `nav` toe met de gewenste inhoud.
  3. Groepeer de overige content in een enkel element indien dat nog niet gebeurd is. Bijvoorbeeld: `div` 'article' of 'section'. Eventueel met de class page-content.
SCSS importeren: 
    
    @use "@minvws/manon/components/sidemenu";

JavaScript importeren:

    
    import "@minvws/manon/js/sidemenu.js";

Instructiesdetails
  1. Voeg de class `sidemenu` toe aan de `body`.
  2. Voeg direct binnen de `body` een `nav` toe met de gewenste inhoud.
  3. Groepeer de overige content in een enkel element indien dat nog niet gebeurd is. Bijvoorbeeld: `div` 'article' of 'section'. Eventueel met de class page-content.
SCSS importeren: 
    
    @use "@minvws/manon/components/sidemenu";

Content navigatie

Implementatiedetails
  1. Voeg de class `sidemenu` toe aan de `main`.
  2. Voeg direct binnen de `main` een `nav` toe met de gewenste inhoud.
  3. Groepeer de overige content in een enkel element indien dat nog niet gebeurd is. Bijvoorbeeld: `div` 'article' of 'section'. Eventueel met de class page-content.
SCSS importeren: 
    
    @use "@minvws/manon/components/sidemenu";

JavaScript importeren:

    
    import "@minvws/manon/js/sidemenu.js";

Instructiesdetails
  1. Voeg de class `sidemenu-closed` toe aan de main.
  2. Voeg direct binnen de `main` een `nav` toe met de gewenste inhoud.
  3. Groepeer de overige content in een enkel element indien dat nog niet gebeurd is. Bijvoorbeeld: `div` 'article' of 'section'. Eventueel met de class page-content.
SCSS importeren: 
    
    @use "@minvws/manon/components/sidemenu";

JavaScript importeren:

    
    import "@minvws/manon/js/sidemenu.js";

Instructiesdetails
  1. Voeg de class `sidemenu` toe aan de `main`.
  2. Voeg direct binnen de `main` een `nav` toe met de gewenste inhoud.
  3. Groepeer de overige content in een enkel element indien dat nog niet gebeurd is. Bijvoorbeeld: `div` 'article' of 'section'. Eventueel met de class page-content.
SCSS importeren: 
    
    @use "@minvws/manon/components/sidemenu";

Kies de juiste HTML-Structuur

Basisvoorbeeld tabel:
TypePagina-specifiekStructuurGebruik
De inhoud van de navigatie is hoofdnavigatie.Nee, de inhoud van de navigatie wordt op andere pagina's herhaald.Plaats het zijmenu buiten de main aangezien het geen content is.page navigation
De inhoud van de navigatie gaat over de inhoud van de pagina.Ja, de inhoud van de navigatie is specifiek voor de content op deze pagina. "Table of content" bijvoorbeeld.Plaats het zijmenu binnen de main bij de content van de pagina.content navigation

Toegankelijkheid

Skip to content link binnen zijnavigatie

Bij een lange table of content kan een skip to content link toegevoegd worden. Dit geeft oetsenbordgebruikers de mogelijkheid om de inhoud van de table of contents over te slaan. Dit voegt wel een extra tabstop toe dus het is raadzaam om het enkel bij lange table of contents te gebruiken. Screenreader gebruikers maken over het algemeen gebruik van landmarks om te navigeren. Waardoor een losse skip to content link geen tot weinig toegevoegde waarde heeft.

Als er in de header een skip to content link staat. Laat deze in dat geval naar de start van de main verwijzen. Indien er een table of content aanwezig is, zal het zijmenu het eerste component binnen de main zijn.