Le composant Nav-overflow

Il arrive que la barre de navigation soit trop grande pour petis écrans.

Bootstrap offre différentes fonctionnalités pour gérer les barres de navigations réactives.

La plus simple : Le Nav-overflow

Avec cette fonctionnalité, les éléments de menu seront cachés dans un bouton "afficher plus" lorsqu'ils n'ont pas suffisamment d'espace pour être affichés.

Fonctionnement

1. Le parent doit avoir la classe nav-overflow et l'attribut data-bs-toggle="nav-overflow" pour activer la capacité du nav à envoyer ses éléments dans un bouton sur écrans trop petits.

2. Le contenu doit suivre la structure d'une liste ayant la classe nav avec des nav-items et nav-link.

   Le nav doit être construit avec une liste pour que ce fonctionnement puisse s'appliquer.

Exemple :

<div class="nav-overflow" data-bs-toggle="nav-overflow">
  <ul class="nav">
    <li class="nav-item">
      <a class="nav-link" href="#">Accueil</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Services</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Produits</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Promotions</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">À propos</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Contact</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Espace client</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Soutien</a>
    </li>
  </ul>
</div>