Barre de navigation Bootstrap, comment créer un menu réactif

Bienvenue dans ce nouveau tutoriel Bootstrap

Bootstrap filestype PDF 4 / Bootstrap navbar

L’un des éléments fondamentaux qui ne peut pas manquer dans un site ou dans une application Web est le menu. Dans cet article, nous verrons comment créer un menu réactif à l’aide du composant navbar de Bootstrap.

Que vous créiez une interface pour une application ou un site web, vous savez très bien que le menu de navigation est une composante essentielle de votre projet.

Le menu aide l’utilisateur à naviguer au sein d’un site, à accéder aux différentes rubriques et aux différents contenus.

Bootstrap, via le composant navbar, fournit une série d’outils avec lesquels vous pouvez facilement créer des menus horizontaux ou verticaux et qui se développent ou se réduisent en fonction de la taille de l’appareil.

Le composant de base pour créer un menu avec Bootstrap est la classe nav, mais la classe navbar est presque toujours utilisée car elle fournit des fonctionnalités supplémentaires.

Mais sans trop se perdre dans le bavardage, voyons tout de suite comment faire un menu avec Bootstrap

Barre de navigation Bootstrap / Bootstrap navbar

Tout d’abord, pour assurer la navigation avec la technologie assistée de la page web, le menu doit être enfermé dans la balise , ou mais avec l’attribut role=”navigation”. De cette façon, les exigences d’accessibilité du contenu seront respectées.

Pour créer un menu avec Bootstrap, vous devez utiliser les classes navbar et navbar-expand {-sm | -md | -lg | -xl} pour le rendre réactif :

J’ai utilisé les classes navbar-dark et bg-primary pour créer une barre de navigation avec une police blanche sur fond bleu. Plus tard dans le didacticiel, je vous parlerai également des principales classes de couleurs dans Bootstrap.

La classe navbar-expand-lg permet de réduire le menu sur les appareils plus petits que grands (992px), c’est-à-dire de se développer sur les appareils avec une fenêtre d’affichage égale ou supérieure à 992px. Comme nous l’avons vu dans les articles précédents, lorsque nous parlions du Grid System, si nous modifions le point d’arrêt, c’est-à-dire en remplaçant lg par xl, md ou sm, cela modifie le comportement du menu en fonction de la taille de l’écran ou de la fenêtre du navigateur ( fenêtre).

Pour créer le menu avec les différents éléments, vous utilisez une liste, mais vous devez affecter la classe navbar-nav à

et, pour les liens, vous devez affecter nav-link à les , comme dans l’exemple ci-dessous :

Maintenant, pour le rendre réactif, nous devons enfermer le menu dans un
auquel nous devons attribuer les classes collapse navbar-collapse et un identifiant particulier.

Nous, dans cet exemple, utiliserons comme id navbarSupportedContent :

Enfin, nous ajoutons le soi-disant bouton hamburger, qui remplacera le menu lorsqu’il sera réduit :

Dans data-target et aria-controls, vous devez entrer la valeur id donnée au menu.

Faire un Bootstrap Navbar

À ce stade, fusionnons tous les morceaux de code et créons notre menu réactif avec Bootstrap :

Si vous entrez le code ci-dessus dans la page d’exemple que nous avons créée avec les premiers articles de ce guide et faites quelques tests en redimensionnant la fenêtre, vous verrez que lorsque vous effectuez un zoom arrière, le menu disparaît et le bouton hamburger apparaît et vice versa.

Une chose importante que vous devez savoir est que la largeur du menu occupera toute la fenêtre.

Comme vous l’aurez compris en faisant les tests avec le code que nous avons écrit. Vous pouvez facilement changer cela en le plaçant dans un conteneur :

Mais le potentiel de la barre de navigation de Bootstrap ne s’arrête pas là. En fait, il peut être personnalisé davantage en ajoutant :

une image et/ou le nom de votre entreprise ou de votre marque, avec la classe navbar-brand ;
un formulaire avec un champ de saisie, tel qu’un champ de recherche, avec formulaire en ligne ;
du texte personnalisé en ajoutant un div avec la classe navbar-text ;
Quant à la marque, vous pouvez l’insérer immédiatement après la balise d’ouverture comme ceci :

Évidemment, vous pouvez entrer uniquement le nom ou uniquement l’image.

Un élément intéressant, présent sur de nombreux sites, est un champ de recherche dans la barre de navigation. Dans Bootstrap, vous pouvez le créer facilement en saisissant un formulaire en ligne comme celui-ci :