Angular Dropdowns

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

Examples

Action Another action Something else here
Flags 
<div class="mr-1 dropdown" dropdown>
    <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" dropdownToggle>
      Regular
    </button>
    <div  aria-labelledby="dropdownMenuButton" *dropdownMenu class="dropdown-menu">
      <a class="dropdown-item" href="javascript:;">Action</a>
      <a class="dropdown-item" href="javascript:;">Another action</a>
      <a class="dropdown-item" href="javascript:;">Something else here</a>
    </div>
  </div>
  <div class="dropdown" dropdown>
    <a href="javascript:;" class="btn btn-default dropdown-toggle " id="navbarDropdownMenuLink2" dropdownToggle>
      <img src="assets/img/icons/flags/US.png" /> Flags
    </a>
    <ul  aria-labelledby="navbarDropdownMenuLink2" *dropdownMenu class="dropdown-menu">
      <li>
        <a class="dropdown-item" href="javascript:;">
          <img src="assets/img/icons/flags/DE.png" /> Deutsch
        </a>
      </li>
      <li>
        <a class="dropdown-item" href="javascript:;">
          <img src="assets/img/icons/flags/GB.png" /> English(UK)
        </a>
      </li>
      <li>
        <a class="dropdown-item" href="javascript:;">
          <img src="assets/img/icons/flags/US.png" /> United States
        </a>
      </li>
    </ul>
  </div>

Colors

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

Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link
Action Another action Something else here
Separated link 
<div class="btn-group dropdown" dropdown>
    <button type="button" class="btn btn-primary  dropdown-toggle" dropdownToggle>Primary</button>
    <div *dropdownMenu class="dropdown-menu">
      <a class="dropdown-item" href="javascript:;">Action</a>
      <a class="dropdown-item" href="javascript:;">Another action</a>
      <a class="dropdown-item" href="javascript:;">Something else here</a>
      <div class="dropdown-divider"></div>
      <a class="dropdown-item" href="javascript:;">Separated link</a>
    </div>
  </div>
  <!-- /btn-group -->
  <div class="btn-group dropdown" dropdown>
    <button type="button" class="btn btn-secondary dropdown-toggle" dropdownToggle>Secondary</button>
    <div *dropdownMenu class="dropdown-menu">
      <a class="dropdown-item" href="javascript:;">Action</a>
      <a class="dropdown-item" href="javascript:;">Another action</a>
      <a class="dropdown-item" href="javascript:;">Something else here</a>
      <div class="dropdown-divider"></div>
      <a class="dropdown-item" href="javascript:;">Separated link</a>
    </div>
  </div>
  <!-- /btn-group -->
  <div class="btn-group dropdown" dropdown>
    <button type="button" class="btn btn-success dropdown-toggle" dropdownToggle>Success</button>
    <div *dropdownMenu class="dropdown-menu">
      <a class="dropdown-item" href="javascript:;">Action</a>
      <a class="dropdown-item" href="javascript:;">Another action</a>
      <a class="dropdown-item" href="javascript:;">Something else here</a>
      <div class="dropdown-divider"></div>
      <a class="dropdown-item" href="javascript:;">Separated link</a>
    </div>
  </div>
  <!-- /btn-group -->
  <div class="btn-group dropdown" dropdown>
    <button type="button" class="btn btn-info dropdown-toggle" dropdownToggle>Info</button>
    <div *dropdownMenu class="dropdown-menu">
      <a class="dropdown-item" href="javascript:;">Action</a>
      <a class="dropdown-item" href="javascript:;">Another action</a>
      <a class="dropdown-item" href="javascript:;">Something else here</a>
      <div class="dropdown-divider"></div>
      <a class="dropdown-item" href="javascript:;">Separated link</a>
    </div>
  </div>
  <!-- /btn-group -->
  <div class="btn-group dropdown" dropdown>
    <button type="button" class="btn btn-warning dropdown-toggle" dropdownToggle>Warning</button>
    <div *dropdownMenu class="dropdown-menu">
      <a class="dropdown-item" href="javascript:;">Action</a>
      <a class="dropdown-item" href="javascript:;">Another action</a>
      <a class="dropdown-item" href="javascript:;">Something else here</a>
      <div class="dropdown-divider"></div>
      <a class="dropdown-item" href="javascript:;">Separated link</a>
    </div>
  </div>
  <!-- /btn-group -->
  <div class="btn-group dropdown" dropdown>
    <button type="button" class="btn btn-danger dropdown-toggle" dropdownToggle>Danger</button>
    <div *dropdownMenu class="dropdown-menu">
      <a class="dropdown-item" href="javascript:;">Action</a>
      <a class="dropdown-item" href="javascript:;">Another action</a>
      <a class="dropdown-item" href="javascript:;">Something else here</a>
      <div class="dropdown-divider"></div>
      <a class="dropdown-item" href="javascript:;">Separated link</a>
    </div>
  </div>