BootstrapVue Dropdowns

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

Examples

Copy

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

Copy

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