# 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

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

##### Jump into