Eine Sidebar ist eine schmale Spalte neben dem Hauptinhalt, die ergänzende Inhalte oder Navigation trägt. Sie steht links oder rechts der Textspalte und läuft über deren ganze Höhe oder über einen Teil davon.
- Sidebar
Schmale Spalte neben dem Hauptinhalt, die ergänzende Inhalte oder Navigation trägt.
Beispiel: „In der Sidebar der Journal-Beiträge stehen das Inhaltsverzeichnis und drei verwandte Beiträge.“Auch: Seitenleiste. Steht dort ausschließlich eine Navigation, heißt sie oft Sekundär-Navigation oder Subnavigation.
Abgrenzung zur Sektion: Die Sektion liegt im Fluss des Inhalts untereinander. Die Sidebar liegt daneben und bleibt dabei vom Hauptinhalt getrennt.
Was in die Sidebar gehört
Alles, was den Lesefluss unterbrechen würde und trotzdem griffbereit sein soll: ein Inhaltsverzeichnis für lange Texte, die Navigation innerhalb eines Bereichs, Verweise auf verwandte Beiträge, ein Kontaktkasten. Drei bis vier Bausteine sind das Maximum.
Was dagegen zum Verständnis gebraucht wird, gehört in die Hauptspalte. Auf dem Smartphone rutscht die Sidebar unter den Inhalt, und alles darin wird erst nach dem ganzen Text gelesen oder gar nicht.
Was auf schmalen Bildschirmen passiert
Die zweispaltige Aufteilung löst sich unterhalb von rund 900 Pixeln auf. Damit entscheidet die Reihenfolge im Markup darüber, was wo landet: Steht die Sidebar im Quelltext vor dem Inhalt, steht sie auf dem Smartphone darüber.
Deshalb gehört sie im Markup hinter den Hauptinhalt und wird per CSS daneben gestellt. Das ist zugleich die Reihenfolge, in der Vorlesewerkzeuge und Suchmaschinen die Seite abarbeiten.
.inhalt {
display: grid;
grid-template-columns: 1fr;
}
@media (min-width: 900px) {
.inhalt { grid-template-columns: minmax(0, 2fr) minmax(220px, 1fr); }
}Wann sie entbehrlich ist
Bei Leistungs- und Verkaufsseiten, die auf eine Handlung zulaufen. Jeder Baustein daneben ist dort ein Abzweig. Auch bei kurzen Texten lohnt sie nicht, weil die Spalte dann höher ist als der Inhalt und das Layout aus dem Gleichgewicht bringt.
Aus unserer Arbeit an über 2.500 Website-Projekten hat sich die Sidebar vor allem im redaktionellen Bereich gehalten: im Journal, im Glossar und in Dokumentationen. Dort trägt sie die Orientierung innerhalb eines langen Bestands.