Dropdown & Select – Auswahlmenüs im UI-Design

Ein Dropdown (Auswahlmenü) ist eine UI-Komponente, die beim Klick eine Liste vordefinierter Optionen einblendet und dem Nutzer die Auswahl einer oder mehrerer Einträge ermöglicht.

Rubrik: Mediendesign & Digitale Medien · Unterrubrik: UI-Komponenten · Niveau: Einsteiger Synonyme / Auch bekannt als: Select, Auswahlmenü, Auswahlliste, Combobox, Picker, Pull-down-Menü

Was ist ein Dropdown?

Das Dropdown ist eine der platzsparendsten Auswahlkomponenten im UI-Design: Es zeigt standardmäßig nur die aktuell gewählte Option (oder einen Platzhalter-Text), klappt bei Interaktion aus und zeigt alle verfügbaren Optionen. Dropdowns eignen sich besonders für Listen mit 5 oder mehr Elementen, bei denen Radio Buttons zu viel Platz einnehmen würden.

Erklärung

Varianten

• Single Select Dropdown: Standardform – genau eine Option wählbar, Auswahl ersetzt den Platzhaltertext im geschlossenen Zustand
• Multi Select Dropdown: Mehrere Optionen gleichzeitig wählbar, oft mit Häkchen-Icons und Tag/Chip-Anzeige im Feld
• Combobox / Searchable Dropdown: Kombiniert Texteingabe mit Dropdown-Liste – Nutzer kann tippen, um Optionen zu filtern (z. B. Länderauswahl, Stadtsuche)
• Grouped Dropdown: Optionen sind in Kategorien gruppiert (z. B. „Europa" → „Deutschland, Österreich, Schweiz")
• Action Menu Dropdown: Kein Auswahlfeld, sondern ein Button, der eine Liste von Aktionen öffnet (drei Punkte „..." oder „Mehr"-Button)

States (Zustände)

Anatomie

Ein Dropdown besteht aus: Trigger Element (geschlossener Zustand: Label, Wert, Chevron-Icon ▼), Option List Panel (Container, der beim Öffnen erscheint), Option Items (einzelne Einträge, mit Hover-State), Optional: Divider, Section Headers, Icons in der Liste, Search Input bei Combobox.

Accessibility (WCAG 2.1)

• Native <select> für einfache Dropdowns verwenden – maximale Kompatibilität mit Screenreadern
• Custom Dropdowns: role="combobox" + aria-expanded, aria-haspopup, aria-activedescendant
• Optionen: role="option", aria-selected="true/false"
• Tastaturbedienung: Tab → Fokus, Space/Enter → Öffnen, ↑↓ → Navigieren, Enter → Auswählen, Escape → Schließen
• Listbox schließt bei Klick außerhalb und Escape – Fokus kehrt zum Trigger zurück
• Kontrast: Text in Optionen mindestens 4,5:1 gegenüber Hintergrund

Beispiele

1. GitHub – Repository-Einstellungen: Dropdown für Standardbranch-Auswahl – Combobox mit Suchfunktion, da Repositories viele Branches haben können. Hervorragende Tastaturunterstützung mit korrektem ARIA-Markup.
2. Airbnb – Reiseziel-Suche: Die Ländervorwahl bei Telefonnummer ist ein klassisches Searchable Dropdown – 200+ Länder, filterbar durch Tippen, Flaggen-Icons als visuelle Unterstützung.
3. Mobile vs. Desktop: Auf iOS und Android öffnet <select> den nativen Picker (iOS: Bottom Sheet mit Scrollrad, Android: Alert Dialog mit Radiobuttons). Diese native Erfahrung sollte auf Mobile bevorzugt werden – Custom Dropdowns sind schwieriger zu bedienen.
4. Accessibility Best Practice: GOV.UK nutzt konsequent natives <select> für ihre Formulare – maximale Screenreader-Kompatibilität, keine ARIA-Implementierungsrisiken, automatische Mobile-Optimierung.
5. Häufiger Fehler: Dropdown für weniger als 5 Optionen verwenden, obwohl Radio Buttons besser wären. Bei 2–4 Optionen empfiehlt die NNG Radio Buttons, da alle Optionen sofort sichtbar sind und keine Interaktion zum Erkunden der Liste nötig ist.

In der Praxis

Figma: Dropdown als Komponente mit States und Overlay-Technologie für das aufgeklappte Menü. Das Panel als eigene Komponente anlegen, die per Variant ein-/ausgeblendet wird. Für Prototypen: „Open Overlay" auf Trigger-Klick und „Close Overlay" bei Option-Klick und Escape.

HTML/CSS-Grundstruktur: ```html <!-- Natives Select (empfohlen für einfache Fälle) --> <label for="country">Land</label> <select id="country" name="country"> <option value="" disabled selected>Land auswählen</option> <optgroup label="Europa"> <option value="de">Deutschland</option> <option value="at">Österreich</option> <option value="ch">Schweiz</option> </optgroup> </select>

<!-- Custom Dropdown mit ARIA --> <div role="combobox" aria-expanded="false" aria-haspopup="listbox" aria-labelledby="dropdown-label"> <span id="dropdown-label">Kategorie</span> <button aria-expanded="false">Design <span>▼</span></button> <ul role="listbox"> <li role="option" aria-selected="false">UX Design</li> <li role="option" aria-selected="true">UI Design</li> </ul> </div> ```

Vergleich & Abgrenzung

Häufige Fragen (FAQ)

Wann sollte ich ein natives `<select>` statt einem Custom Dropdown verwenden? Native <select>-Elemente sind für einfache Single-Select-Fälle fast immer vorzuziehen: Sie sind automatisch barrierefrei, funktionieren auf allen Geräten und Betriebssystemen nativ, benötigen kein JavaScript und haben keine ARIA-Implementierungsrisiken. Custom Dropdowns sind sinnvoll, wenn Icons in den Optionen benötigt werden, ein Multi-Select mit Chips gewünscht ist oder Suchfunktionalität erforderlich ist.

Wie viele Optionen sind zu viele für ein Dropdown? Es gibt keine feste Obergrenze, aber ab ca. 20 Optionen sollte eine Suchfunktion (Combobox) angeboten werden. Bei geografischen Listen (Länder, Städte) ist Suche immer empfehlenswert. Bei kategorisierbaren Listen helfen <optgroup>-Elemente zur Strukturierung.

Verwandte Einträge

• Input Field
• Checkbox & Radio Button
• Date Picker
• Badge, Tag & Chip

Weiterführend

• Nielsen Norman Group – „Drop-Down Menus": nngroup.com/articles/drop-down-menus
• Material Design 3 – Menus: m3.material.io/components/menus
• WAI-ARIA Authoring Practices – Combobox Pattern: w3.org/WAI/ARIA/apg/patterns/combobox
• Apple Human Interface Guidelines – Pickers: developer.apple.com/design/human-interface-guidelines/pickers