Boostrap 4 beta and Bootstrap Vue Navbar

HTML

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
<link rel="stylesheet" href="//unpkg.com/tether@latest/dist/css/tether.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/list.js/1.5.0/list.min.js"></script>
<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown
  </button>
  <div class="dropdown-menu" aria-labelledby="dropdownMenu2" id="dropdown-sorted-list">
  <ul class="dropdown-menu-list list">
    <li><button class="dropdown-item dropdown-item-name" type="button">Action</button></li>
     <li><button class="dropdown-item dropdown-item-name" type="button">Another action</button></li>
  </ul>
     <input type="text" class="form-control dropdown-item search" placeholder="Filter" aria-label="Filter" aria-describedby="basic-addon1">
  </div>
</div>

CSS

.dropdown-menu-list {
  list-style-type: none;
  padding-left: 0;
}

JavaScript

$(document).ready(function() {
var options = {
    valueNames: [ 'dropdown-item-name']
};

var hackerList = new List('dropdown-sorted-list', options);
});