Eine Off-Canvas-Navigation ist ein Menü, das außerhalb des sichtbaren Bereichs liegt und auf Knopfdruck von der Seite über den Inhalt geschoben wird. Ausgelöst wird es fast immer über den Burger-Button in der Kopfzeile. Der Name stammt von der Vorstellung einer Leinwand: Das Menü liegt neben dem Bildschirmausschnitt und wandert bei Bedarf darauf. Auf Telefonen ist es der Standard für Websites mit mehr als einer Handvoll Menüpunkten.
- Off-Canvas-Navigation
Navigation, die außerhalb des sichtbaren Bereichs liegt und auf Knopfdruck von der Seite über den Inhalt geschoben wird.
Beispiel: „Hinter dem Burger-Button liegt eine Off-Canvas-Navigation, die von rechts hereinfährt und den Inhalt abdunkelt.“Auch: Slide-in-Menü, Drawer oder verkürzt Burger-Menü. Der Burger meint streng genommen nur den Auslöser mit den drei waagerechten Strichen.
Abgrenzung zu Sticky Nav und Mega Menü: Die Sticky Nav bleibt beim Scrollen dauerhaft sichtbar, das Mega Menü klappt großflächig nach unten auf. Die Off-Canvas-Navigation ist im Ruhezustand gar nicht vorhanden und kommt von der Seite herein.
Auf dem Telefon fehlt der Platz für eine offene Menüleiste
Eine Kopfzeile auf einem Telefon bietet Raum für ein Logo und ein oder zwei weitere Elemente. Sechs Menüpunkte nebeneinander passen dort nicht, und eine umbrechende Leiste würde einen erheblichen Teil des ersten Bildschirms belegen.
Off-Canvas verlagert das Problem in eine zweite Ebene. Der Platzbedarf der Navigation fällt auf einen Button zusammen, und die vollständige Struktur bleibt einen Fingertipp entfernt. Auf großen Bildschirmen wird dieselbe Struktur meist wieder als offene Leiste ausgegeben, gesteuert über einen Breakpoint.
Der Preis des Burger-Buttons
Was hinter einem Symbol liegt, wird seltener benutzt als das, was offen dasteht. Betroffen sind vor allem die Wege, von denen der Besucher gar nicht weiß, dass es sie gibt. In unseren Projekten hat es sich bewährt, den wichtigsten Weg neben dem Burger stehen zu lassen, etwa den Kontakt oder den Warenkorb, und nur den Rest einzuklappen.
Der Auslöser selbst verdient ebenfalls Aufmerksamkeit. Ein Burger mit dem Wort „Menü“ daneben wird schneller als Bedienelement erkannt als drei Striche allein, und die Tippfläche sollte groß genug für einen Daumen sein.
Ein offenes Off-Canvas-Menü verhält sich wie ein Dialog
Solange das Menü offen ist, deckt es die Seite ab und sollte deshalb wie ein modaler Dialog gebaut sein. Der Tastaturfokus gehört in das Menü hinein und bleibt dort, die Escape-Taste schließt es, und der Inhalt dahinter wird für Screenreader ausgeblendet. Das ARIA Authoring Practices Guide beschreibt dieses Muster mit allen Tastaturanforderungen.
Zwei Punkte fallen im Alltag zusätzlich auf. Der Hintergrund darf nicht mitscrollen, während das Menü offen ist, sonst verliert der Besucher beim Schließen seine Leseposition. Und wenn sich das Menü per Wischgeste öffnen lässt, bleibt der Button trotzdem Pflicht, weil eine Geste ohne sichtbaren Hinweis nur zufällig gefunden wird.