Dropdown
Kompakte Menüs. Nahtlose Interaktion.
Mit der Dropdown-Komponente können Sie kompakte, interaktive Elemente erstellen, die bei Auslösung zusätzliche Inhalte oder Navigationsoptionen anzeigen, ideal für Kopfzeilen, Navigationsleisten, Filter oder Kontextmenüs.
Ob Navigationsmenü, Filterauswahl oder Funktionsmenü - mit Dropdowns können Sie saubere, zugängliche Designs erstellen, ohne Ihre Benutzeroberfläche zu überfrachten. Diese Komponente, die mit Themen und Interaktionstypen vollständig anpassbar ist, sorgt dafür, dass Ihre Inhalte intuitiv und übersichtlich bleiben und ein nahtloses Benutzererlebnis gewährleisten.
Menüs sauber und übersichtlich halten
Standardmäßig kompakt.
Nur bei Bedarf mehr anzeigen.Reichhaltige Trigger-Elemente.
Gestalten und positionieren Sie frei.Vertraute UX-Muster
Öffnen bei Klick oder Hover.
Flexible Interaktion und Stil
Beliebige Trigger.
Ihr Triggerdesign, Ihre Regeln.Hover oder Click.
Kontrollieren Sie, wie Benutzer interagieren.Konsistent über alle Layouts hinweg.
Visuelle Logik sowohl auf Auslöser anwenden.
Anwendungsfälle
Dropdown-Menüs sind ein wesentliches Element von sauberen, platzsparenden Schnittstellen. Diese Menüs werden am besten dort eingesetzt, wo Benutzer zusätzliche Aktionen auswählen oder entdecken müssen, ohne die Seite zu überladen, sondern um die Benutzer zu führen, ohne den Bildschirm zu überladen.
Anwendungsfälle sind unter anderem:
Navigations-Header mit Dropdown-Untermenüs
Konto-/Profil-Menüs in Webanwendungen
Kategorie-Selektoren oder Produktfilter
Sortier-/Filter-Dropdowns in Shops oder bei der Suche
Schaltflächen mit mehreren Optionen in Symbolleisten oder CMS
Sprach- oder Themenumschalter
Konfigurationsoptionen und Funktionen
Mit der Dropdown-Komponente können Sie mehr Funktionen auf weniger Platz unterbringen und so die Benutzerfreundlichkeit verbessern, während gleichzeitig eine saubere und elegante Schnittstelle erhalten bleibt. Egal, ob sie für die Navigation oder für schnelle Aktionen verwendet wird, sie ist vollständig anpassbar, thematisierbar und reaktionsfähig.
Inhalt auslösen. Zeigen Sie Optionen an. Alles ohne Unordnung.
Trigger
Das anklickbare (oder hover) Element, das die Auswahlliste sichtbar macht, die aus folgenden Elementen bestehen kann
Icons (Hamburger-Menü, Pfeile)
Textbeschriftungen (z. B. "Mehr", "Kategorien")
Beliebiges benutzerdefiniertes Design (z. B. Avatar + Name)
Dies ist der Einstiegspunkt für Ihre Dropdown-Logik.
Content Bereich
Der Inhaltscontainer wird angezeigt, wenn das Dropdownmenü aktiv ist. Unterstützt alle Komponenten wie:
Link-Listen
Icons oder Text
Bilder
Interaktive Werkzeuge (z. B. Schalter, Schaltflächen)
Ideal für Menüs oder kompakte interaktive Panele.
Öffnen bei Hover
Ein Umschalter, der festlegt, ob das Dropdown-Menü beim Klicken oder beim Hovern geöffnet wird.
True: Hover öffnet die Auswahlliste
False: Klicken schaltet zwischen Öffnen/Schließen um
Verwenden Sie den Mauszeiger für Navigationsmenüs und klicken Sie auf die Schaltfläche für Aktionen oder Panele.
Komponenten Theme
Wendet das Styling auf den äußeren Dropdown-Container an.
Content Theme
Gestaltet den angezeigten Dropdown-Inhaltsbereich, einschließlich Abstand, Hintergrund oder Text.
Trigger Theme
Wendet das Styling auf das Auslöseelement an.