6 Dropdowns

6.1 Dropdown 1

<div class="dropdown">
 <div class="dropdown-menu" aria-labelledby="dropdownMenu1">
   <a class="dropdown-item" href="#">Action</a>
   <a class="dropdown-item" href="#">Another action</a>
   <a class="dropdown-item" href="#">Something else here</a>
 </div>
</div>
<div class="dropdown open">
 <button class="btn btn-tertiary dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-// haspopup="true" aria-expanded="false">
   Dropdown
 </button>
 <div class="dropdown-menu" aria-labelledby="dropdownMenu1">
   <a class="dropdown-item" href="#">Action</a>
   <a class="dropdown-item" href="#">Another action</a>
   <a class="dropdown-item" href="#">Something else here</a>
 </div>
</div>
<br/><br/><br/>

6.2 Dropdown 2

<div class="ps-dropdown dropdown open">
  <span type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="js-selected-item selected-item">Categories</span> <i class="material-icons arrow-down">keyboard_arrow_down</i>
  </span>
  <div class="ps-dropdown-menu dropdown-menu" aria-labelledby="dropdownMenu1">
    <ul class="items-list js-items-list">
     <li><a class="dropdown-item" data-item="All">All<span>210</span></a></li>
     <li><a class="dropdown-item" data-item="Category">Category<span>210</span></a></li>
     <li><a class="dropdown-item" data-item="Category 2">Category 2<span>210</span></a></li>
     <li><a class="dropdown-item" data-item="Category 3">Category 3<span>210</span></a></li>
     <li><a class="dropdown-item" data-item="Category 4">Category 4<span>210</span></a></li>
     <li><a class="dropdown-item" data-item="Category 5">Category 5<span>210</span></a></li>
    </ul>
  </div>
</div>
<script type="text/javascript">
 $(document).ready(function(){
  $('.js-items-list').on('click',function (e) {
    $('.selected').removeClass('selected');
    $('.js-selected-item').text($(e.target).data('item'));
    $(e.target).addClass('selected');
    e.stopPropagation();
  });
});
</script>