Comment fermer la barre de navigation Bootstrap après un clic ?

Lucas D. -

Problème : La barre de navigation Bootstrap reste ouverte après un clic

Sur les appareils mobiles, la barre de navigation Bootstrap, un composant de navigation courant, peut rester ouverte après qu'un lien ait été cliqué. Cela peut dérouter les visiteurs et masquer le contenu de la page. Fermer automatiquement la barre de navigation après un clic sur un lien améliorerait l'expérience utilisateur et la navigation sur le site.

Solutions pour fermer la barre de navigation Bootstrap

Utilisation des écouteurs d'événements JavaScript

Pour fermer la barre de navigation Bootstrap après avoir cliqué sur un lien, vous pouvez ajouter des écouteurs d'événements de clic aux liens de la barre de navigation. Cette méthode utilise JavaScript pour détecter quand un lien est cliqué et fermer ensuite la barre de navigation.

Voici un extrait de code qui montre cette approche :

const navLinks = document.querySelectorAll('.nav-item')
const menuToggle = document.getElementById('navbarSupportedContent')
const bsCollapse = bootstrap.Collapse.getOrCreateInstance(menuToggle, {toggle: false})
navLinks.forEach((l) => {
    if (menuToggle.classList.contains('show')) {
        l.addEventListener('click', () => { 
            bsCollapse.toggle() 
        })
    }
})

Ce code sélectionne tous les liens de la barre de navigation, ajoute un écouteur d'événements de clic à chacun, et bascule l'état de la barre de navigation lorsqu'un lien est cliqué. La méthode bootstrap.Collapse.getOrCreateInstance() contrôle le comportement de repli de la barre de navigation.

Exemple: Empêcher le comportement par défaut

Pour empêcher le comportement par défaut du lien (par exemple, naviguer vers une nouvelle page) lors de la fermeture de la barre de navigation, vous pouvez ajouter event.preventDefault() à votre gestionnaire d'événements de clic :

l.addEventListener('click', (event) => {
    event.preventDefault();
    bsCollapse.toggle();
})

Cela peut être utile si vous voulez fermer la barre de navigation avant de naviguer vers la nouvelle page ou si vous utilisez un routage d'application à page unique.

Implémentation des attributs de données

Une autre méthode pour fermer la barre de navigation Bootstrap après avoir cliqué sur un lien consiste à utiliser les attributs de données intégrés de Bootstrap. Cette approche ne nécessite pas de JavaScript et utilise la fonctionnalité propre à Bootstrap.

Pour utiliser cette méthode, ajoutez data-bs-toggle="collapse" et data-bs-target=".navbar-collapse.show" à chaque lien de la barre de navigation :

<ul class="navbar-nav me-auto">
    <li class="nav-item active">
        <a class="nav-link" href="#" data-bs-toggle="collapse" data-bs-target=".navbar-collapse.show">Accueil</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#" data-bs-toggle="collapse" data-bs-target=".navbar-collapse.show">Lien</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#" data-bs-toggle="collapse" data-bs-target=".navbar-collapse.show">Autre lien</a>
    </li>
</ul>

Ces attributs de données indiquent à Bootstrap de basculer l'état de repli de la barre de navigation lorsqu'un lien est cliqué. Le sélecteur .navbar-collapse.show cible la barre de navigation ouverte, la fermant lorsqu'un lien est sélectionné.

Les deux méthodes améliorent l'expérience utilisateur sur les appareils mobiles en fermant la barre de navigation après qu'un lien soit cliqué.