Hamburger Menu
Hamburger-Menü
Ein Menü-Button mit drei Linien. Er öffnet die Haupt-Navigation der Seite, wenn nicht genug Platz ist, um sie zu zeigen.
Ein echtes Beispiel
Auf einer schmalen Shop-Seite öffnet die beschriftete Menü-Schaltfläche Kategorien, Konto und Hilfe. Die Schublade hält den Fokus innerhalb.
Hauptteile
- 01Current location
- 02Destination labels
- 03Focus order
- 04Responsive behavior
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 Vor dem Ausliefern
Before release, check the page structure, keyboard access, visible focus, contrast, and zoom. Also check loading, empty, error, success, cancel, and reduced-motion states.
Outcome: Complete the task with Hamburger-Menü (Hamburger Menu). User context: Auf einer schmalen Shop-Seite öffnet die beschriftete Menü-Schaltfläche Kategorien, Konto und Hilfe. Die Schublade hält den Fokus innerhalb. Recommended pattern: Hamburger-Menü (Hamburger Menu). Why it fits: Verwenden Sie es auf kleinen Bildschirmen, nachdem die wichtigsten Ziele sichtbar geblieben sind. Do not use it when: Verstecke auf breiten Bildschirmen nicht die gesamte Navigation. Das Icon braucht auch einen barrierefreien Namen und einen ausgeklappten Zustand. Product requirements: Define the default, loading, empty, error, success, and recovery states. Keep user input. Give clear feedback after every action. Accessibility and resilience: Use semantic HTML, full keyboard access, and visible focus. Make the layout work when zoomed and support reduced motion. Follow the project’s current rules. Do not add a new UI library unless the project already uses it. Acceptance criteria: The main task works with keyboard only and at 320px width. Focus and status changes are announced. Check loading, failure, retry, cancel, and reduced-motion paths. Evidence and limits (evidence boundary): Dies ist kein normativer Standard. Sein Name, seine Grenzen und erwartetes Verhalten können von einer Quelle zur anderen variieren. Unknowns to confirm: Product wording, data source, analytics events, supported devices and languages, and platform limits.
Diese Anfrage prüfen
Review how Hamburger-Menü (Hamburger Menu) is used now. Definition: Ein Menü-Button mit drei Linien. Er öffnet die Haupt-Navigation der Seite, wenn nicht genug Platz ist, um sie zu zeigen. Release checks: Before release, check the page structure, keyboard access, visible focus, contrast, and zoom. Also check loading, empty, error, success, cancel, and reduced-motion states. Before changing code, list the evidence, gaps, severity, and the smallest safe fix.