.nav-*
pour construire des menus de navigation avec Bootstrap.
On va également utiliser les propriétés du flexbox pour créer des menus responsive.
Créer un menu de navigation avec Bootstrap
La classe .nav
est la classe Bootstrap de base pour la navigation. Cette dernière est construite avec le flexbox et va par défaut appliquer les styles suivants :
Nous allons appliquer la classe .nav
à l’élément représentant notre barre de navigation. Ce sera généralement un élément de liste ul
. On pourra entourer cet élément ul
d’un élément nav
pour indiquer que le composant créé est bien un composant de navigation.
On va ensuite pouvoir ajouter les classes .nav-item
et .nav-link
à nos éléments li
(éléments ou onglets de navigation) et a
(lien de navigation) pour styliser ces éléments.
Code :
See the Pen
Bootstrap 4.1.1 by Pierre (@pierregiraud)
on CodePen.
Résultat :
See the Pen
Bootstrap 4.1.1 by Pierre (@pierregiraud)
on CodePen.
Aligner notre menu de navigation
La classe .nav
s’appuie sur le modèle des boites flexibles. On va donc pouvoir aligner nos éléments de navigation horizontalement en utilisant les classes .justify-content-center
et .justify-content-end
.
Code :
See the Pen
Bootstrap 4.1.2 by Pierre (@pierregiraud)
on CodePen.
Résultat :
See the Pen
Bootstrap 4.1.2 by Pierre (@pierregiraud)
on CodePen.
Changer la direction de la navigation
Pour obtenir un menu de navigation vertical plutôt qu’horizontal, il suffit d’ajouter la classe .flex-column
à l’élément qui possède la classe .nav
.
See the Pen
Bootstrap 4.1.3 by Pierre (@pierregiraud)
on CodePen.
Modifier la taille des éléments de navigation
On va pouvoir demander aux éléments de navigation d’occuper tout l’espace disponible en ajoutant une classe .nav-fill
ou .nav-justified
à l’élément possédant la classe .nav
.
Dans le cas où on utilise .nav-fill
, les différents éléments occuperont une place différente dans le menu en fonction de leur taille. En utilisant .nav-justified
, en revanche, on demande à chaque élément d’occuper la même largeur.
Code :
See the Pen
Bootstrap 4.1.4 by Pierre (@pierregiraud)
on CodePen.
Résultat :
See the Pen
Bootstrap 4.1.4 by Pierre (@pierregiraud)
on CodePen.
Changer l’apparence des éléments : tabs et pills
On va pouvoir changer l’apparence de nos éléments de menu et créer des menus à onglets ou à pills avec les classes .nav-tabs
et .nav-pills
.
Ces classes vont notamment nous permettre d’utiliser la classe .active
qui n’a aucun effet visible avec la classe de base .nav
.
Code :
See the Pen
Bootstrap 4.1.5 by Pierre (@pierregiraud)
on CodePen.
Résultat :
See the Pen
Bootstrap 4.1.5 by Pierre (@pierregiraud)
on CodePen.
Créer un menu de navigation adaptable ou responsive
Pour créer un menu de navigation responsive, il va nous suffire d’utiliser les classes responsive liées au flexbox.
On va par exemple pouvoir afficher notre menu en colonne pour les petits écrans puis en ligne dès que la fenêtre dépasse les 768px comme cela :
Code :
See the Pen
Bootstrap 4.1.6 by Pierre (@pierregiraud)
on CodePen.
Résultat :
See the Pen
Bootstrap 4.1.6 by Pierre (@pierregiraud)
on CodePen.