Dropdown Module

Dropdown Module Options

Dropdown Light - Right alignment

Markup example:


                                                <div class="dropdown-module dropdown-module--right dropdown-module--light d-inline-block position-relative ml-1 ml-sm-2">

                                                <button class="dropdown-module__toggler" type="button">
                                                    <span class="flag-image">
                                                        <img src="img/flag/uk.svg" alt="flag" class="svg">
                                                    </span>
                                                </button>
                                                <!-- end of language selector button -->
            
                                                <ul class="dropdown-module-list">
                                                    <li>
                                                        <a class="dropdown-module__item d-flex align-items-center" href="#"> <span class="flag-image mr-2"><img src="img/flag/uk.svg" alt="flag" class="svg"></span>English</a>
                                                    </li>
                                                    <li>
                                                        <a class="dropdown-module__item d-flex align-items-center" href="#"> <span class="flag-image mr-2"><img src="img/flag/spain.svg" alt="flag" class="svg"></span>Español</a>
                                                    </li>
                                                    <li>
                                                        <a class="dropdown-module__item d-flex align-items-center" href="#"> <span class="flag-image mr-2"><img src="img/flag/russia.svg" alt="flag" class="svg"></span>Русский</a>
                                                    </li>
                                                    <li>
                                                        <a class="dropdown-module__item d-flex align-items-center" href="#"> <span class="flag-image mr-2"><img src="img/flag/turkey.svg" alt="flag" class="svg"></span>Türk</a>
                                                    </li>
                                                </ul>
                                            </div>

Dropdown Dark - left alignment

Markup example:


                                                    <div class="dropdown-module dropdown-module--dark d-inline-block position-relative ml-1 ml-sm-2">
        
                                                    <button class="dropdown-module__toggler" type="button">
                                                        <span class="flag-image">
                                                            <img src="img/flag/uk.svg" alt="flag" class="svg">
                                                        </span>
                                                    </button>
                                                    <!-- end of language selector button -->
                
                                                    <ul class="dropdown-module-list">
                                                        <li>
                                                            <a class="dropdown-module__item d-flex align-items-center" href="#"> <span class="flag-image mr-2"><img src="img/flag/uk.svg" alt="flag" class="svg"></span>English</a>
                                                        </li>
                                                        <li>
                                                            <a class="dropdown-module__item d-flex align-items-center" href="#"> <span class="flag-image mr-2"><img src="img/flag/spain.svg" alt="flag" class="svg"></span>Español</a>
                                                        </li>
                                                        <li>
                                                            <a class="dropdown-module__item d-flex align-items-center" href="#"> <span class="flag-image mr-2"><img src="img/flag/russia.svg" alt="flag" class="svg"></span>Русский</a>
                                                        </li>
                                                        <li>
                                                            <a class="dropdown-module__item d-flex align-items-center" href="#"> <span class="flag-image mr-2"><img src="img/flag/turkey.svg" alt="flag" class="svg"></span>Türk</a>
                                                        </li>
                                                    </ul>
                                                </div>

Dropdown Dark Blue/ Purple - Right alignment

Markup example:


                                                    <div class="dropdown-module dropdown-module--right dropdown-module--darkblue d-inline-block position-relative ml-1 ml-sm-2">
        
                                                    <button class="dropdown-module__toggler" type="button">
                                                        <span class="flag-image">
                                                            <img src="img/flag/uk.svg" alt="flag" class="svg">
                                                        </span>
                                                    </button>
                                                    <!-- end of language selector button -->
                
                                                    <ul class="dropdown-module-list">
                                                        <li>
                                                            <a class="dropdown-module__item d-flex align-items-center" href="#"> <span class="flag-image mr-2"><img src="img/flag/uk.svg" alt="flag" class="svg"></span>English</a>
                                                        </li>
                                                        <li>
                                                            <a class="dropdown-module__item d-flex align-items-center" href="#"> <span class="flag-image mr-2"><img src="img/flag/spain.svg" alt="flag" class="svg"></span>Español</a>
                                                        </li>
                                                        <li>
                                                            <a class="dropdown-module__item d-flex align-items-center" href="#"> <span class="flag-image mr-2"><img src="img/flag/russia.svg" alt="flag" class="svg"></span>Русский</a>
                                                        </li>
                                                        <li>
                                                            <a class="dropdown-module__item d-flex align-items-center" href="#"> <span class="flag-image mr-2"><img src="img/flag/turkey.svg" alt="flag" class="svg"></span>Türk</a>
                                                        </li>
                                                    </ul>
                                                </div>
Additional Class Reference
dropdown-module--light
dropdown-module--dark
dropdown-module--darkblue
dropdown-module--right