Angular - 3.7 Ajouter une barre de navigation
Le header actuel n'est qu'une simple balise <h1> peu engageante. On va l'améliorer en construisant une vraie barre de navigation en utilisant les classes Bootstrap. Dans header.component.html, on crée un élément <nav> avec les classes navbar navbar-default, puis à l'intérieur une <div class="container-fluid"> qui sert de conteneur global.
Logo, liens et menu déroulant
On ajoute ensuite un <div class="navbar-header"> avec une balise <a> portant la classe navbar-brand et un href="#" (le routing viendra plus tard). Le texte du logo : Livre de recettes. Pour les liens de navigation, pas de menu hamburger : on a peu de liens. On encapsule dans une <div class="collapse navbar-collapse"> puis une liste non ordonnée <ul class="nav navbar-nav"> qui aligne automatiquement les éléments. À l'intérieur, deux <li> contenant chacun un lien :
- premier élément : Recettes, qui pointera plus tard vers la section recettes ;
- second élément : Liste de courses, qui pointera vers la liste d'achats.
À droite, j'ajoute une autre <ul class="nav navbar-nav navbar-right"> contenant un seul élément avec la classe dropdown : c'est notre menu déroulant Gestion. Il regroupera plus tard des options pour stocker ou récupérer les données sur un serveur. Le déclencheur est une balise <a> avec la classe dropdown-toggle et l'attribut role="button", et le menu est un <ul class="dropdown-menu"> contenant les options Récupérer les données et Enregistrer les données.
Pour signaler visuellement qu'il s'agit d'un menu déroulant, j'ajoute à côté du libellé Gestion un <span class="caret"></span> qui affiche une flèche vers le bas. Si on relance ng serve et qu'on retourne dans le navigateur, le header affiche bien le logo, les deux liens de navigation et le menu déroulant avec sa flèche. Le menu ne s'ouvre pas encore au clic — nous n'avons pas ajouté la logique d'ouverture, on s'en occupera après la section sur les directives.
En résumé
Cette leçon Angular montre comment remplacer un simple en-tête H1 par une navbar professionnelle utilisant Bootstrap. La navbar intègre un logo cliquable (navbar-brand), deux liens de navigation (Recettes et Liste des courses) organisés dans une liste structurée, et un menu déroulant pour la gestion des données. La vidéo explique l'utilisation des classes Bootstrap (navbar, collapse, nav, dropdown) et démontre le rendu final avec l'ajout d'une flèche visuelle pour indiquer l'interactivité du menu déroulant.
Points clés
- Utiliser la balise nav avec les classes Bootstrap navbar et navbar-expand pour créer une barre de navigation structurée
- Ajouter un logo/marque avec la classe navbar-brand en utilisant une balise ancrage (a)
- Créer une section de navigation avec une liste non ordonnée (ul) ayant les classes nav et navbar-nav
- Implémenter un menu déroulant avec la classe dropdown et dropdown-toggle pour les options secondaires
- Positionner les éléments à droite avec la classe ml-auto (margin-left: auto)
- Ajouter une flèche visuelle (span.caret) au menu déroulant pour signaler son interactivité
Questions fréquentes
Quels éléments composent une navbar Bootstrap complète ?
Une navbar complète comprend : un logo/marque (navbar-brand), une section de liens de navigation (ul.nav), un conteneur fluide pour l'organisation globale, et optionnellement un menu déroulant avec la classe dropdown pour les actions secondaires.
Comment signaler visuellement qu'un élément est un menu déroulant ?
En ajoutant la classe dropdown-toggle au lien et un span avec la classe caret pour afficher une flèche pointant vers le bas, qui indique immédiatement à l'utilisateur que c'est un menu interactif.
Comment aligner les éléments à droite dans la navbar ?
En appliquant la classe ml-auto ou navbar-right au conteneur (div ou ul) contenant les éléments à positionner, ce qui les pousse vers la droite de la barre de navigation.