Barre de recherche dépliante
Un bouton rond avec une loupe qui s'ouvre en champ de recherche complet quand on clique dessus.
Réglages
Code
<label class="uv-is"><input placeholder="Rechercher…"><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 pour l’IA
Collez-le dans ChatGPT, Claude ou Cursor : le bloc sera adapté à votre projet avec ces réglages, même sans React.
Plus dans Champs
Où l’utiliser
Une barre de recherche dépliante fait gagner de la place dans un en-tête chargé. Elle convient à un blog au menu fourni, à la barre supérieure d'une petite boutique en ligne ou à l'en-tête mobile d'un site d'actualité. Au repos, ce n'est qu'un bouton rond avec une loupe ; au clic, il s'étire en rebondissant jusqu'à devenir un large champ.
Quand le champ perd le focus, il se replie. Il convient donc aux sites où la recherche est un appoint, pas le chemin principal. Sur une documentation ou un grand catalogue, où l'on cherche sans arrêt, affichez la barre complète dès le départ.