Korte samenvatting:
Sapphire heeft verschillende menu's die je kunt inrichten voor je website. Het hoofdmenu is het belangrijkste (met 5-7 items voor de beste ervaring). Daarnaast zijn er het account menu voor ingelogde bezoekers, secundaire en meta menu's voor extra navigatie, en speciale menu's voor mobiel en footer. Elk menu heeft een eigen functie en plek op de website.
Vrijwel elke website bevat één of meerdere menu's. Hoe richt je dit in? In dit artikel lees je hoe je een website menu instelt. Binnen Sapphire zijn er meerdere menu's gedefinieerd om je website zo overzichtelijk mogelijk in te richten.
Je gebruiker helpen navigeren
Een goed georganiseerde website helpt bezoekers om snel te vinden wat ze zoeken. Menu's zijn daarbij essentieel. Ze vormen de belangrijkste navigatie op je website.
Maar één menu is vaak niet genoeg. Je wilt bijvoorbeeld onderscheid maken tussen hoofdonderwerpen en minder belangrijke pagina's zoals 'Contact'. Of je wilt dat ingelogde leden andere opties zien dan anonieme bezoekers.
Sapphire biedt daarom verschillende soorten menu's. Elk menu heeft een eigen functie en plek op de website. In dit artikel lees je welke menu's er zijn en waarvoor je ze gebruikt.
Let op: Wil je weten hoe je een menu technisch inricht (items toevoegen, volgorde wijzigen)? Lees dan dit artikel over website menu's inrichten.
Header
De header (bovenkant van je website) bevat vier verschillende menu's:
1. Hoofdmenu
Het belangrijkste menu van de website. Dit menu zie je het meest prominent terug in de header.
Beste praktijk: Beperk het hoofdmenu tot 5-7 items. Dit zorgt voor de beste gebruikerservaring. Elk item in het hoofdmenu kan een submenu hebben voor subpagina's.
2. Account menu
Het account menu is belangrijk als bezoekers kunnen inloggen op de website. Dit menu toont twee dingen:
- Voor anonieme bezoekers: de inlogpagina
- Voor ingelogde bezoekers: alle pagina's die alleen voor hen bedoeld zijn (zoals 'Mijn profiel' of 'Mijn donaties')
Meer informatie over inloggen vind je in dit artikel over inloggen op de website.
3. Secundair menu (ook wel button menu)
Het secundaire menu is flexibel in te zetten. Je kunt het op twee manieren gebruiken:
Optie 1 - Voor minder belangrijke items:
Plaats hier items die wel belangrijk zijn, maar minder prominent hoeven te zijn dan het hoofdmenu. Bijvoorbeeld 'Contact' of 'Vacatures'.
Optie 2 - Voor extra aandacht:
Geef items juist meer nadruk door ze als knop weer te geven. Bijvoorbeeld 'Word lid' of 'Doneer nu'. Lees hier hoe je een knop toont in het menu.
4. Meta menu
Het meta menu biedt toegang tot pagina's die snel toegankelijk moeten zijn, maar niet in het hoofdmenu thuishoren. Denk aan 'Over ons', 'Pers' of 'Werken bij'.
Mobiel
Op mobiele apparaten werken menu's anders. Het scherm is veel kleiner, dus alle menu-items passen niet naast elkaar.
Account menu (mobiel)
Het account menu blijft altijd zichtbaar naast het hamburger-icoon (☰). Zo kunnen bezoekers altijd snel inloggen of naar hun profiel.
Mobiel menu (hamburger-menu)
Tik je op het hamburger-icoon? Dan opent het mobiele menu. Dit menu verschijnt op kleine schermen of schermen met een lage resolutie.
Standaardinrichting
Het mobiele menu wordt meestal automatisch gevoed door het hoofdmenu (1). Zo blijft de inhoud op alle apparaten gelijk.
Het mobiele menu vormt samen met het secundaire menu (2) de volledige navigatie op mobiel. Heb je 'Extended' gekozen als Header type? Dan wordt ook het meta menu (3) getoond.
Footer
De footer (onderkant van je website) heeft twee secties met elk een eigen menu.
1. Footer menu (bovenste sectie)
Het footer menu staat in het bovenste deel van de footer. Dit kan een uitgebreid menu zijn met meerdere kolommen.
Veelvoorkomend gebruik:
Plaats hier items die belangrijk zijn, maar niet in het hoofdmenu thuishoren. Bijvoorbeeld een overzicht van al je diensten, projecten of themapagina's.
2. Footer meta menu (onderste sectie)
Het footer meta menu staat onderaan de footer. Dit is typisch een compact menu.
Veelvoorkomend gebruik:
Hier komen vaak wettelijke pagina's en organisatie-informatie. Bijvoorbeeld:
- Privacyverklaring
- Algemene voorwaarden
- Copyright
- Disclaimer
Heb je een meertalige website? Activeer dan ook het taalkeuze-menu via de ontwerpinstellingen van je website.
Submenu in zijbalk
In Sapphire kun je de submenu's van het hoofdmenu of het accountmenu ook in de zijbalk tonen. Hierdoor zijn de subpagina's sneller toegankelijk.
In het beheer van de website is het submenu een categorie onder het hoofditem met extra pagina's.
