Edit these docs

Dropdown

eCommerce dropdown

Dropdown component designed for eCommerce projects.

Basic example

Action Another action Something else here 


        <div class="dropdown">
          <a class="btn btn-primary dropdown-toggle" href="#!" role="button" id="dropdownMenuLink"
            data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            Dropdown link
          </a>

          <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
            <a class="dropdown-item" href="#!">Action</a>
            <a class="dropdown-item" href="#!">Another action</a>
            <a class="dropdown-item" href="#!">Something else here</a>
          </div>
        </div>

Colorful hover in dropdown menu

Action Another action Something else here 


        <div class="dropdown">
          <a class="btn btn-primary dropdown-toggle" href="#!" role="button" id="dropdownMenuLink"
            data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            Dropdown link
          </a>

          <div class="dropdown-menu dropdown-primary" aria-labelledby="dropdownMenuLink">
            <a class="dropdown-item" href="#!">Action</a>
            <a class="dropdown-item" href="#!">Another action</a>
            <a class="dropdown-item" href="#!">Something else here</a>
          </div>
        </div>

Language dropdown

You can find all available flags in our flag documentation.



          <!-- Navbar -->
          <nav class="navbar navbar-expand-md navbar-light">

            <!-- Collapse button -->
            <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#basicExampleNav2"
              aria-controls="basicExampleNav2" aria-expanded="false" aria-label="Toggle navigation">
              <span class="navbar-toggler-icon"></span>
            </button>

            <!-- Links -->
            <div class="collapse navbar-collapse" id="basicExampleNav2">

              <!-- Right -->
              <ul class="navbar-nav ml-auto">
                <li class="nav-item dropdown">
                  <a class="nav-link dropdown-toggle waves-effect" id="navbarDropdownMenuLink3" data-toggle="dropdown"
                    aria-haspopup="true" aria-expanded="true">
                    <i class="united kingdom flag m-0"></i>
                  </a>
                  <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownMenuLink">
                    <a class="dropdown-item waves-effect">
                      <i class="united kingdom flag "></i>English
                      <i class="fa fa-check ml-2"></i>
                    </a>
                    <a class="dropdown-item waves-effect">
                      <i class="poland flag"></i>Polski
                    </a>
                    <a class="dropdown-item waves-effect">
                      <i class="china flag"></i>中文
                    </a>
                    <a class="dropdown-item waves-effect">
                      <i class="japan flag"></i>日本語
                    </a>
                    <a class="dropdown-item waves-effect">
                      <i class="germany flag"></i>Deutsch
                    </a>
                    <a class="dropdown-item waves-effect">
                      <i class="france flag"></i>Français
                    </a>
                    <a class="dropdown-item waves-effect">
                      <i class="spain flag"></i>Español
                    </a>
                    <a class="dropdown-item waves-effect">
                      <i class="russia flag"></i>Русский
                    </a>
                    <a class="dropdown-item waves-effect">
                      <i class="portugal flag"></i>Português
                    </a>
                    <div class="dropdown-divider"></div>
                    <a class="dropdown-item waves-effect">
                      Help to translate
                    </a>
                  </div>
                </li>
              </ul>

            </div>
            <!-- Links -->

          </nav>
          <!-- Navbar -->