DevelopmentGuide pratique
Bootstrap : à quoi sert ce framework frontend ?
Grille responsive, utilitaires, composants CSS et JavaScript : comprendre le périmètre de Bootstrap et les vérifications utiles avant de l’adopter.
DevelopmentGuide pratique
Dropdown Bootstrap au survol : conserver clic, clavier et mobile
Ajouter le survol à un menu Bootstrap sans casser le clic, le clavier ou le tactile : méthode, limites et grille de vérification.
LA RÉPONSE UTILE
Bootstrap ouvre ses dropdowns au clic par conception. Le survol peut être un complément pour une souris, pas l’unique moyen d’ouvrir le menu. Conservez le bouton, les interactions clavier et le fonctionnement tactile, puis synchronisez l’état avec l’API du composant.
- Une règle CSS qui affiche le menu ne synchronise pas son état JavaScript.
- Le survol doit rester facultatif : téléphone et clavier n’en dépendent pas.
- Un menu de navigation n’est pas automatiquement un widget ARIA menu.
Pourquoi le clic reste la base
Le composant dropdown de Bootstrap 5.3 est conçu pour être ouvert au clic. Son JavaScript gère notamment l’ouverture, la fermeture et certaines interactions clavier. Ajouter simplement display:block au survol ne met pas nécessairement à jour ces comportements ni aria-expanded.
Le besoin réel est généralement de rendre une navigation plus rapide à la souris. Ce besoin n’impose pas de supprimer le clic. Un ordinateur peut aussi être tactile, et une personne peut alterner souris et clavier dans la même session.
Une amélioration progressive, pas un second menu
Commencez par un dropdown qui fonctionne sans votre ajout : bouton identifiable, liens réels, bundle Bootstrap chargé une seule fois et fermeture correcte. Activez ensuite votre amélioration uniquement sur un dispositif capable de survol précis ; les media queries hover et pointer permettent de raisonner sur cette capacité plutôt que sur la largeur de l’écran.
À l’entrée du pointeur, utilisez la méthode show de l’instance Dropdown ; à la sortie, prévoyez une fermeture différée et annulable. N’appelez pas hide si le focus clavier est encore dans le groupe. Le bouton doit conserver son comportement normal, et Échap doit rester un moyen de fermeture. Ce sont des principes d’implémentation à vérifier sur votre navigation, pas une garantie obtenue en collant quelques lignes CSS.
La grille de vérification avant livraison
Le point délicat n’est pas seulement l’ouverture : c’est la fermeture au bon moment. Un menu qui disparaît pendant le déplacement vers un sous-lien rend la navigation pénible, même lorsqu’il semble parfait sur une capture.
| Interaction | Résultat attendu | Erreur à rechercher |
|---|---|---|
| Souris vers le sous-menu | Le pointeur peut atteindre les liens | Fermeture sur un espace entre bouton et menu |
| Tab puis Entrée ou Espace | Ouverture depuis le bouton | Commande dépendante du survol |
| Échap | Fermeture cohérente avec le composant | État visuel et aria-expanded désynchronisés |
| Écran tactile | Le premier appui ouvre le menu | Lien parent suivi avant accès aux options |
| Changement de largeur | Aucun élément masqué ou inaccessible | Positionnement hérité du desktop |
Une dernière question ?
Peut-on ouvrir un dropdown uniquement avec :hover ?
C’est possible visuellement, mais insuffisant pour garantir la cohérence de l’état, du clavier et du tactile. Pour un composant interactif, vérifiez l’ensemble du comportement.
Le bundle Bootstrap contient-il Popper ?
Le bundle JavaScript Bootstrap inclut Popper. Les variantes sans bundle peuvent nécessiter une gestion séparée de cette dépendance selon les composants utilisés.
Faut-il retirer le clic quand on ajoute le survol ?
Non. Le survol est un raccourci facultatif, pas un remplacement du bouton accessible au clic et au clavier.