Das Hamburger-Menü ist eine Schaltfläche mit drei waagerechten Strichen, hinter der auf kleinen Bildschirmen die Navigation liegt. Ein Antippen öffnet das Menü, meist als Off-Canvas-Navigation von der Seite. Das Symbol selbst ist der Auslöser, das Menü dahinter ist ein eigenes Element.
- Hamburger-Menü
Schaltfläche mit drei waagerechten Strichen, hinter der die Navigation auf kleinen Bildschirmen liegt.
Beispiel: „Auf dem Telefon liegt die Navigation hinter dem Hamburger-Menü.“Auch: Burger-Menü. Der Name kommt vom Aussehen: Zwei Striche wie Brötchenhälften, einer wie die Frikadelle dazwischen.
Abgrenzung zur Off-Canvas-Navigation: Das Hamburger-Menü ist der Knopf, die Off-Canvas-Navigation ist das Menü, das er öffnet. Dasselbe Symbol kann auch ein Dropdown oder eine Vollbild-Ebene auslösen.
Warum sich das Symbol durchgesetzt hat
Es löst ein Platzproblem. Auf einer Kopfzeile von 375 Pixeln Breite haben Logo und sechs Menüpunkte nebeneinander keinen Platz. Drei Striche belegen 24 Pixel und sind heute so verbreitet, dass die Bedeutung kaum noch erklärt werden muss.
Umstritten war genau das lange Zeit. Untersuchungen der Nielsen Norman Group zu Hamburger-Menüs zeigten, dass Navigation hinter einem Symbol seltener benutzt wird als sichtbare Menüpunkte. Auf dem Telefon gibt es dazu trotzdem selten eine Alternative.
Was hinter dem Symbol liegt, wird seltener benutzt
Diese Erkenntnis lässt sich entschärfen. Der wichtigste Weg der Seite bekommt einen eigenen Platz in der Kopfzeile, direkt neben dem Burger-Knopf: die Telefonnummer, der Warenkorb oder die Anfrage.
Auf dem Desktop bleibt die Navigation dagegen offen. Ein Hamburger-Menü auf einem breiten Bildschirm verbirgt Inhalte ohne Not; der Platz dafür ist vorhanden.
Das Markup
Der Auslöser gehört in ein button-Element. Das Attribut aria-expanded trägt den Zustand und wird beim Umschalten mitgeschrieben, aria-controls verweist auf das Menü. Ein aria-label gibt dem Knopf einen Namen, weil die drei Striche allein nicht vorlesbar sind.
<button class="burger" aria-expanded="false"
aria-controls="hauptmenue" aria-label="Menü öffnen">
<span aria-hidden="true"></span>
</button>
<nav id="hauptmenue" hidden>…</nav>