Dropdown
eCommerce dropdown
Dropdown component designed for eCommerce projects.
Basic example
<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
<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 -->
Questions or feedback?
Let us know