Introducción
Bootstrap 5 simplifica mucho la creación de menús desplegables o dropdowns, pero no proporciona soporte directo para crear dropdowns anidados (es decir, un dropdown dentro de otro dropdown). En este tutorial, te mostraremos cómo crear estos dropdowns anidados utilizando Bootstrap 5 y añadiendo un poco de CSS y JavaScript personalizados.
Paso 1: Estructura básica de un Dropdown
Primero, necesitamos crear un dropdown básico utilizando Bootstrap 5. Bootstrap 5 utiliza las clases dropdown, dropdown-toggle, y dropdown-menu para los menús desplegables.
Código inicial:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dropdown dentro de Dropdown</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div class="container mt-5">
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
Menú principal
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<li><a class="dropdown-item" href="#">Enlace 1</a></li>
<li><a class="dropdown-item" href="#">Enlace 2</a></li>
<li><a class="dropdown-item" href="#">Enlace 3</a></li>
</ul>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
Paso 2: Añadir un Dropdown anidado
Para añadir un dropdown dentro de otro, podemos agregar una nueva lista desplegable dentro de uno de los elementos de la lista (<li>). Sin embargo, Bootstrap 5 no tiene una clase especial para manejar dropdowns anidados, así que añadiremos algo de CSS personalizado para posicionar el menú de forma correcta.
Aquí está el código con el dropdown anidado:
<div class="container mt-5">
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
Menú principal
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<li><a class="dropdown-item" href="#">Enlace 1</a></li>
<li><a class="dropdown-item" href="#">Enlace 2</a></li>
<!-- Dropdown anidado -->
<li class="dropdown-submenu">
<a class="dropdown-item dropdown-toggle" href="#">Enlace con submenú</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Subenlace 1</a></li>
<li><a class="dropdown-item" href="#">Subenlace 2</a></li>
</ul>
</li>
<li><a class="dropdown-item" href="#">Enlace 3</a></li>
</ul>
</div>
</div>
Paso 3: Añadir CSS personalizado
Para que el dropdown anidado se muestre correctamente, necesitamos usar CSS para controlar su posición. Queremos que el submenú aparezca alineado a la derecha del menú principal.
Aquí está el código CSS que necesitas agregar:
<style>
/* Estilos para dropdowns anidados */
.dropdown-submenu {
position: relative;
}
.dropdown-submenu .dropdown-menu {
top: 0;
left: 100%;
margin-top: -5px;
}
</style>
Este CSS asegura que el submenú se posicione justo al lado derecho del primer menú desplegable cuando el usuario pase el cursor por encima o haga clic.
Paso 4: Añadir JavaScript para manejar el Dropdown anidado
Bootstrap 5 usa JavaScript para controlar los menús desplegables, pero no tiene soporte para dropdowns anidados de forma nativa. Para resolver esto, necesitamos agregar una pequeña porción de JavaScript para habilitar el comportamiento del submenú.
El siguiente código JavaScript manejará el comportamiento de los dropdowns anidados, permitiendo que se abran y cierren cuando el usuario haga clic en el enlace correspondiente:
<script>
// Función para manejar el comportamiento de dropdowns anidados
document.querySelectorAll('.dropdown-submenu .dropdown-toggle').forEach(function (element) {
element.addEventListener('click', function (e) {
e.stopPropagation();
e.preventDefault();
let nextEl = this.nextElementSibling;
if (nextEl && nextEl.classList.contains('dropdown-menu')) {
nextEl.classList.toggle('show');
}
});
});
</script>
Paso 5: Código completo
A continuación te dejo el código completo con HTML, CSS y JavaScript para tener un dropdown anidado funcionando en Bootstrap 5:
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Dropdown dentro de Dropdown en Bootstrap 5</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
/* Estilos para dropdowns anidados */
.dropdown-submenu {
position: relative;
}
.dropdown-submenu .dropdown-menu {
top: 0;
left: 100%;
margin-top: -5px;
}
</style>
</head>
<body>
<div class="container mt-5">
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
Menú principal
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<li><a class="dropdown-item" href="#">Enlace 1</a></li>
<li><a class="dropdown-item" href="#">Enlace 2</a></li>
<!-- Dropdown anidado -->
<li class="dropdown-submenu">
<a class="dropdown-item dropdown-toggle" href="#">Enlace con submenú</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="#">Subenlace 1</a></li>
<li><a class="dropdown-item" href="#">Subenlace 2</a></li>
</ul>
</li>
<li><a class="dropdown-item" href="#">Enlace 3</a></li>
</ul>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script>
// Función para manejar dropdowns anidados
document.querySelectorAll('.dropdown-submenu .dropdown-toggle').forEach(function (element) {
element.addEventListener('click', function (e) {
e.stopPropagation();
e.preventDefault();
let nextEl = this.nextElementSibling;
if (nextEl && nextEl.classList.contains('dropdown-menu')) {
nextEl.classList.toggle('show');
}
});
});
</script>
</body>
</html>
En este tutorial, hemos aprendido a crear un Dropdown anidado en Bootstrap 5. Aunque Bootstrap 5 no tiene soporte nativo para dropdowns dentro de dropdowns, con un poco de CSS y JavaScript podemos lograr este efecto fácilmente. ¡Es una excelente forma de mejorar la navegabilidad de un menú con múltiples niveles!
