Créer un menu de navigation avec Bootstrap

Dans cette leçon, nous allons voir comment utiliser les classes de type .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 :

Utilisation de la classe nav de Bootstrap pour créer un menu

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.

Laisser un commentaire