Dropdown
Usage
A dropdown menu is a toggleable menu that allows the user to choose one value from a predefined list:
Drop Down
<div class="dropdown btn primary">
<div>
Drop Down
</div>
<ul class="dropdown-menu">
<li><a href="#!">Link 2</a></li>
<li><a href="#!">Link 3</a></li>
<li><a href="#!">Link 4</a></li>
</ul>
</div>
Multilevel Dropdown
You can create mutlilevel Dropdown Menu using Butter Cake.
Can change inner dropdown alignment to left or right by adding .dropdown-right
or .dropdown-left
class to .inner-dropdown
, Drop downs are responsive below 790px
.
Drop Down Right
<div class="dropdown btn primary">
<div>
Drop Down Right
</div>
<ul class="dropdown-menu">
<li><a href="#!">Link 2</a></li>
<li><a href="#!">Link 3</a></li>
<!-- SECOND DROPDOWN -->
<li class="dropdown inner-dropdown dropdown-right">
<a href="#!">Drop Down</a>
<ul class="dropdown-menu">
<li><a href="#!">Link 2</a></li>
<li><a href="#!">Link 3</a></li>
</ul>
</li>
</ul>
</div>
Dropdown Left Aligned
Drop Down Right
<div class="dropdown btn primary">
<div>
Drop Down Right
</div>
<ul class="dropdown-menu">
<li><a href="#!">Link 2</a></li>
<li><a href="#!">Link 3</a></li>
<!-- SECOND DROPDOWN -->
<li class="dropdown inner-dropdown dropdown-left">
<a href="#!">Drop Down</a>
<ul class="dropdown-menu">
<li><a href="#!">Link 2</a></li>
<li><a href="#!">Link 3</a></li>
</ul>
</li>
</ul>
</div>
Dropdown Nested
You can keep nesting Multilevel Dropdown Endlessly
Drop Down
<div class="dropdown btn primary">
<div>
Drop Down
</div>
<ul class="dropdown-menu">
<li><a href="#!">Link 2</a></li>
<li><a href="#!">Link 3</a></li>
<!-- SECOND DROPDOWN -->
<li class="dropdown inner-dropdown dropdown-right">
<a href="#!">Drop Down</a>
<ul class="dropdown-menu">
<li><a href="#!">Link 2</a></li>
<li><a href="#!">Link 3</a></li>
<!-- THIRD DROPDOWN -->
<li class="dropdown inner-dropdown dropdown-right">
<a href="#!">Drop Down</a>
<ul class="dropdown-menu">
<li><a href="#!">Link 2</a></li>
<li><a href="#!">Link 3</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
Contact us
Report Bug
Request Feature
Submit Work