Dropdown - Bootstrap-Vue

https://bootstrap-vue.github.io/docs/components/dropdowns

HTML

<link rel="stylesheet" href="//unpkg.com/bootstrap@next/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="//unpkg.com/tether@latest/dist/css/tether.min.css">
<link rel="stylesheet" href="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.css">
<script src="//unpkg.com/vue@latest/dist/vue.min.js"></script>
<script src="//unpkg.com/tether@latest/dist/js/tether.min.js"></script>
<script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script>
<div id="app" class="text-center">

  <b-dropdown text="Dropdown Button sm" class="m-md-2">
    <b-dropdown-header>This is a heading</b-dropdown-header>
    <b-dropdown-item>Action</b-dropdown-item>
    <b-dropdown-item>Another action</b-dropdown-item>
    <b-dropdown-divider></b-dropdown-divider>
    <b-dropdown-item>Something else here...</b-dropdown-item>
  </b-dropdown>

  <br>
  <br>

  <b-dropdown text="Split Dropdown Button" variant="success" split class="m-md-2">
    <b-dropdown-item href="#">Action</b-dropdown-item>
    <b-dropdown-item href="#">Another action</b-dropdown-item>
    <b-dropdown-item href="#">Something else here...</b-dropdown-item>
  </b-dropdown>

  <br>
  <br>

  <b-dropdown text="Right align" variant="warning" right class="m-md-2">
    <b-dropdown-item href="#">Action</b-dropdown-item>
    <b-dropdown-item href="#">Another action</b-dropdown-item>
    <b-dropdown-item href="#">Something else here</b-dropdown-item>
  </b-dropdown>

  <br>
  <br>

  <b-dropdown text="Drop-Up" dropup variant="info" class="m-md-2">
    <b-dropdown-item href="#">Action</b-dropdown-item>
    <b-dropdown-item href="#">Another action</b-dropdown-item>
    <b-dropdown-item href="#">Something else here</b-dropdown-item>
  </b-dropdown>

</div>

CSS

#app {
  padding: 20px;
  height: 350px;
}

JavaScript

new Vue({
  el: '#app'
})