¿Cómo cerrar la barra de navegación de Bootstrap después de hacer clic?

Mateo G. -

Problema: La barra de navegación de Bootstrap permanece abierta después de hacer clic

La barra de navegación de Bootstrap es un componente de navegación común, pero puede permanecer abierta después de hacer clic en un enlace en dispositivos móviles. Esto puede confundir a los visitantes y bloquear la vista del contenido de la página. Cerrar la barra de navegación automáticamente después de hacer clic en un enlace mejoraría la experiencia del usuario y la navegación del sitio.

Soluciones para Cerrar la Barra de Navegación de Bootstrap

Uso de Escuchadores de Eventos JavaScript

Para cerrar la barra de navegación de Bootstrap después de hacer clic en un enlace, puedes agregar escuchadores de eventos de clic a los enlaces de la barra. Este método usa JavaScript para detectar cuando se hace clic en un enlace y luego cierra la barra.

Aquí tienes un fragmento de código que muestra este enfoque:

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() 
        })
    }
})

Este código selecciona todos los enlaces de la barra, agrega un escuchador de eventos de clic a cada uno y alterna el colapso de la barra cuando se hace clic en un enlace. El método bootstrap.Collapse.getOrCreateInstance() controla el comportamiento de colapso de la barra.

Ejemplo: Prevenir el Comportamiento Predeterminado

Para prevenir el comportamiento predeterminado del enlace (por ejemplo, navegar a una nueva página) al cerrar la barra, puedes agregar event.preventDefault() a tu manejador de eventos de clic:

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

Esto puede ser útil si quieres cerrar la barra antes de navegar a la nueva página o si estás usando enrutamiento de aplicación de una sola página.

Implementación de Atributos de Datos

Otro método para cerrar la barra de navegación de Bootstrap después de hacer clic en un enlace es usar los atributos de datos incorporados de Bootstrap. Este enfoque no necesita JavaScript y utiliza la funcionalidad propia de Bootstrap.

Para usar este método, agrega data-bs-toggle="collapse" y data-bs-target=".navbar-collapse.show" a cada enlace de la barra:

<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">Inicio</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#" data-bs-toggle="collapse" data-bs-target=".navbar-collapse.show">Enlace</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#" data-bs-toggle="collapse" data-bs-target=".navbar-collapse.show">Otro Enlace</a>
    </li>
</ul>

Estos atributos de datos indican a Bootstrap que alterne el estado de colapso de la barra cuando se hace clic en un enlace. El selector .navbar-collapse.show apunta a la barra abierta, cerrándola cuando se selecciona un enlace.

Ambos métodos mejoran la experiencia del usuario en dispositivos móviles al cerrar la barra después de hacer clic en un enlace.