Google AMP Dropdowns Library

Google AMP Dropdowns

Dropdown colors by adding .btn-light .btn-dark .btn-primary .btn-info .btn-warning .btn-success .btn-danger to the parent element.

<label class="dropdown">
  <span class="btn btn-light dropdown-toggle">Dropdown</span>
  <input type="checkbox" class="dropdown-input" id="/">
  <ul class="dropdown-menu">
    <li class="dropdown-item">...</li>
    <li class="dropdown-item">...</li>
    <li class="dropdown-item">...</li>
    <div class="dropdown-divider"></div>
    <li class="dropdown-item">
      <a href="#" title="...">...</a>
    </li>
  </ul>
</label>

Google AMP Dropdowns · Variants

Trigger dropdown menus above elements by adding .dropdown .dropup .dropleft .dropright to the parent element.

<label class="dropdown">
  <span class="btn btn-light dropdown-toggle">Dropdown</span>
  <input type="checkbox" class="dropdown-input" id="/">
  <ul class="dropdown-menu">
    <li class="dropdown-item">...</li>
    <li class="dropdown-item">...</li>
    <li class="dropdown-item">...</li>
    <div class="dropdown-divider"></div>
    <li class="dropdown-item">
      <a href="#" title="...">...</a>
    </li>
  </ul>
</label>

Google AMP Dropdowns · Sizes

Dropdowns work with button classes of all sizes.

<!-- Dropdown small -->
<label class="dropdown">
  <span class="btn btn-light btn-sm dropdown-toggle">Small</span>
  <input type="checkbox" class="dropdown-input" id="/">
  <ul class="dropdown-menu">
    <li class="dropdown-item">...</li>
    <li class="dropdown-item">...</li>
    <li class="dropdown-item">...</li>
    <div class="dropdown-divider"></div>
    <li class="dropdown-item">
      <a href="#" title="...">...</a>
    </li>
  </ul>
</label>

<!-- Dropdown large -->
<label class="dropdown">
  <span class="btn btn-light btn-lg dropdown-toggle">Large</span>
  <input type="checkbox" class="dropdown-input" id="/">
  <ul class="dropdown-menu">
    <li class="dropdown-item">...</li>
    <li class="dropdown-item">...</li>
    <li class="dropdown-item">...</li>
    <div class="dropdown-divider"></div>
    <li class="dropdown-item">
      <a href="#" title="...">...</a>
    </li>
  </ul>
</label>