Dropdown & Dropup

All modular elements can be readily used and customized in every layout across pages.

Semantic UI dropdown

It also works perfectly as dropup when it placed at the bottom of the visible screen.

All Categories
All Categories
Digital
Animation
Print
HTML
<div class="ui selection dropdown">
	<input type="hidden"/><i class="dropdown icon"></i>
	<div class="text">All Categories</div>
	<div class="menu">
		<div class="item">All Categories</div>
		<div class="item">Digital</div>
		<div class="item">Animation</div>
		<div class="item">Print</div>
	</div>
</div>
JavaScript
<script src="assets/lib/semantic-ui-dropdown/dropdown.js"></script>
<script src="assets/lib/semantic-ui-transition/transition.js"></script>
CSS
<link href="assets/lib/semantic-ui-dropdown/dropdown.css" rel="stylesheet"/>
<link href="assets/lib/semantic-ui-transition/transition.css" rel="stylesheet"/>

Bootstrap 4 dropdown and dropup

Use any button to trigger a dropdown menu by placing it within a .btn-group and providing the proper menu markup.

Single Button Dropdown
ActionAnother actionSomething else here
<div class="btn-group">
	<button data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="btn btn-secondary dropdown-toggle">Action <span class="caret"></span></button>
	<ul class="dropdown-menu">
		<li><a href="#">Action</a></li>
		<li><a href="#">Another action</a></li>
		<li><a href="#">Something else here</a></li>
		<li role="separator" class="divider"></li>
		<li><a href="#">Separated link</a></li>
	</ul>
</div>
Split Button Dropdown
ActionAnother actionSomething else here
Separated link
<div class="btn-group">
	<button class="btn btn-danger">Action</button>
	<button data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="btn btn-danger dropdown-toggle"><span class="caret"></span><span class="sr-only">Toggle Dropdown</span></button>
	<ul class="dropdown-menu">
		<li><a href="#">Action</a></li>
		<li><a href="#">Another action</a></li>
		<li><a href="#">Something else here</a></li>
		<li role="separator" class="divider"></li>
		<li><a href="#">Separated link</a></li>
	</ul>
</div>
Single Button Dropup
ActionAnother actionSomething else here
<div class="btn-group dropup">
	<button data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="btn btn-secondary dropdown-toggle">Action <span class="caret"></span></button>
	<ul class="dropdown-menu">
		<li><a href="#">Action</a></li>
		<li><a href="#">Another action</a></li>
		<li><a href="#">Something else here</a></li>
		<li role="separator" class="divider"></li>
		<li><a href="#">Separated link</a></li>
	</ul>
</div>
Split Button Dropup
ActionAnother actionSomething else here
Separated link
<div class="btn-group dropup">
	<button class="btn btn-danger">Action</button>
	<button data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="btn btn-danger dropdown-toggle"><span class="caret"></span><span class="sr-only">Toggle Dropdown</span></button>
	<ul class="dropdown-menu">
		<li><a href="#">Action</a></li>
		<li><a href="#">Another action</a></li>
		<li><a href="#">Something else here</a></li>
		<li role="separator" class="divider"></li>
		<li><a href="#">Separated link</a></li>
	</ul>
</div>
Jump into