Ausklappbare Suchleiste
Ein runder Lupen-Button, der sich beim Klick zu einem vollständigen Suchfeld öffnet.
Einstellungen
Code
<label class="uv-is"><input placeholder="Suchen …"><svg viewBox="0 0 24 24"><circle cx="11" cy="11" r="6.5"/><path d="M20 20l-4.2-4.2"/></svg></label>Prompt für KI
Füg ihn in ChatGPT, Claude oder Cursor ein und der Baustein wird mit diesen Einstellungen an dein Projekt angepasst, auch ohne React.
Mehr aus Eingabefelder
Wofür du ihn nutzen kannst
Eine ausklappbare Suchleiste spart Platz in vollen Headern. Sie passt gut zu einem Blog mit großem Menü, zur Kopfleiste eines kleinen Onlineshops oder zum mobilen Header einer Nachrichtenseite. Im Ruhezustand ist sie nur ein runder Button mit Lupe; ein Klick, und sie dehnt sich federnd zu einem breiten Feld, bereit zum Tippen.
Verliert das Feld den Fokus, schrumpft es wieder. Das passt zu Seiten, auf denen die Suche eine Hilfe ist und nicht der Hauptweg. Bei einer Dokumentation oder einem großen Katalog, wo ständig gesucht wird, zeig die Suchleiste lieber von Anfang an komplett.