Angular Dropdowns

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


Examples

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

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