Desplegable

Descubre los desplegables de Quickly para mostrar listas de enlaces y más con superposiciones contextuales. Simplifica la navegación y la interacción del usuario en tus proyectos web.

Desplegable

Con esta simple combinación de etiquetas y atributos personalizados, puedes convertir cualquier botón en un menú desplegable. Utiliza el atributo data-Qy-toggle="dropdown" para implementar esta funcionalidad. Además, esta característica puede ser aplicada tanto a botones como a enlaces. A continuación, te mostramos cómo hacerlo.

.dropdown

HTML

                                    
    <!-- DESPLEGABLE BOTÓN -->                                                                                     
    <div class="dropdown">
        <button class="btn btn-primary" type="button" data-Qy-toggle="dropdown" aria-expanded="false">
            Selección botón <svg class="ml-2 ico ico-white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M0 7.33l2.829-2.83 9.175 9.339 9.167-9.339 2.829 2.83-11.996 12.17z"/></svg> 
        </button>
        <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="#">Item Uno</a></li>
            <li><a class="dropdown-item" href="#">Item Dos</a></li>
            <li><a class="dropdown-item" href="#">Item Tres</a></li>
        </ul>
    </div>

    <!-- DESPLEGABLE ENLACE -->                                                         
    <div class="dropdown">
        <a class="btn btn-secondary" href="#" role="button" data-Qy-toggle="dropdown" aria-expanded="false">
            Selección Link <svg class="ml-2 ico ico-white" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M0 7.33l2.829-2.83 9.175 9.339 9.167-9.339 2.829 2.83-11.996 12.17z"/></svg> 
        </a>
        <ul class="dropdown-menu">
            <li><a class="dropdown-item" href="#">Item Uno</a></li>
            <li><a class="dropdown-item" href="#">Item Dos</a></li>
            <li><a class="dropdown-item" href="#">Item Tres</a></li>
        </ul>
    </div>