Menús Desplegables

<div class="dropdown">

  <!-- Botón que abre el menú -->
  <button class="btn btn-marca"
          data-dropdown-toggle="mi-menu"
          aria-haspopup="true"
          aria-expanded="false">
    Acciones
    <!-- SVG chevron -->
  </button>

  <div class="dropdown-menu"
       id="mi-menu"
       role="menu">

    <div class="dropdown-header">Sección</div>

    <button class="dropdown-item"
            role="menuitem">
      <!-- SVG ícono -->
      Opción 1
    </button>

    <div class="dropdown-divider"></div>

    <!-- Item peligroso -->
    <button class="dropdown-item danger"
            role="menuitem">
      Eliminar
    </button>

  </div>
</div>

<div class="dropdown btn-split">
  <!-- Botón de acción principal -->
  <button class="btn btn-marca">Guardar</button>

  <!-- Botón separador con flecha -->
  <button class="btn btn-marca btn-toggle"
          data-dropdown-toggle="split-menu"
          aria-haspopup="true"
          aria-expanded="false"
          aria-label="Más opciones">
    <!-- SVG chevron -->
  </button>

  <div class="dropdown-menu"
       id="split-menu"
       role="menu">
    <button class="dropdown-item" role="menuitem">
      Guardar como borrador
    </button>
    <button class="dropdown-item" role="menuitem">
      Guardar y publicar
    </button>
  </div>
</div>

<!-- Solo cambiar clase: dropdown → dropup -->
<div class="dropdown dropup">
  <button class="btn btn-marca"
          data-dropdown-toggle="mi-dropup"
          aria-haspopup="true"
          aria-expanded="false">
    Abrir arriba
  </button>
  <div class="dropdown-menu" id="mi-dropup" role="menu">
    <button class="dropdown-item" role="menuitem">Opción</button>
  </div>
</div>

<!-- Variantes direccionales -->
<div class="dropdown dropend">...</div>  <!-- abre a la derecha -->
<div class="dropdown dropstart">...</div> <!-- abre a la izquierda -->