Dropdown

Una lista desplegable asociada a un elemento del DOM que permite su despliegue brindando un conjunto de opciones que se mostrarán solo cuando se las requiera.
Es parte del core de bodystyle a través de la dependencia Dynamics-Tips 3.0.0 que es la que se encargaga de poscionar todos los elementos dinámicos a través del Kernel de posicionamiento.

Inicialización

Para poder utilizar el módulo es necesario disponer del archivo bodystyle.min.js agregado al proyecto en desarrollo y luego es necesario inicializar el elemento con la función provista por la biblioteca. Recomendación Get Started. 

    // CDN : https://raw.githack.com/FedeManzano/bodystyle/refs/heads/master/dist/js/bodystyle.min.js

    // 1 OPCIÓN ESTÁTICA
    // ------------------

    // Inicializa el elemento
    // cuando estos están dispuestos de manera estática dentro del DOM
    BS.DropDownInit();

    // Desde la versión 5.0.0
    // BS.DynamicsAutoInit() // Inicializa todos los elementos dinámicos (Dropdown, Tooltips y Comentarios)

    /*******************************************************************************/

    // 2 OPCIÓN DINÁMICA
    // -----------------   

    /*
        En proyectos donde se tabaja a través de injección de elementos a través 
        de JavaScript de manera dinámica, y el elemento que se estudia en esta sección se 
        ingresa de esta manera, es necesario aplicar un retraso en la inicialización del 
        módulo con el siguiente codigo.
    */

    //Si los elementos que conforman esta funcionalidad son dinámicos 
    // Agregados a través de JS 
    window.onload = () => {
        setTimeout( () => {
            BS.DropDownInit();

            // Desde la versión 5.0.0
            // BS.DynamicsAutoInit() // Inicializa todos los elementos dinámicos (Dropdown, Tooltips y Comentarios)
        }, 100); 
    }

Muestra

Para poder utilizar este elemento hay que enlazar el disparador con la lista a desplegar por el dropdown. Para lograr hay que agregarle al disparador la clase .dropdown-toogle y el atributo data-target, luego a la lista a desplegar (que puede estar ubicada en cualquier parte del DOM) hay que agregarle la clase dropdown y un ID que coincidirá con el valor asignado al atributo data-target del disparador.
El drop utilizado en el ejemplo anterior tiene estilos modificados con clases de la biblioteca que modifican el color de fondo y el color de la letra de los enlaces. Recomendación:

Ejemplo Dropdown

Otro ejemplo de como utilizar este elemento con los estilos por default sin agregado de estilos adicionales.
Notese que el valor del data-target del disparador es igual al ID de la lista desplegable utilizada para el ejemplo.

Efecto Hover

Podemos realizar lo antes visto pero ahora con el evento HOVER del disparador, de esta dorma cuando el cursor pase por encima del disparador se mostrará la lista desplegable.
Para poder realizar esto es necesario agregarle al disparador el atributo data-evt='hover'.

Posicion

Tenemos la posibilidad de elegir la posición dende queremos que se muestra el elemento, la misma puede ser top, botton, legt y right. Para poder llevar a cabo esto es necesario agregar el atributo data-pos al disparador y la lista se mostrará en el lugar adecuado.

Destroy 5.0.0

Es posible desvincular la lógica de los Dropdown en un momento determinado para liberar recursos y mejorar la eficiencia de la página en desarrollo. Para esta tarea utilizaremos la función Destroy. 

        // Se desactivan los dropdown de la página
        BS.DropDownDestroy()

        // Desde la versión 5.0.0
        // BS.DynamicsAutoDestroy() // Destruye todos los elementos dinámicos (Dropdown, Tooltips y Comentarios)
    
        document.getElementById("desactivador").addEventListener("click", () => {
            BS.DropDownDestroy()
            BS.Toast({html: "Dropdown Destruidos", clases: ["bg-red"]})
        })
Notese que si se dirige a los dropdown definidos en esta página luego de presionar el botón "Desactivar Dordown" estos ya no funcionarán.
`r`n