BootstrapVue Dropdowns

Toggle contextual overlays for displaying lists of links and more with the BootstrapVue dropdown plugin.


Examples

<div>
  <b-dropdown id="dropdown-1" text="Regular" class="m-md-2">
    <b-dropdown-item>Action</b-dropdown-item>
    <b-dropdown-item>Another action</b-dropdown-item>
    <b-dropdown-item>Something else here</b-dropdown-item>
  </b-dropdown>
</div>

<div>
  <b-dropdown id="dropdown-2" variant="dark" class="m-md-2">
    <template v-slot:button-content>
    <img src="https://demos.creative-tim.com/argon-dashboard-pro-bs4/assets/img/icons/flags/US.png" /> Flags
    </template>
    <b-dropdown-item><img src="https://demos.creative-tim.com/argon-dashboard-pro-bs4/assets/img/icons/flags/DE.png" /> Deutsch</b-dropdown-item>
    <b-dropdown-item>  <img src="https://demos.creative-tim.com/argon-dashboard-pro-bs4/assets/img/icons/flags/GB.png" /> English(UK)</b-dropdown-item>
    <b-dropdown-item>  <img src="https://demos.creative-tim.com/argon-dashboard-pro-bs4/assets/img/icons/flags/FR.png" /> Français</b-dropdown-item>
  </b-dropdown>
</div>

Colors

The best part is you can do this with any button variant, too:

<div>
  <b-dropdown id="dropdown-1" variant="primary" text="Primary" class="m-md-2">
    <b-dropdown-item>Action</b-dropdown-item>
    <b-dropdown-item>Another action</b-dropdown-item>
    <b-dropdown-item>Something else here</b-dropdown-item>
    <b-dropdown-divider></b-dropdown-divider>
    <b-dropdown-item active>Separated link</b-dropdown-item>
  </b-dropdown>

  <b-dropdown id="dropdown-1" variant="secondary" text="Secondary" class="m-md-2">
    <b-dropdown-item>Action</b-dropdown-item>
    <b-dropdown-item>Another action</b-dropdown-item>
    <b-dropdown-item>Something else here</b-dropdown-item>
    <b-dropdown-divider></b-dropdown-divider>
    <b-dropdown-item active>Separated link</b-dropdown-item>
  </b-dropdown>

  <b-dropdown id="dropdown-1" variant="success" text="Success" class="m-md-2">
    <b-dropdown-item>Action</b-dropdown-item>
    <b-dropdown-item>Another action</b-dropdown-item>
    <b-dropdown-item>Something else here</b-dropdown-item>
    <b-dropdown-divider></b-dropdown-divider>
    <b-dropdown-item active>Separated link</b-dropdown-item>
  </b-dropdown>

  <b-dropdown id="dropdown-1" variant="info" text="Info" class="m-md-2">
    <b-dropdown-item>Action</b-dropdown-item>
    <b-dropdown-item>Another action</b-dropdown-item>
    <b-dropdown-item>Something else here</b-dropdown-item>
    <b-dropdown-divider></b-dropdown-divider>
    <b-dropdown-item active>Separated link</b-dropdown-item>
  </b-dropdown>

  <b-dropdown id="dropdown-1" variant="warning" text="Warning" class="m-md-2">
    <b-dropdown-item>Action</b-dropdown-item>
    <b-dropdown-item>Another action</b-dropdown-item>
    <b-dropdown-item>Something else here</b-dropdown-item>
    <b-dropdown-divider></b-dropdown-divider>
    <b-dropdown-item active>Separated link</b-dropdown-item>
  </b-dropdown>

  <b-dropdown id="dropdown-1" variant="danger" text="Danger" class="m-md-2">
    <b-dropdown-item>Action</b-dropdown-item>
    <b-dropdown-item>Another action</b-dropdown-item>
    <b-dropdown-item>Something else here</b-dropdown-item>
    <b-dropdown-divider></b-dropdown-divider>
    <b-dropdown-item active>Separated link</b-dropdown-item>
  </b-dropdown>
</div>

Props

PROP NAME TYPE DEFAULT DESCRIPTION
tag String div Dropdown html tag (e.g div, ul etc)
titleTag String button Dropdown title (toggle) html tag
title String N/A Dropdown title
direction String down Dropdown menu direction (up-down)
icon String N/A Dropdown icon
titleClasses String / Object / Array N/A Title css classes
menuClasses String / Object N/A Menu css classes
menuOnRight Boolean N/A Whether menu should appear on the right
hasToggle Boolean true Whether dropdown has arrow icon shown

If you want to see more examples and properties please check the official BootstrapVue Documentation.