Drawer (UI)

Definition: Ein Drawer (auch: Side Panel, Off-Canvas-Navigation, Slide-in-Panel) ist ein UI-Designmuster bei dem ein Panel von einer Bildschirmseite (links, rechts oder unten) über den Hauptinhalt gleitet ohne die aktuelle Seite zu verlassen oder neu zu laden. Drawer-Typen nach Anwendungsfall: Navigation Drawer (Hamburger-Navigation; primäre Seitennavigation auf Mobile; links eingleitend); Mini-Cart Drawer (E-Commerce; rechts eingleitend; zeigt Warenkorb-Inhalt nach «In den Warenkorb»-Klick ohne Seitenwechsel); Filter-Drawer (E-Commerce-Kategorieseiten; rechts oder links; Produktfilter auf Mobile); Settings-Drawer (Anwendungseinstellungen; rechts; Desktop-Anwendungen); Detail-Drawer (Masterdetail-Pattern; rechts; zeigt Details zu ausgewähltem Listeneintrag ohne Seitenwechsel); Drawer vs. Modal: Drawer erscheint seitlich und erlaubt Kontext-Beibehaltung; Modal erscheint zentriert und unterbricht den Flow stärker; Drawer vs. Sidebar: Sidebar ist dauerhaft sichtbar; Drawer erscheint on-demand; auf Desktop: Sidebar oft besser; auf Mobile: Drawer platzsparend. Kernaspekte: Animation (CSS transform: translateX) für natürliche Eingleit-Bewegung; Overlay/Backdrop hinter dem Drawer verdunkelt Hauptinhalt; Schliessen per Klick auf Backdrop, Escape-Taste oder explizitem Schließen-Button; Fokus-Management (Fokus-Trap innerhalb des Drawers wenn aktiv).

Erläuterung

Das Drawer-Pattern wurde im mobilen UI-Design durch Google's Material Design formalisiert: die erste Material Design-Spezifikation (2014, Google I/O; Matias Duarte, VP of Design) definierte den «Navigation Drawer» als Standardlösung für mobile App-Navigation bei Anwendungen mit mehr als fünf primären Navigationspunkten; die Spezifikation legte fest dass der Drawer 256dp breit sein soll, von links einschiebt und den Hauptinhalt unter einem halb-transparenten Overlay (schwarz, 50% Opazität) zurücklässt. Luke Wroblewski («Mobile First», A Book Apart, 2011) hatte zuvor das konzeptionelle Problem formuliert: mobile Navigation braucht Platzspar-Lösungen; das Off-Canvas-Pattern (Drawer als Terminus etablierte sich später) erlaubt vollständige Navigationsbäume ohne Bildschirmfläche im Default-State zu verbrauchen. Die Hamburger-Icon-Adoption für Navigation-Drawer-Trigger ist umstritten: Norm Cox entwarf das Hamburger-Icon 1981 für das Xerox Star-System; Apple-Designer im iOS 7 Team (2013) popularisierten es für mobile Navigation massiv; NNGroup-Forschung (Kara Pernice, 2016; Studie mit Eye-Tracking) zeigte dass Hamburger-Icons auf Desktop die Navigation-Discoverability um bis zu 48% verschlechtern gegenüber sichtbarer horizontaler Navigation; auf Mobile ist die Discoverability ähnlich problematisch (Forrest Blouin, NNGroup, 2014). Der Mini-Cart-Drawer ist im E-Commerce eine etablierte CRO-Optimierung: Baymard Institute (2022) zeigte in einer Studie zu Checkout-Flows dass Mini-Cart-Drawer (Warenkorb als Side-Panel nach «In den Warenkorb») gegenüber direktem Warenkorb-Page-Redirect die Checkout-Initierungsrate senkt aber die Gesamt-Order-Completion-Rate erhöht weil Nutzer weiter browsen und mehr Produkte hinzufügen; dieser Effekt hängt stark vom Produkttyp ab (Mode und Multi-Product-Shopping: Drawer vorteilhaft; Single-Item-Käufe: direkter Checkout-Redirect besser). Das ARIA-Authoring-Practices-Guide (W3C WAI) definiert den Dialog-Pattern (role="dialog" mit aria-modal="true") als korrekte ARIA-Implementierung für Drawer die den Hintergrund blockieren – mit Fokus-Trap (Tab und Shift+Tab bleiben innerhalb des Drawers), Escape-Schließen und Fokus-Return auf auslösendes Element beim Schließen.

CSS-Implementierung und Animation

• CSS-Grundimplementierung eines Drawers: Basis-CSS: .drawer { position: fixed; top: 0; left: 0; width: 320px; height: 100vh; background: #fff; transform: translateX(-100%); transition: transform 300ms ease-in-out; z-index: 1000; }; .drawer.open { transform: translateX(0); }; Backdrop: .backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.5); opacity: 0; transition: opacity 300ms; z-index: 999; pointer-events: none; }; .backdrop.visible { opacity: 1; pointer-events: auto; }; Rechts-Drawer: transform: translateX(100%) statt -100%; left: auto; right: 0; Unten-Drawer (Bottom Sheet): position: fixed; bottom: 0; width: 100%; height: auto; max-height: 90vh; transform: translateY(100%); Öffnen/Schließen via JavaScript: document.querySelector('.drawer').classList.toggle('open'); overflow: hidden auf body wenn Drawer offen (verhindert Hintergrund-Scrollen); Scroll innerhalb des Drawers: overflow-y: auto auf Drawer-Container; prefers-reduced-motion: @media (prefers-reduced-motion: reduce) { .drawer { transition: none; } }
• Responsives Drawer-Verhalten: Mobile-First-Ansatz: Drawer auf Mobile (max-width: 768px); Sidebar auf Desktop (min-width: 769px); CSS-Breakpoint-Pattern: @media (min-width: 769px) { .drawer { position: static; transform: none; width: 260px; } .backdrop { display: none; } }; Navigation Drawer auf Mobile / Persistent Sidebar auf Desktop; Drawer-Breite: Material Design Standard: 256dp (≈256px); iOS: 85% der Bildschirmbreite maximal; empfohlen für Inhalts-Drawer: 320–400px; für einfache Navigation: 260–300px; kein Full-Width-Drawer auf Tablet/Desktop (immer sichtbarer Hauptinhalt-Streifen); Touch-Gesten: Hammer.js oder native Touch-Events für Swipe-to-Close; touchstart/touchmove/touchend Events; Swipe-Threshold: wenn Nutzer > 50% des Drawer-Breite zurückwischt = schließen; Momentum-Animation nach Loslassen; auf iOS: -webkit-overflow-scrolling: touch für flüssiges Scrolling innerhalb des Drawers
• Bootstrap Offcanvas und Framework-Implementierungen: Bootstrap 5 Offcanvas-Komponente: <div class="offcanvas offcanvas-start" id="myDrawer" tabindex="-1" aria-labelledby="drawerTitle"> <div class="offcanvas-header"> <h5 class="offcanvas-title" id="drawerTitle">Navigation</h5> <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Schließen"></button> </div> <div class="offcanvas-body">...</div> </div>; Trigger: <button data-bs-toggle="offcanvas" data-bs-target="#myDrawer">; offcanvas-start (links), offcanvas-end (rechts), offcanvas-bottom; offcanvas-backdrop true/false/static; Material Web Components: <md-navigation-drawer>; vollständige Material Design Spezifikation; Headless UI Drawer (Tailwind Labs): Dialog-Component als Basis; manuelles Styling; Radix UI Dialog: als Drawer verwendbar mit CSS-Animation; vollständige Accessibility built-in

Accessibility, Fokus-Management und E-Commerce-Anwendung

• ARIA und Fokus-Management für Drawer: ARIA-Markup: <div role="dialog" aria-modal="true" aria-labelledby="drawer-title" id="drawer"> <h2 id="drawer-title">Navigationmenü</h2> ...</div>; aria-modal="true" signalisiert Screen-Readern dass der Hintergrund blockiert ist; Fokus-Management: beim Öffnen: Fokus auf erstes fokusierbares Element im Drawer (oder Drawer selbst wenn tabindex="-1" gesetzt); beim Schließen: Fokus zurück auf den auslösenden Button; Fokus-Trap-Implementierung: alle fokusierbaren Elemente im Drawer in Array erfassen; Tab-Presse auf letztem Element → zurück zum ersten; Shift+Tab auf erstem Element → zum letzten; Bibliotheken: focus-trap (npm; wicg); tabbable (npm); Keyboard-Schließen: Escape-Taste schließt Drawer; Klick auf Backdrop schließt Drawer; expliziter Schließen-Button (immer vorhanden; aria-label="[Drawer-Titel] schließen"); screen-reader Ankündigung: Drawer-Öffnung: Fokus-Verschiebung + aria-label; Backdrop aria-hidden="true"; Hintergrund aria-hidden="true" wenn Drawer aktiv (verhindert Screen-Reader-Navigation in Hintergrund)
• Mini-Cart Drawer im E-Commerce: Anwendungsfall: Nutzer klickt «In den Warenkorb»; Drawer gleitet von rechts ein; zeigt Warenkorb-Inhalt ohne Seitenwechsel; CRO-Vorteile: kein Unterbrechung des Browse-Flows; Nutzer kann weiter einkaufen; erhöhter durchschnittlicher Warenkorbwert (AOV) wegen höherer Multi-Product-Rate; Implementierungsanforderungen: Produktname, Bild, Größe/Farbe, Menge (editierbar), Einzelpreis; Gesamtpreis inkl. Hinweis auf Versandkostengrenze («Noch 15 € bis kostenloser Versand»); Checkout-CTA-Button prominent; Link zu vollständiger Warenkorb-Seite; Warenkorb-Count-Badge im Header aktualisiert live (aria-live="polite" für Screen-Reader-Ankündigung); Mini-Cart vs. Direct Checkout: A/B-Test-Empfehlung; abhängig von Mode-Typ: Multi-Item-Mode → Mini-Cart; Single-Item-Focus → Direct Checkout; Schließen des Mini-Cart: automatisch nach 3–5 Sekunden (Opt-in-Verhalten) oder manuell; kein automatisches Schließen wenn Nutzer mit Drawer interagiert
• Filter-Drawer auf Kategorie- und Suchergebnisseiten: Mobile-Filter-Pattern: Filter-Icon/Button in der Toolbar öffnet Filter-Drawer von links oder rechts; alle Filteroptionen im Drawer (Preis, Größe, Farbe, Marke, Bewertung); Checkbox-Gruppen mit Fieldset/Legend; Live-Aktualisierung der Trefferzahl wenn Filterauswahl ändert (kein Page-Reload); «Filter anwenden»-Button schließt Drawer und lädt Ergebnisse; «Zurücksetzen»-Link für alle Filter; aktive Filter-Chips oberhalb der Ergebnisliste; Filter-Anzahl-Badge auf Filter-Button («Filter (3)» zeigt 3 aktive Filter); Desktop-Alternative: Inline-Sidebar (dauerhaft sichtbar; kein Drawer nötig); Accordion-Collapse für Filter-Gruppen; UX-Forschung: Baymard Institute (2023 «Filters in E-Commerce»): 81% der E-Commerce-Sites haben mangelhaftes Filter-UX; Mobile-Filter-Drawer ist eine der effektivsten Verbesserungen für Mobile-CVR