Dropdown
Gender
Show Code
<select class="ui dropdown">
<option value="">Gender</option>
<option value="1">Male</option>
<option value="0">Female</option>
</select>
<script type="text/javascript">
$('.ui.dropdown').dropdown();
</script>
Dropdown using <div>
Show Code
<div class="ui selection dropdown">
<input type="hidden" name="gender">
<i class="dropdown icon"></i>
<div class="default text">Gender</div>
<div class="menu">
<div class="item" data-value="1">Male</div>
<div class="item" data-value="0">Female</div>
</div>
</div>
<script type="text/javascript">
$('.ui.dropdown').dropdown();
</script>
Searchable Dropdown
Show Code
<div id="search" class="ui search selection dropdown">
<input type="hidden" name="country">
<div class="default text">Select Country</div>
<i class="dropdown icon"></i>
<div class="menu">
<div class="header">
HEADER 1
</div>
<div class="scrolling menu">
<div class="item" data-value="af">Afghanistan stan</div>
<div class="item" data-value="ax">Aland Islands</div>
...
</div>
<div class="header">
HEADER 2
</div>
<div class="scrolling menu">
<div class="item" data-value="am">Armenia</div>
<div class="item" data-value="aw">Aruba</div>
...
</div>
...
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
$('#search').dropdown({
fullTextSearch: 'exact',
match: 'text'
});
})
</script>
Floating Dropdown
Select a State
Show Code
<select class="ui floating dropdown">
<option value="">Select a State</option>
<option value="0">Alabama</option>
<option value="1">Alaska</option>
...
</select>
<script type="text/javascript">
$('.ui.dropdown').dropdown();
</script>
Basic Floating
Select a State
Show Code
<div class="ui dropdown floating button">
<span class="text">Select a State</span>
<i class="dropdown icon"></i>
<div class="menu">
<div class="item">
<span class="text">All</span>
</div>
<div class="item">
<span class="text">Alabama</span>
</div>
...
</div>
</div>
<script type="text/javascript">
$('.ui.dropdown').dropdown();
</script>
Floating dropdown using <div>
Select a State
Show Code
<div class="ui dropdown floating">
<span class="text">Select a State</span>
<i class="dropdown icon"></i>
<div class="menu">
<div class="item">
<span class="text">All</span>
</div>
<div class="item">
<span class="text">Alabama</span>
</div>
<div class="item">
<span class="text">Alaska</span>
</div>
...
</div>
</div>
<script type="text/javascript">
$('.ui.dropdown').dropdown();
</script>