Een sidebar is een verticaal paneel dat langs de zijkant van een scherm loopt en navigatie, filters of extra content naast de hoofdpagina bevat. Het geeft je een vaste plek voor knoppen die bereikbaar moeten blijven terwijl het middengebied het echte werk doet.
Stel je de duimindex voor in de zijkant van een dik naslagwerk. Je houdt er één duim op om tussen secties te springen zonder je plek in het hoofdstuk te verliezen. Een sidebar speelt die rol op het scherm: een dashboard houdt zijn hoofdmenu vaak in een sidebar links, zodat elke sectie één klik weg is, terwijl de pagina zelf in het midden ververst. Daarmee is het een kernonderdeel van de menustructuur in apps en beheerpanelen, waar te veel bestemmingen zijn voor een simpele bovenbalk.
Het addertje is ruimte. Op een telefoon zou een vaste sidebar het halve scherm opslokken, dus klapt hij meestal in achter een knop en schuift hij uit bij een tik. Dat netjes oplossen hoort bij goed responsive design.
Niet elke site heeft er een nodig. Een marketinghomepage of een blogpost leest prettiger met een simpele bovenbalk, omdat de bezoeker één pad naar beneden volgt en een zijpaneel alleen om aandacht zou strijden. Sidebars verdienen hun plek als er veel bestemmingen zijn waar een gebruiker tussen springt, en daarom leunen Gmail, Slack en de meeste beheerpanelen erop. Sommige laten je de sidebar inklappen tot alleen iconen, zodat de navigatie bereikbaar blijft terwijl de breedte teruggaat naar de content.
Er is ook een toegankelijkheidskant. Een sidebar moet met het toetsenbord te bereiken zijn en zijn status doorgeven aan een schermlezer, zodat mensen die geen muis gebruiken hem toch kunnen openen, sluiten en doorlopen. Dat overslaan sluit stilletjes een deel van je publiek uit, en daarom hangt het samen met toegankelijke navigatie.
Bij TopDevs gebruiken we sidebars waar ze hun ruimte verdienen, in dashboards en tools met veel secties, en klappen we ze op mobiel netjes in, zodat de hoofdcontent altijd voorop staat.
