Curso de Bootstrap 5 desde cero [completo]

Aprende Bootstrap 5, el framework de frontend más popular, completamente desde cero paso a paso.

newsletter.cuarzo.dev/p/curso-bootstrap-5

Bootstrap 5 ofrece el componente Dropdown, que permite crear menús desplegables muy útiles para navegación y acciones adicionales en tus aplicaciones web. Aquí te explicaré cómo implementar y personalizar los Dropdowns en Bootstrap 5.

Ejemplo Básico de Dropdown

HTML Básico

<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Dropdown en Bootstrap 5</title>
  <link href="https://stackpath.bootstrapcdn.com/bootstrap/5.1.3/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <div class="container mt-5">
    <div class="dropdown">
      <button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
        Dropdown
      </button>
      <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
        <li><a class="dropdown-item" href="#">Acción 1</a></li>
        <li><a class="dropdown-item" href="#">Acción 2</a></li>
        <li><a class="dropdown-item" href="#">Acción 3</a></li>
      </ul>
    </div>
  </div>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/5.1.3/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Desglose del Código

  • Div Contenedor del Dropdown:

    • <div class="dropdown">

    • La clase dropdown indica que este contenedor es un dropdown.

  • Botón de Dropdown:

    • <button class="btn btn-primary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">

    • La clase btn btn-primary da estilo al botón.

    • dropdown-toggle convierte el botón en un toggle para el dropdown.

    • data-bs-toggle="dropdown" y aria-expanded="false" son necesarios para la accesibilidad y funcionalidad del dropdown.

  • Menú del Dropdown:

    • <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">

    • La clase dropdown-menu define el contenedor del menú.

    • aria-labelledby="dropdownMenuButton" enlaza el menú al botón correspondiente.

  • Elementos del Menú:

    • <li><a class="dropdown-item" href="#">Acción 1</a></li>

    • La clase dropdown-item se aplica a cada enlace del menú.

Variaciones del Dropdown

Botón con Dropdown Separado

<div class="btn-group">
  <button type="button" class="btn btn-primary">Acción</button>
  <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-bs-toggle="dropdown" aria-expanded="false">
    <span class="visually-hidden">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Acción 1</a></li>
    <li><a class="dropdown-item" href="#">Acción 2</a></li>
    <li><a class="dropdown-item" href="#">Acción 3</a></li>
  </ul>
</div>
<div class="dropdown">
  <a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown Enlace
  </a>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuLink">
    <li><a class="dropdown-item" href="#">Acción 1</a></li>
    <li><a class="dropdown-item" href="#">Acción 2</a></li>
    <li><a class="dropdown-item" href="#">Acción 3</a></li>
  </ul>
</div>

Opciones de Tamanos y Colores

Botones Grandes y Pequeños

<div class="dropdown">
  <button class="btn btn-lg btn-primary dropdown-toggle" type="button" id="dropdownLargeButton" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown Grande
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownLargeButton">
    <li><a class="dropdown-item" href="#">Acción 1</a></li>
    <li><a class="dropdown-item" href="#">Acción 2</a></li>
    <li><a class="dropdown-item" href="#">Acción 3</a></li>
  </ul>
</div>

<div class="dropdown mt-3">
  <button class="btn btn-sm btn-primary dropdown-toggle" type="button" id="dropdownSmallButton" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown Pequeño
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownSmallButton">
    <li><a class="dropdown-item" href="#">Acción 1</a></li>
    <li><a class="dropdown-item" href="#">Acción 2</a></li>
    <li><a class="dropdown-item" href="#">Acción 3</a></li>
  </ul>
</div>
<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownDarkButton" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown Oscuro
  </button>
  <ul class="dropdown-menu dropdown-menu-dark" aria-labelledby="dropdownDarkButton">
    <li><a class="dropdown-item" href="#">Acción 1</a></li>
    <li><a class="dropdown-item" href="#">Acción 2</a></li>
    <li><a class="dropdown-item" href="#">Acción 3</a></li>
  </ul>
</div>

Alineación del Menú del Dropdown

<div class="dropup">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropupButton" data-bs-toggle="dropdown" aria-expanded="false">
    Dropup
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropupButton">
    <li><a class="dropdown-item" href="#">Acción 1</a></li>
    <li><a class="dropdown-item" href="#">Acción 2</a></li>
    <li><a class="dropdown-item" href="#">Acción 3</a></li>
  </ul>
</div>

Dropdown Abriendo hacia la Derecha o Izquierda

<div class="dropright">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="droprightButton" data-bs-toggle="dropdown" aria-expanded="false">
    Dropright
  </button>
  <ul class="dropdown-menu" aria-labelledby="droprightButton">
    <li><a class="dropdown-item" href="#">Acción 1</a></li>
    <li><a class="dropdown-item" href="#">Acción 2</a></li>
    <li><a class="dropdown-item" href="#">Acción 3</a></li>
  </ul>
</div>

<div class="dropleft mt-3">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropleftButton" data-bs-toggle="dropdown" aria-expanded="false">
    Dropleft
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropleftButton">
    <li><a class="dropdown-item" href="#">Acción 1</a></li>
    <li><a class="dropdown-item" href="#">Acción 2</a></li>
    <li><a class="dropdown-item" href="#">Acción 3</a></li>
  </ul>
</div>

Personalización del Contenido del Dropdown

Formulario en el Dropdown

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownFormButton" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown con Formulario
  </button>
  <div class="dropdown-menu p-4">
    <form>
      <div class="mb-3">
        <label for="exampleDropdownFormEmail1" class="form-label">Correo electrónico</label>
        <input type="email" class="form-control" id="exampleDropdownFormEmail1" placeholder="[email protected]">
      </div>
      <div class="mb-3">
        <label for="exampleDropdownFormPassword1" class="form-label">Contraseña</label>
        <input type="password" class="form-control" id="exampleDropdownFormPassword1" placeholder="Contraseña">
      </div>
      <div class="form-check mb-3">
        <input type="checkbox" class="form-check-input" id="dropdownCheck">
        <label class="form-check-label" for="dropdownCheck">
          Recordarme
        </label>
      </div>
      <button type="submit" class="btn btn-primary">Iniciar sesión</button>
    </form>
  </div>
</div>

Menú con Header y Divider

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownHeaderButton" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown con Header
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownHeaderButton">
    <li><h6 class="dropdown-header">Encabezado</h6></li>
    <li><a class="dropdown-item" href="#">Acción 1</a></li>
    <li><a class="dropdown-item" href="#">Acción 2</a></li>
    <li><hr class="dropdown-divider"></li>
    <li><a class="dropdown-item" href="#">Acción separada</a></li>
  </ul>
</div>

Alineación del Menú Basada en el Tamaño de Pantalla

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownResponsiveButton" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown Responsivo
  </button>
  <ul class="dropdown-menu dropdown-menu-lg-end" aria-labelledby="dropdownResponsiveButton">
    <li><a class="dropdown-item" href="#">Acción 1</a></li>
    <li><a class="dropdown-item" href="#">Acción 2</a></li>
    <li><a class="dropdown-item" href="#">Acción 3</a></li>
  </ul>
</div>

Ejemplos de Autocierre

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownAutoCloseButton" data-bs-toggle="dropdown" aria-expanded="false" data-bs-auto-close="inside">
    Dropdown Auto-Close Inside
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownAutoCloseButton">
    <li><a class="dropdown-item" href="#">Acción 1</a></li>
    <li><a class="dropdown-item" href="#">Acción 2</a></li>
    <li><a class="dropdown-item" href="#">Acción 3</a></li>
  </ul>
</div>

Conclusión

El componente Dropdown en Bootstrap 5 es extremadamente versátil y se puede personalizar de muchas maneras para satisfacer las necesidades de cualquier proyecto. Desde menús simples hasta formularios complejos y controles de navegación, los Dropdowns de Bootstrap 5 pueden hacer que tu sitio web sea más interactivo y fácil de usar.

Reply

Avatar

or to participate

Sigue leyendo

© 2026 Cuarzo.dev.
Report abusePrivacy policyTerms of use
beehiivPowered by beehiiv