Offcanvasnavigering

Offcanvasnavigering is een patroon voor gebruikersinterfaces waarbij een navigatiemenu uit het hoofdgebied van de pagina verschijnt langs de rand van het scherm of er buiten wordt geplaatst. Het doel is ruimte te besparen op kleinere schermen terwijl snelle toegang tot navigatie nog steeds mogelijk blijft. Het patroon wordt vooral toegepast op mobiele interfaces, maar kan ook in responsieve ontwerpen voorkomen op grotere schermen.

Bij de implementatie wordt vaak een knop gebruikt om het offcanvas-paneel te openen, zoals een menuknop of een hamburgerknop. Bij activatie schuift het navigatiepaneel vanuit de rand het scherm in en verschijnt meestal een dimmer die de hoofdinhoud tijdelijk uit beeld haalt. Het paneel sluit doorgaans wanneer de gebruiker op een sluitknop, buiten het paneel aangestelde klikzone, of een swipe-beweging reageert.

Typische kenmerken zijn een slide-in panel, een overlay of achtergronddimming, focus trapping voor toegankelijkheid en toetsenbordnavigatie die binnen het paneel blijft. Vaak worden ARIA-attribuutten toegepast (bijvoorbeeld aria-hidden en aria-expanded) om de toegankelijkheid te verbeteren en wordt er rekening gehouden met swipe- of drag-bewegingen op touchdevices.

Technisch gezien worden offcanvasnavigering vaak gerealiseerd met position: fixed of absolute positioning, transities en transformproperties voor soepele beweging, en z-index om het paneel boven de hoofdinhoud te plaatsen. Performantie en toegankelijkheid staan centraal: minimale reflow, duidelijke focuslogica en consistente sluitingsmethoden.

Voordelen van dit patroon zijn ruimtebesparing en behoud van context, terwijl nadelen kunnen zijn dat het minder intuïtief is bij onbekende gebruikers en extra interactie vereist voor openen en sluiten. Variaties omvatten beide zijden openende panels en persistent versus tijdelijk uitschakelende navigaties.