Hamburger vs. Kebab
Ein Drei-Zeilen-Button öffnet die Navigation. Ein Drei-Punkte-Button öffnet weitere Aktionen für ein Element in der Nähe.
Verwenden Sie drei Linien für versteckte Navigation, hauptsächlich auf kleinen Bildschirmen. Verwenden Sie drei Punkte, wenn zusätzliche Elementaktionen nicht passen, und benennen Sie die Schaltfläche „Weitere Aktionen“.
Sieh, was jedes Muster macht
Probieren Sie jedes Beispiel. Lesen Sie dann über den Job, für den es gemacht ist.
Hamburger-Menü
Ein Menü-Button mit drei Linien. Er öffnet die Haupt-Navigation der Seite, wenn nicht genug Platz ist, um sie zu zeigen.
Auf einer schmalen Shop-Seite öffnet die beschriftete Menü-Schaltfläche Kategorien, Konto und Hilfe. Die Schublade hält den Fokus innerhalb.
- Verwenden Sie es, wenn
- Verwenden Sie es auf kleinen Bildschirmen, nachdem die wichtigsten Ziele sichtbar geblieben sind.
- Nutze es nicht, wenn
- Verstecke auf breiten Bildschirmen nicht die gesamte Navigation. Das Icon braucht auch einen barrierefreien Namen und einen ausgeklappten Zustand.
- In Code verwendeter Name
button aria-controls aria-expanded + nav
Überlauf-Menüknopf
Ein kleiner Button, oft als drei Punkte gezeigt, öffnet weniger wichtige Aktionen. Nutze ihn, wenn diese Aktionen nicht auf die Seite passen.
Jede Projektreihe zeigt Öffnen. Duplizieren, Archivieren und Löschen bleiben in ihrem Overflow-Menü.
- Verwenden Sie es, wenn
- Verwenden Sie es, wenn ein Element mehrere sekundäre Aktionen hat und die Anzeige jedes Buttons die Seite überladen würde.
- Nutze es nicht, wenn
- Verstecke die Hauptaktion oder ein zerstörerisches Ergebnis nicht hinter einem unlabeled Icon. Halte den einzigen Weg zu einer wichtigen Aufgabe sichtbar.
- In Code verwendeter Name
button[aria-haspopup=menu] + role=menu
Schneller Vergleich
| UI-Muster | Am besten für | Nicht für | In Code verwendeter Name |
|---|---|---|---|
| Hamburger-MenüHamburger Menu | Verwenden Sie es auf kleinen Bildschirmen, nachdem die wichtigsten Ziele sichtbar geblieben sind. | Verstecke auf breiten Bildschirmen nicht die gesamte Navigation. Das Icon braucht auch einen barrierefreien Namen und einen ausgeklappten Zustand. | button aria-controls aria-expanded + nav |
| Überlauf-MenüknopfOverflow Menu Button | Verwenden Sie es, wenn ein Element mehrere sekundäre Aktionen hat und die Anzeige jedes Buttons die Seite überladen würde. | Verstecke die Hauptaktion oder ein zerstörerisches Ergebnis nicht hinter einem unlabeled Icon. Halte den einzigen Weg zu einer wichtigen Aufgabe sichtbar. | button[aria-haspopup=menu] + role=menu |
Vor dem Ausliefern
- 01
Schreibe auf, was die Person tun muss.
- 02
Testen Sie Tastatur, Fokus, Berührung, Zoom, Laden, leere und Fehlerzustände.
- 03
Sicherstellen, dass Leute dieselben Informationen ohne Hover oder Bewegung erhalten können.
- 04
Testen Sie mit echtem Inhalt auf kleinen und großen Bildschirmen.
Vergleichsanfrage zum Kopieren
Kopiere das, wenn dein Team Hilfe bei der Wahl zwischen den Mustern braucht.
Wähle das beste Muster aus Hamburger-Menü (Hamburger Menu), Überlauf-Menüknopf (Overflow Menu Button) für unseren echten Nutzerfluss. Nutze diese Regel: Ein Drei-Zeilen-Button öffnet die Navigation. Ein Drei-Punkte-Button öffnet weitere Aktionen für ein Element in der Nähe. Schreibe die Aufgabe, die Inhaltsmenge und die Kosten eines Abbruchs auf. Prüfe Tastatur, Touch, Laden, Fehler und das Verhalten bei reduzierter Bewegung. Erkläre deine Wahl und baue dann die kleinste zugängliche Version mit dem Design-System des Projekts.