Bootstrap Dropdowns

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

Examples

Flags 
<template>
  <div class="dropdown">
    <a href="javascript:;" class="btn bg-gradient-dark dropdown-toggle " data-bs-toggle="dropdown" id="navbarDropdownMenuLink2">
        <img src="https://demos.creative-tim.com/argon-dashboard-pro/assets/img/icons/flags/US.png" /> Flags
    </a>
    <ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink2">
        <li>
            <a class="dropdown-item" href="javascript:;">
              <img src="https://demos.creative-tim.com/argon-dashboard-pro/assets/img/icons/flags/DE.png" /> Deutsch
            </a>
        </li>
        <li>
            <a class="dropdown-item" href="javascript:;">
              <img src="https://demos.creative-tim.com/argon-dashboard-pro/assets/img/icons/flags/GB.png" /> English(UK)
            </a>
        </li>
        <li>
            <a class="dropdown-item" href="javascript:;">
              <img src="https://demos.creative-tim.com/argon-dashboard-pro/assets/img/icons/flags/FR.png" /> Français
            </a>
        </li>
    </ul>
  </div>
</template>

Dropup

<template>
  <div class="btn-group dropup mt-7">
    <button type="button" class="btn bg-gradient-primary dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
      Dropup
    </button>
    <ul class="dropdown-menu px-2 py-3" aria-labelledby="dropdownMenuButton">
      <li><a class="dropdown-item border-radius-md" href="javascript:;">Action</a></li>
      <li><a class="dropdown-item border-radius-md" href="javascript:;">Another action</a></li>
      <li><a class="dropdown-item border-radius-md" href="javascript:;">Something else here</a></li>
    </ul>
  </div>
</template>

Colors

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

<template>
  <div class="dropdown">
    <button class="btn bg-gradient-primary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
      Primary
    </button>
    <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
      <li><a class="dropdown-item" href="javascript:;">Action</a></li>
      <li><a class="dropdown-item" href="javascript:;">Another action</a></li>
      <li><a class="dropdown-item" href="javascript:;">Something else here</a></li>
    </ul>
  </div>

  <div class="dropdown">
    <button class="btn bg-gradient-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
      Secondary
    </button>
    <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
      <li><a class="dropdown-item" href="javascript:;">Action</a></li>
      <li><a class="dropdown-item" href="javascript:;">Another action</a></li>
      <li><a class="dropdown-item" href="javascript:;">Something else here</a></li>
    </ul>
  </div>

  <div class="dropdown">
    <button class="btn bg-gradient-success dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
      Success
    </button>
    <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
      <li><a class="dropdown-item" href="javascript:;">Action</a></li>
      <li><a class="dropdown-item" href="javascript:;">Another action</a></li>
      <li><a class="dropdown-item" href="javascript:;">Something else here</a></li>
    </ul>
  </div>

  <div class="dropdown">
    <button class="btn bg-gradient-info dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
      Info
    </button>
    <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
      <li><a class="dropdown-item" href="javascript:;">Action</a></li>
      <li><a class="dropdown-item" href="javascript:;">Another action</a></li>
      <li><a class="dropdown-item" href="javascript:;">Something else here</a></li>
    </ul>
  </div>

  <div class="dropdown">
    <button class="btn bg-gradient-warning dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
      Warning
    </button>
    <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
      <li><a class="dropdown-item" href="javascript:;">Action</a></li>
      <li><a class="dropdown-item" href="javascript:;">Another action</a></li>
      <li><a class="dropdown-item" href="javascript:;">Something else here</a></li>
    </ul>
  </div>

  <div class="dropdown">
    <button class="btn bg-gradient-danger dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
      Danger
    </button>
    <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
      <li><a class="dropdown-item" href="javascript:;">Action</a></li>
      <li><a class="dropdown-item" href="javascript:;">Another action</a></li>
      <li><a class="dropdown-item" href="javascript:;">Something else here</a></li>
    </ul>
  </div>
</template>