Dropdown- und Popover-Muster

Die HTML Popover API (Chrome 114+, umfassend unterstützt) bietet deklaratives Anzeigen und Ausblenden: das Attribut popover am Ziel und popovertarget an der auslösenden Schaltfläche. Für grundlegendes Öffnen und Schließen ist kein JavaScript erforderlich, einschließlich Light Dismiss (Klick außerhalb zum Schließen) und der Verarbeitung der Escape-Taste.

Wählen Sie Popover-Elemente mit [popover] oder :popover-open aus. Das Pseudo-Element ::backdrop steht zum Abdunkeln des Hintergrunds zur Verfügung. Popovers werden wie Dialoge in der Top Layer dargestellt – Probleme mit z-index-Überlagerungen treten nicht auf.

CSS Anchor Positioning (Chrome 125+) positioniert ein Popover ohne JavaScript relativ zu seiner Auslösung: anchor-name: --btn an der auslösenden Komponente, position-anchor: --btn am Popover und anschließend top: anchor(bottom); left: anchor(left), um es unterhalb der Auslösung auszurichten.

Ohne Anchor Positioning verwenden Sie einen positionierten übergeordneten Wrapper: position: relative am Container und position: absolute; top: 100%; left: 0 am Dropdown. Das funktioniert browserübergreifend, erfordert jedoch, dass Auslösung und Dropdown Geschwisterelemente in einem positionierten Container sind.

Gestalten Sie die Dropdown-Liste mit position: absolute; background: var(--color-surface); box-shadow: var(--shadow-md); border-radius: var(--radius-md); padding: var(--spacing-1) 0; min-width: 200px. Menüelemente verwenden Innenabstand, einen Hover-Hintergrund und eine Darstellung über die gesamte Breite.

Animieren Sie das Öffnen und Schließen von Popovers mit @starting-style für den Eintritt und transition-behavior: allow-discrete, um die Änderung der Eigenschaft display zu animieren. Dadurch werden CSS-only-Eintritts- und -Austrittsanimationen ermöglicht, die an den geöffneten bzw. geschlossenen Zustand des Popovers gebunden sind.

Dropdown-Menüs müssen per Tastatur bedienbar sein: Mit den Pfeiltasten navigieren Sie zwischen den Menüelementen, Enter/Leertaste aktiviert das fokussierte Element, und Escape schließt das Menü und gibt den Fokus an die Auslösung zurück. Die Popover API verarbeitet Escape automatisch; die Navigation mit den Pfeiltasten erfordert die Verarbeitung von JavaScript-Ereignissen.

Bei einem benutzerdefinierten Dropdown (ohne Popover API) fügen Sie der Auslösung aria-haspopup="listbox" und aria-expanded, der Liste role="listbox" sowie jedem Element role="option" und aria-selected hinzu. Screenreader geben den erweiterten Zustand und die Anzahl der Elemente aus.

Ein unterhalb seiner Auslösung positioniertes Dropdown kann am unteren Rand aus dem Viewport herausragen. Erkennen Sie dies mit IntersectionObserver oder getBoundingClientRect und verschieben Sie das Dropdown oberhalb der Auslösung. CSS Anchor Positioning übernimmt dies mit position-try-fallbacks.

Verschachtelte Dropdowns (Untermenüs) erhöhen die Komplexität. Positionieren Sie Untermenüs rechts neben ihren übergeordneten Elementen. Fügen Sie vor dem Ausblenden beim Verlassen mit der Maus eine Verzögerung hinzu (über CSS transition-delay oder einen JS-Timeout), damit Untermenüs bei diagonalen Mausbewegungen nicht geschlossen werden.

Durch Hover ausgelöste Dropdowns funktionieren auf Touchgeräten nicht – dort gibt es keinen Hover-Zustand. Verwenden Sie grundsätzlich Klick- bzw. Tipp-Auslösungen. Das Schließen durch Tippen außerhalb funktioniert über das Light Dismiss der Popover API oder einen document-Klicklistener, der geöffnete Dropdowns schließt.

Welche Funktionalität stellt die Popover API automatisch bereit, für die zuvor benutzerdefiniertes JavaScript erforderlich war?

Die Popover API und CSS Anchor Positioning ermöglichen gemeinsam deklarative Dropdown- und Popover-Muster mit minimalem JavaScript. Für eine breitere Browserunterstützung funktionieren Muster mit positionierten Containern zuverlässig. Tastaturbedienbarkeit, ARIA-Attribute, die Behandlung von Viewport-Kollisionen und die Unterstützung von Touchgeräten vervollständigen produktionsreife Dropdown-Komponenten.