Les composants graphiques de navigation de Bootstrap4 (Les navs)

Tous les composants de navigation de Bootstrap4 ont pour base la classe .nav qui intègre la flexbox, une intégration qui permet au composant nav de créer tous types de composants graphiques de navigation flexible. Pour créer un composant graphique vous avez le choix entre utiliser la balise <ul> ou utiliser la balise <nav>

Code pour la création d’un composant graphique de navigation avec la balise <ul> :

<ul class="nav">
    <li class="nav-item">
           <a class="nav-link active" href="#">Premier lien du composant</a>
    </li>
    <li class="nav-item">
             <a class="nav-link" href="#">Deuxième lien du composant</a>
    </li>
    <li class="nav-item">
             <a class="nav-link" href="#">Troisième lien du composant</a>
    </li>
    <li class="nav-item">
              <a class="nav-link" href="#">Quatrième lien du composant</a>
    </li>
</ul>

Code pour la création d’un composant graphique de navigation avec la balise <nav> :

<nav class="nav">
      <a class="nav-item  nav-link active" href="#">Premier lien du composant</a>
      <a class="nav-item  nav-link" href="#">Deuxième lien du composant</a>
      <a class="nav-item  nav-link" href="#">Troisième lien du composant</a>
      <a class=" nav-item  nav-link" href="#">Quatrième lien du composant</a>
</nav>

Maintenant que nous savons quels sont les différentes manières de créer un composant graphique de navigation à l’aide Bootstrap4, nous étudierons les deux types de navigations qui sont les menus en tab(tableau) et les menus en pill(forme comprimée), que cette dernière a mis à notre disposition.

Créer un menu en tab :

Pour créer  un menu tab, il faut utiliser la classe .nav-tabs Exemple :

<nav class="nav nav-tabs">
      <a class="nav-item  nav-link active" href="#">Premier lien du composant</a>
      <a class="nav-item  nav-link" href="#">Deuxième lien du composant</a>
      <a class="nav-item  nav-link" href="#">Troisième lien du composant</a>
      <a class=" nav-item  nav-link" href="#">Quatrième lien du composant</a>
</nav>

Rendu :

Créer un menu en pill :

Pour créer  un menu tab, il faut utiliser la classe .nav-pills Exemple :

<nav class="nav nav-pills">
      <a class="nav-item  nav-link active" href="#">Premier lien du composant</a>
      <a class="nav-item  nav-link" href="#">Deuxième lien du composant</a>
      <a class="nav-item  nav-link" href="#">Troisième lien du composant</a>
      <a class=" nav-item  nav-link" href="#">Quatrième lien du composant</a>
</nav>

Rendu :

Aligner les composants graphiques de navigation :

Il est très facile d’aligner un composant graphique de navigation horizontalement et verticalement puisque le composant de base nav intègre la flexbox.

Alignement horizontal d’un composant graphique de navigation:

Par défaut un composant graphique de navigation est positionné à gauche mais vous avez la possibilité de le positionner au centre en utilisant la classe .justify-content-center ou encore le positionner à droite en utilisant la classe .justify-content-end. Premier Exemple :

<nav class="nav nav-pills justify-content-center">
      <a class="nav-item  nav-link active" href="#">Lien 1</a>
      <a class="nav-item  nav-link" href="#">Lien 2</a>
      <a class="nav-item  nav-link" href="#">Lien 3</a>
      <a class=" nav-item  nav-link" href="#">Lien 4</a>
</nav>

Rendu : Second Exemple :

<nav class="nav nav-pills justify-content-end">
      <a class="nav-item  nav-link active" href="#">Lien 1</a>
      <a class="nav-item  nav-link" href="#">Lien 2</a>
      <a class="nav-item  nav-link" href="#">Lien 3</a>
      <a class=" nav-item  nav-link" href="#">Lien 4</a>
</nav>

Rendu :

Alignement vertical d’un composant graphique de navigation:

Pour disposer les éléments d’un composant de navigation verticalement nous allons utiliser la classe .flex-column. Exemple :

<nav class="nav nav-pills flex-column">
      <a class="nav-item  nav-link active" href="#">Lien 1</a>
      <a class="nav-item  nav-link" href="#">Lien 2</a>
      <a class="nav-item  nav-link" href="#">Lien 3</a>
      <a class=" nav-item  nav-link" href="#">Lien 4</a>
</nav>

Rendu :

Lier les contenus aux liens correspondants de la navigation :

Vous convenez avec moi qu’il faut créer des contenus et les faire apparaitre en cliquant sur le lien correspondant, sinon ça ne sert rien de créer un composant de navigation sans qu’on puisse navigue avec. Pour cette étape nous irons pas à pas, premièrement nous verrons comment structurer les contenus en adéquation avec le composant de navigation et deuxièmement comment lier ces contenus au composant de navigation.

Structuration des contenus de l’interface du composant de la navigation

• Tous les contenus doivent être à l’intérieur d’une div porteur de la classe .tab-content
• Chaque contenu doit être à l’intérieur d’une div qui porte la classe .tab-pane et un identifiant (id)
• Le contenu actif doit avoir la classe .active

Exemple :

<div class="tab-content">
   	  <div class="tab-pane active" id="contenu1">…</div>
   	  <div class="tab-pane" id=" contenu2">…</div>
   	  <div class="tab-pane" id=" contenu3">…</div>
   	  <div class="tab-pane" id=" contenu4">…</div>
</div>

Lier les contenus aux liens du composant de la navigation :

Les liens de la navigation doit tous avoir l’attribut data-toggle avec pour valeur tab si il s’agit des menu en tabs mais si ce sont les menus en pills que vous réalisez alors la valeur de data-toggle doit être pill, leurs attributs href doivent avoir pour valeur l’identifiant du contenu correspondant Exemple :

<nav class="nav nav-pills">
      <a class="nav-item  nav-link active" data-toggle="pill" href="#contenu1">Lien 1</a>
      <a class="nav-item  nav-link " data-toggle="pill" href="#contenu2">Lien 2</a>
      <a class="nav-item  nav-link " data-toggle="pill" href="#contenu3">Lien 3</a>
      <a class="nav-item  nav-link " data-toggle="pill" href="#contenu4">Lien 4</a>
</nav>

Réalisation complète de l’interface d’un menu en pills avec son contenu :

<nav class="nav nav-pills">
      <a class="nav-item  nav-link active" data-toggle="pill" href="#contenu1">Lien 1</a>
      <a class="nav-item  nav-link " data-toggle="pill" href="#contenu2">Lien 2</a>
      <a class="nav-item  nav-link " data-toggle="pill" href="#contenu3">Lien 3</a>
      <a class="nav-item  nav-link " data-toggle="pill" href="#contenu4">Lien 4</a>
</nav>
<div class="tab-content">
   	  <div class="tab-pane active" id="contenu1">…</div>
   	  <div class="tab-pane" id=" contenu2">…</div>
   	  <div class="tab-pane" id=" contenu3">…</div>
   	  <div class="tab-pane" id=" contenu4">…</div>
</div>

Réalisation complète de l’interface d’un menu en tabs avec son contenu :

<nav class="nav nav-tabs">
      <a class="nav-item  nav-link active" data-toggle="tab" href="#contenu1">Lien 1</a>
      <a class="nav-item  nav-link " data-toggle=" tab " href="#contenu2">Lien 2</a>
      <a class="nav-item  nav-link " data-toggle=" tab " href="#contenu3">Lien 3</a>
      <a class="nav-item  nav-link " data-toggle=" tab " href="#contenu4">Lien 4</a>
</nav>
<div class="tab-content">
   	  <div class="tab-pane active" id="contenu1">…</div>
   	  <div class="tab-pane" id=" contenu2">…</div>
   	  <div class="tab-pane" id=" contenu3">…</div>
   	  <div class="tab-pane" id=" contenu4">…</div>
</div>

Cours précédent                                                                                     Cours suivant Voir la table des matières J’envoie régulièrement des astuces et techniques peu connus sur le développement web à un groupe privé de personnes… Je leur envoie des contenus gratuits, des tutoriels sur Bootstrap et ils bénéficient aussi de mes propres créations (thèmes premiums, composants et éléments d’interface). Ils sont aussi mis au courant dès que les thèmes premiums et plugins premiums sont au tarif promotionnel sur les meilleures marketplaces. Une fois inscrit, tu reçois gratuitement  mon livre Prise en main de Bootstrap 4 et un thème premium. Clique ici pour rejoindre le groupe privé et bénéficier de tous ces avantages.