En este post voy a mostrarte un ejemplo de código para tener el menú responsivo de Bootstrap sin dependencias como jQuery, usando únicamente algunas líneas de JavaScript puro.

Bootstrap es el framework CSS por excelencia. Casi todo programador web lo conoce, es de hecho una base que hay que tener. Sin embargo, tiene una desventaja y es que normalmente no funciona sin jQuery (u otros frameworks).

A veces solo se necesita tener el menú responsivo pero sin importar todas las librerías de JavaScript, por eso es que hoy vengo a compartir cómo tener un menú responsivo de Bootstrap sin jQuery ni dependencias.

Menú responsivo de Bootstrap sin jQuery

El menú de navegación se compone de dos cosas principales:

• Un botón con la clase “navbar-toggle”
• Un div que tiene dentro los elementos del menú, y tiene la clase “collapse” y “navbar-collapse”

El div que tiene los elementos del menú puede tener la clase “show” y si la tiene entonces se mostrará de manera extendida en móviles.

Así que en resumen hay que escuchar el click del botón y agregar/quitar la clase al contenedor.

<!-- Definición del menú -->
<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
    <a class="navbar-brand" target="_blank" href="//parzibyte.me/blog">Node y MySQL - By Parzibyte</a>
    <button aria-label="Mostrar u ocultar menú" class="navbar-toggler" id="botonMenu" type="button">
        <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="menu">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item">
                <a class="nav-link" href="/productos">Ver</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="/productos/agregar">Agregar</a>
            </li>
        </ul>
    </div>
</nav>
<script type="text/javascript">
    // Tomado de https://github.com/parzibyte/cotizaciones_web/blob/master/js/cotizaciones.js#L2
    document.addEventListener("DOMContentLoaded", () => {
        const menu = document.querySelector("#menu"),
            botonMenu = document.querySelector("#botonMenu");
        if (menu) {
            botonMenu.addEventListener("click", () => menu.classList.toggle("show"));
        }
    });
</script>

En este caso le agregué un id a cada elemento para hacer las cosas más fáciles.

Cuando se hace click en el botón, el menú se muestra y oculta en móviles, usando JavaScript puro. Todo esto se logra escuchando el click del botón y, en su ejecución, al elemento intercambiarle la clase “show”; es decir, si la tiene se remueve, y si no, se agrega.

Por cierto, el ejemplo está basado en una plantilla de Bootstrap.