Dropdown- und Menüsystem

Was macht Dropdown- und Menüsystem?

Zweck

Die Skill "Dropdown- und Menüsystem" bietet ein standardisiertes Framework für die Gestaltung von schwebenden Aktionsmenüs, Überlaufmenüs, Kontextmenüs und kaskadierenden Untermenüs in Webschnittstellen. Dropdown-Menüs zeigen eine strukturierte Liste von interaktiven Befehlen, Optionen oder Unteraktionen, die an ein Triggerelement (wie einen Icon-Button, Split-Button oder Kontextaktion) gebunden sind.

Ein effektives Dropdown-Menüsystem erfordert die Abstimmung von räumlichem Layout, visueller Hierarchie, Elementgruppierung, Tastaturnavigationssemantik, Kollisionsvermeidung (Viewport-Grenzen) und responsiver Anpassung auf Touch-basierten mobilen Ansichten, ohne Benutzer zu desorientieren oder die WCAG 2.1 AA Barrierefreiheitsrichtlinien zu verletzen.

Anwendungsfälle

• Aktions- und Optionsmenüs: Darstellung sekundärer Seiten- oder Zeilenaktionen (z. B. "Bearbeiten", "Duplizieren", "Exportieren", "Löschen") an einem Trigger-Button in Datentabellen, Karten oder Seitenkopfbereichen.
• Überlauf- und „Mehr“-Menüs: Aufnahme von Aktionen mit niedrigerer Priorität oder Navigationslinks, wenn der Containerplatz begrenzt ist (z. B. "..."-Buttons in Toolbars oder Tabellenkopfbereichen).
• Kontextuelle Popup-Menüs: Anzeige von gezielten Kontextbefehlen, die durch Rechtsklick oder langes Drücken auf bestimmte visuelle Canvas- oder Listenelemente ausgelöst werden.
• Kaskadierende Untermenüs: Organisation von verschachtelten Aktionen oder mehrstufigen Kategorieoptionen innerhalb eines mehrstufigen Menü-Overlays.
• Auswahlaktionsmenüs (auswählbare & Radio-Buttons): Umschalten von Ansichtszuständen, Spaltensichtbarkeit oder Sortiereinstellungen innerhalb von schwebenden Aktionsfeldern.

Wann NICHT zu verwenden

• Formularauswahl-Eingaben (Comboboxen & Select-Eingaben): Für Formulareingaben, bei denen Benutzer einen oder mehrere Werte auswählen, um ein Feld zu füllen (z. B. Auswahl eines Landes oder einer Produktkategorie), verwenden Sie custom-select-and-combobox-system.
• Hochdichte Navigationspanels: Für mehrspaltige globale Site-Navigation mit strukturierten Kategorien, Landing Pages und Marketing-Promos verwenden Sie mega-menu-navigation-system.
• Große modale & Aufgaben-Workspaces: Für komplexe Unteraufgaben, Mehrfeld-Eingaben oder mehrstufige Assistentenformulare, die einen erhaltenen Fokus erfordern, verwenden Sie overlay-and-dialog-system oder bottom-sheet-design-system.
• Kontextuelle Hilfe & Tooltips: Für nicht-interaktive, Hover-/Fokus-Textbeschreibungen zur Erläuterung der Funktion eines Elements verwenden Sie tooltip-and-hint-system.

Eingaben

1. Trigger-Komponente & Geometrie: Primäre Trigger-Elementart (Standard-Button, Icon-Button, Split-Button oder Rechtsklick-Zielbereich) und räumliche Positionierung.
2. Menüelement-Inventar & Hierarchie: Liste der Aktionen, Elementarten (Standard, auswählbar, Radio, destruktiv), Icons, Tastenkombinationen, Trennlinien und Gruppenabschnittsbeschriftungen.
3. Oberflächen- & Elevation-Tokens: Hintergrundoberflächenfarben, Rahmenstile, Schlagschatten-Tokens (--elevation-popover) und Z-Index-Positionierung (--z-popover) aus elevation-and-depth-system und accessible-color-system.
4. Viewport- & Gerätekontext: Geräteausrichtung, Bildschirmbreiten-Breakpoint und Touch-Unterstützungseigenschaften.

Ausgaben

1. Menü-Anatomie & Layout-Blueprint: CSS- und HTML-Strukturspezifikation für Menü-Containergröße, Abstände, Elementausrichtung, nachgestellte Tastenkürzelhinweise und Abschnittstrennerabstände.
2. Räumliche Positionierungs- & Kollisionsstrategie: Layoutregeln für die Verankerungspositionierung (oben/unten/links/rechts), Ausrichtung, dynamische Flip-/Slide-Logik und maximale Höhe scrollbarer Grenzen.
3. Responsives mobiles Anpassungsmodell: Design-Spezifikation, die schmale Desktop-Dropdown-Popover auf mobilen Viewports in untere Aktionsblätter (bottom-sheet-design-system) oder vollbreite Touch-Listen umwandelt.
4. ARIA- & Tastaturnavigationsspezifikation: Programmatische Barrierefreiheitsregeln für ARIA-Rollen (role="menu", role="menuitem", role="menuitemcheckbox", role="menuitemradio"), erweiterte Zustände (aria-expanded) und Pfeiltasten-Fokusverwaltung.

---

Workflow

1. Menüstruktur und Elementanatomie definieren

Klassifizieren Sie die Elemente im Menü in logische Funktionsgruppen, um die Scanbarkeit zu maximieren:

• Kopf- & Abschnittsbeschriftungen: Gruppieren Sie verwandte Aktionen mit Großbuchstaben-Mikrotypografie oder dezenten Abschnittsüberschriften (font-size: 0.75rem, font-weight: 600, letter-spacing: 0.05em).
• Standard-Elementzusammensetzung: Richten Sie Elemente horizontal mit Flexbox aus (gap: 0.75rem):
  • Führende Grafik: 16x16px oder 20x20px Icon, das den Zweck der Aktion verdeutlicht.
  • Beschriftungstext: Präzises, handlungsorientiertes Verb (z. B. "PDF herunterladen", "Element duplizieren").
  • Nachgestellter Tastenkürzelhinweis: Monospace-Tastenkombinationstext (z. B. ⌘E, Strg+D) visuell dezent (color: var(--text-tertiary)).
  • Nachgestellter Chevron: Zeigt einen Auslöser für ein kaskadierendes Untermenü an (>).
• Spezialisierte Elementarten:
  • Auswählbare Elemente (role="menuitemcheckbox"): Zeigen führende Häkchen an, wenn aktiv.
  • Radio-Elemente (role="menuitemradio"): Zeigen Radio-Punkte an, wenn innerhalb einer Gruppe ausgewählt.
  • Destruktive Elemente: Gestalten Sie negative Aktionen (z. B. "Löschen", "Entfernen") mit einer deutlichen Warnfarbe (color: var(--color-danger)), getrennt von harmlosen Aktionen durch eine visuelle Trennlinie.
• Trennlinien (role="separator"): Verwenden Sie dezente horizontale Linien (1px solid var(--border-subtle)), um unterschiedliche Aktionsgruppen zu segmentieren (z. B. Ansichtsaktionen separat von Bearbeiten-/Löschaktionen gruppieren).

2. Räumliche Positionierung & Kollisionserkennung einrichten

Konfigurieren Sie Layoutregeln, sodass das Menü sauber neben seinem Trigger erscheint, ohne über die Bildschirmkanten zu ragen:

• Verankerungsausrichtung: Positionieren Sie das Menü-Popover relativ zur Trigger-Button-Grenze:
  • Unten-Links / Unten-Rechts: Standardpositionierung unterhalb des Trigger-Buttons. Richten Sie es am rechten Rand aus, wenn der Trigger nahe dem rechten Bildschirmrand sitzt (z. B. Aktionsspalten von Datentabellen).
  • Oben-Links / Oben-Rechts: Richtungswechsel oberhalb des Trigger-Buttons, wenn dieser nahe dem unteren Viewportrand liegt.
• Viewport-Kollision & Flip-Regeln:
  • Halten Sie einen Mindestabstand von 12px zu Bildschirmrändern ein (viewport-margin: 12px).
  • Setzen Sie eine maximale Höhenbeschränkung (max-height: calc(100vh - 32px)) mit internem vertikalen Scrollen (overflow-y: auto) für lange Menüs.
• Elevation-Tokens: Wenden Sie die oberste Ebene an (z-index: var(--z-popover)) und Schlagschatten (box-shadow: var(--shadow-popover)), um das schwebende Menü visuell von Hintergrundtabellenzeilen oder Karten zu trennen.

3. Interaktion & Untermenü-Dynamik konfigurieren

• Trigger-Zustände: Stellen Sie sicher, dass Trigger-Buttons den aktiven offenen Zustand mit aria-expanded="true" und einem dezenten gedrückten visuellen Zustand (background-color: var(--bg-hover)) anzeigen.
• Untermenü Hover & Tastaturverzögerung:
  • Kaskadierende Untermenüs öffnen sich bei Maus-Hover mit einer leichten bewussten Verzögerung (150–200ms Absichts-Timer), um versehentliche Auslöser-Flacker während der Zeigerbewegung zu verhindern.
  • Das Drücken von Pfeil Rechts auf einem Untermenü-Auslöser erweitert das Untermenü und verschiebt den Fokus hinein; Pfeil Links schließt das Untermenü und gibt den Fokus an das übergeordnete Menüelement zurück.
• Schließungsauslöser: Schließen Sie das offene Menü-Overlay, wenn:
  • Der Benutzer außerhalb des Menü-Panels klickt (Click-outside-Listener).
  • Der Benutzer die Taste Escape drückt.
  • Eine aktive Menüelement-Aktion ausgeführt wird (es sei denn, es handelt sich um ein auswählbares Umschaltelement).
  • Der Fokus das Menü-Overlay verlässt.

4. Responsive mobile Anpassung entwerfen

Desktop-schwebende Dropdown-Popover (z. B. 220px schwebende Boxen) funktionieren auf mobilen Touch-Bildschirmen aufgrund kleiner Touch-Ziele und präziser Positionierungsanforderungen schlecht:

• Mobile Touch-Transformation (< 768px):
  • Wandeln Sie Desktop-Popover in ein unteres Aktionsblatt (bottom-sheet-design-system) um, das am unteren Viewport verankert ist.
  • Erhöhen Sie die Element-Zeilenhöhe auf ein minimales Touch-Ziel von 44px (vorzugsweise 48px) mit vollbreiten horizontalen Touch-Zonen.
  • Bieten Sie einen expliziten visuellen Ziehgriff oder eine klare "Abbrechen"-Schaltfläche am unteren Rand des Blatts für müheloses Schließen mit dem Daumen.
• Touch-Feedback: Wenden Sie ausgeprägte aktive Touch-Hintergrundzustände (:active) für sofortiges taktiles Feedback an.

5. Barrierefreiheit & Tastatursemantik programmieren

• ARIA Landmark & Rollenzuordnung:
  • Setzen Sie Trigger-Button: aria-haspopup="menu", aria-expanded="true|false", aria-controls="menu-id".
  • Setzen Sie Menü-Container: role="menu", aria-labelledby="trigger-id", tabindex="-1".
  • Setzen Sie Menüelemente: role="menuitem", role="menuitemcheckbox" oder role="menuitemradio".
• Tastaturnavigationsmodell:
  • Enter / Leertaste / Pfeil Runter auf Trigger: Öffnet das Menü und fokussiert das erste Menüelement.
  • Pfeil Runter / Pfeil Hoch: Navigiert sequenziell durch die Menüelemente (umlaufend von oben nach unten).
  • Pos1 / Ende: Bewegt den Fokus direkt zum ersten oder letzten Menüelement.
  • Escape: Schließt das Menü sofort und gibt den Fokus zurück zum Trigger-Button.
  • Tab: Schließt das Menü sofort und ermöglicht den normalen Dokumentfokus-Verlauf.
  • Typeahead-Zeichensuche: Das Drücken einer Buchstabentaste (z. B. "D") bewegt den Fokus direkt zum nächsten Menüelement, das mit diesem Buchstaben beginnt.

---

Entscheidungsregeln

Menü-Typ & Kontextauswahl

Kontext / Ziel	Empfohlenes Muster	ARIA-Struktur	Mobile Anpassung
Zeilen- / Kartenaktionen	Aktions-Dropdown	role="menu" / role="menuitem"	Unteres Aktionsblatt
Toolbar-Überlauf ("...")	Überlaufmenü	role="menu" / role="menuitem"	Unteres Aktionsblatt
Rechtsklick-Canvas-Tools	Kontextmenü	role="menu" / role="menuitem"	Langdruck-Unteres-Blatt
Formularoptionsauswahl	Combobox-Auswahl	role="combobox" / role="option"	Native Select / Unteres Blatt
Mehrstufige Ansichts-/Filter-Umschalter	Auswählbares Aktionspanel	role="menu" / role="menuitemcheckbox"	Unteres Aktionsblatt

Positionierungs- & Ausrichtungsregeln

• Daten-Tabellen-Zeilenmenüs: Positionierung oben-rechts oder unten-rechts ausgerichtet am Trigger-Button, um horizontale Abschneidung über die rechte Tabellen-Viewportkante hinaus zu verhindern.
• Kopf- / Navigationsaktionen: Positionierung unten-rechts oder unten-links, je nach Nähe zum Bildschirmrand.
• Untermenüs: Standardmäßig nach rechts öffnen (left: 100%); wenn rechts weniger als 200px Platz ist, nach links öffnen (right: 100%).

---

Einschränkungen

• Barrierefreiheit (WCAG 2.1 AA):
  • SC 1.4.3 Kontrast (Minimum): Elementtext, Icons und Tastenhinweise müssen ein Kontrastverhältnis von mindestens 4,5:1 zum Menühintergrund aufweisen.
  • SC 2.1.1 Tastatur: Jedes Element und jede Aktion im Menü muss vollständig über die Tastatur zugänglich und auslösbar sein.
  • SC 2.4.7 Fokus sichtbar: Fokussierte Menüelemente müssen deutliche visuelle Fokuszustände aufweisen (z. B. Hintergrundfarbverschiebung + kontrastkonformer Hervorhebungsindikator).
  • SC 2.5.8 Zielgröße: Desktop-Menüelemente müssen eine Mindesthöhe von 32px haben; mobile Aktionsblatt-Elemente müssen Touch-Ziele von mindestens 44x44px erfüllen.
• Viewport-Grenzen: Offene Menüs dürfen niemals über den Bildschirmrand hinausragen oder horizontale Seiten-Scrollbalken erzeugen. Verwenden Sie Kollisions-Flipping und internes vertikales Scrollen (max-height).
• Räumliche Abstände & Dichte: Halten Sie konsistente interne horizontale Abstände (z. B. padding: 0.5rem 0.75rem) und vertikale Containerabstände (padding: 0.25rem 0) ein.

---

Häufige Fehlermuster

• Formular-Combobox-Verwechslung: Verwendung von role="menu" für Formular-Auswahl-Dropdowns anstelle von role="combobox" / role="listbox", was Screenreader hinsichtlich Wertauswahl versus Befehlsausführung verwirrt.
• Fokus-Desorientierung beim Schließen: Fehlende Wiederherstellung des Tastaturfokus auf den Trigger-Button, wenn das Menü über Escape oder Auswahl geschlossen wird, wodurch der Fokus bei document.body verloren geht.
• Clipping-Container-Falle: Platzieren von Dropdown-Menüs innerhalb von Tabellenzellen oder Containern mit overflow: hidden, was dazu führt, dass das geöffnete Menü visuell abgeschnitten wird.
• Winzige mobile Touch-Ziele: Rendern von winzigen 24px-Desktop-Dropdown-Elementen auf Touch-Bildschirmen, ohne sie in touch-freundliche untere Blätter umzuwandeln.
• Versehentliches Schließen von Untermenüs: Fehlen eines Absichts-Timer-Verzögerung bei kaskadierenden Untermenüs, was dazu führt, dass Untermenüs eingeklappt werden, wenn die Maus diagonal in Richtung eines Unterelements bewegt wird.

---

Validierungskriterien

• Der Menü-Container verwendet angemessene ARIA-Semantik (role="menu", role="menuitem", role="separator").
• Die Tastaturnavigation unterstützt vollständig Pfeil Runter, Pfeil Hoch, Pos1, Ende, Escape und Buchstaben-Typeahead.
• Das Schließen des Menüs (über Escape oder Elementklick) stellt programmatisch den Fokus auf das Triggerelement wieder her.
• Viewport-Kollisionsregeln flippen oder scrollen lange Menüs sauber, ohne Bildschirmüberlauf.
• Der responsive Breakpoint (< 768px) wandelt Desktop-Dropdown-Popover in Touch-freundliche untere Aktionsblätter um.
• Elementtext, Tastenkürzelhinweise und Fokusindikator-Hintergründe erfüllen den WCAG-AA-Kontrast (≥4,5:1).