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.

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
<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
<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
<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
<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>