Cómo agregar submenús desplegables a Bootstrap

Mateo G. -

Problema: Agregar submenús desplegables a Bootstrap

Bootstrap ofrece componentes de navegación, incluyendo menús desplegables. Sin embargo, crear submenús desplegables anidados dentro de estos menús no es una función integrada. Esta limitación puede dificultar la organización de estructuras de navegación complejas en sitios web basados en Bootstrap.

Implementación de submenús desplegables

Solución basada en CSS para Bootstrap 5

Para agregar submenús desplegables en Bootstrap 5, puedes usar CSS personalizado. Este método se centra en posicionar los submenús y añadir efectos de desplazamiento para los elementos del menú.

Aquí tienes un ejemplo de CSS para posicionar submenús:

.dropdown-submenu {
  position: relative;
}

.dropdown-submenu .dropdown-menu {
  top: 0;
  left: 100%;
  margin-top: -1px;
}

Este CSS posiciona el submenú a la derecha de su elemento padre en el menú. Para añadir efectos de desplazamiento, incluye lo siguiente:

.navbar-nav li:hover > ul.dropdown-menu {
  display: block;
}

Este CSS muestra el submenú cuando se pasa el cursor sobre el elemento padre del menú.

Ejemplo: Evitar desbordamiento de submenús

Para evitar que los submenús se desborden del área visible en pantallas más pequeñas, añade este CSS:

@media (max-width: 768px) {
  .dropdown-submenu .dropdown-menu {
    left: 0;
    top: 100%;
  }
}

Esto posiciona el submenú debajo de su elemento padre en pantallas más pequeñas.

Enfoque mejorado con JavaScript

Para tener más control sobre el comportamiento de los submenús, puedes usar JavaScript. Este método ayuda a evitar que los submenús se cierren y añade funcionalidad de visualización alternada.

Aquí tienes un ejemplo de JavaScript:

let dropdowns = document.querySelectorAll('.dropdown-toggle')
dropdowns.forEach((dd) => {
  dd.addEventListener('click', function (e) {
    var el = this.nextElementSibling
    el.style.display = el.style.display === 'block' ? 'none' : 'block'
  })
})

Este script evita que el submenú se cierre cuando el menú desplegable padre está abierto. Alterna la visualización del submenú entre 'block' y 'none' cuando se hace clic.

Métodos Alternativos

Submenús Desplegables de Barra de Navegación Solo con CSS

Puedes crear submenús desplegables de barra de navegación sin JavaScript. Este método utiliza CSS para dar estilo a los menús desplegables anidados y activar submenús al pasar el cursor.

Para dar estilo a los menús desplegables anidados, usa este CSS:

.dropdown-submenu {
  position: relative;
}

.dropdown-submenu .dropdown-menu {
  top: 0;
  left: 100%;
  margin-top: -1px;
}

Este CSS coloca el submenú a la derecha de su elemento de menú principal, creando un aspecto anidado.

Para activar submenús al pasar el cursor, añade este CSS:

.navbar-nav li:hover > ul.dropdown-menu {
  display: block;
}

Esta regla CSS muestra el submenú cuando pasas el cursor sobre el elemento de menú principal, creando una experiencia de navegación fluida.

Ejemplo: Mejora la Accesibilidad

Para hacer tus submenús solo con CSS más accesibles, añade soporte para navegación por teclado. Puedes hacer esto usando la pseudo-clase :focus junto con :hover en tus reglas CSS.

Adaptación a Diferentes Versiones de Bootstrap

Implementación de Submenú en Bootstrap 4

Bootstrap 4 necesita cambios en CSS para agregar submenús desplegables. Aquí hay un ejemplo de CSS para Bootstrap 4:

.navbar-nav li:hover > ul.dropdown-menu {
    display: block;
}
.dropdown-submenu {
    position: relative;
}
.dropdown-submenu > .dropdown-menu {
    top: 0;
    left: 100%;
    margin-top: -6px;
}

Este CSS coloca el submenú a la derecha de su elemento padre y lo muestra al pasar el mouse.

Para opciones de submenú basadas en clics, puedes usar esta función JavaScript:

$('.dropdown-menu a.dropdown-toggle').on('click', function(e) {
  if (!$(this).next().hasClass('show')) {
    $(this).parents('.dropdown-menu').first().find('.show').removeClass('show');
  }
  var $subMenu = $(this).next('.dropdown-menu');
  $subMenu.toggleClass('show');
  return false;
});

Este script alterna la clase 'show' en el submenú al hacer clic, permitiendo la navegación basada en clics.

Ejemplo: Mejora de Accesibilidad

Para mejorar la accesibilidad, agrega atributos ARIA a los elementos de tu menú desplegable. Por ejemplo:

<li class="nav-item dropdown">
  <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Desplegable
  </a>
  <div class="dropdown-menu" aria-labelledby="navbarDropdown">
    <!-- Elementos del desplegable aquí -->
  </div>
</li>

Esto ayuda a los lectores de pantalla a entender la estructura y el comportamiento de tus menús desplegables.

Soporte Heredado para Bootstrap 3

Para Bootstrap 3, necesitas CSS personalizado para crear submenús desplegables. Aquí tienes un ejemplo:

.dropdown-submenu {
    position: relative;
}
.dropdown-submenu > .dropdown-menu {
    top: 0;
    left: 100%;
    margin-top: -6px;
    margin-left: -1px;
    border-radius: 0 6px 6px 6px;
}
.dropdown-submenu:hover > .dropdown-menu {
    display: block;
}

Este CSS coloca el submenú y lo muestra al pasar el mouse.

La estructura HTML para menús desplegables anidados en Bootstrap 3 se ve así:

<li class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Desplegable <b class="caret"></b></a>
    <ul class="dropdown-menu">
        <li class="dropdown-submenu">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Submenú</a>
            <ul class="dropdown-menu">
                <li><a href="#">Elemento de submenú 1</a></li>
                <li><a href="#">Elemento de submenú 2</a></li>
            </ul>
        </li>
    </ul>
</li>

Esta estructura crea un menú desplegable con un submenú anidado, permitiendo la navegación multinivel en Bootstrap 3.