Product Name

Dropdown

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

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