Single button dropdowns Sizing Basic exemple Headers Divider Disabled menu items Split button Alignment Multi Select Dropdown

UI Molecules

Button dropdowns

1.1 Single button dropdowns

<!-- Single button Default -->
<div class="amui-m-btn-dropdown btn-group">
  <button type="button" class="amui-a-btn is--default btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Action <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

<!-- Single button Hollow -->
<div class="amui-m-btn-dropdown btn-group">
  <button type="button" class="amui-a-btn is--hollow btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Action <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

<!-- Single button Primary -->
<div class="amui-m-btn-dropdown btn-group">
  <button type="button" class="amui-a-btn is--primary btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Action <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

<!-- Single button Secondary -->
<div class="amui-m-btn-dropdown btn-group">
  <button type="button" class="amui-a-btn is--secondary btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Action <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

<!-- Single button Disabled -->
<div class="amui-m-btn-dropdown btn-group">
  <button type="button" class="amui-a-btn is--disabled btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Action <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

<!-- Single button Success -->
<div class="amui-m-btn-dropdown btn-group">
  <button type="button" class="amui-a-btn is--success btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Action <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

<!-- Single button Warning -->
<div class="amui-m-btn-dropdown btn-group">
  <button type="button" class="amui-a-btn is--warning btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Action <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

<!-- Single button Danger -->
<div class="amui-m-btn-dropdown btn-group">
  <button type="button" class="amui-a-btn is--danger btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Action <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

1.2 Sizing

<!-- Extra small Dropdown button -->
<div class="amui-m-btn-dropdown btn-group">
  <button type="button" class="amui-a-btn is--default is--xs dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Action <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

<!-- Small Dropdown button -->
<div class="amui-m-btn-dropdown btn-group">
  <button type="button" class="amui-a-btn is--default is--sm dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Action <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

<!-- Default Dropdown button -->
<div class="amui-m-btn-dropdown btn-group">
  <button type="button" class="amui-a-btn is--default btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Action <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

<!-- Large Dropdown button -->
<div class="amui-m-btn-dropdown btn-group">
  <button type="button" class="amui-a-btn is--default is--lg dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Action <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

<!-- Extra Large Dropdown button -->
<div class="amui-m-btn-dropdown btn-group">
  <button type="button" class="amui-a-btn is--default is--xl dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Action <span class="caret"></span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

1.3 Basic exemple

<div class="amui-m-btn-dropdown dropdown">
  <button type="button" id="dropdownMenu1" class="amui-a-btn is--hollow btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Action <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
    <li><a href="#">Modifier</a></li>
    <li><a href="#">Supprimer</a></li>
  </ul>
</div>

1.4 Headers

<div class="amui-m-btn-dropdown dropdown">
  <button type="button" id="dropdownMenu2" class="amui-a-btn is--hollow btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Action <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
    <li class="dropdown-header">Dropdown header</li>
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li class="dropdown-header">Dropdown header</li>
    <li><a href="#">Another link</a></li>
  </ul>
</div>

1.5 Divider

<div class="amui-m-btn-dropdown dropdown">
  <button type="button" id="dropdownMenuDivider" class="amui-a-btn is--hollow btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Action <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuDivider">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

1.6 Disabled menu items

<div class="amui-m-btn-dropdown dropdown">
  <button type="button" id="dropdownMenu3" class="amui-a-btn is--hollow btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Action <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu3">
    <li><a href="#">Regular link</a></li>
    <li class="disabled"><a href="#">Disabled link</a></li>
    <li><a href="#">Another link</a></li>
  </ul>
</div>

1.7 Split button dropdowns


<!-- Single button Default -->
<div class="amui-m-btn-dropdown btn-group">
  <button type="button" class="amui-a-btn is--default btn">Action</button>
  <button type="button" class="amui-a-btn is--default btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="caret"></span>
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

<!-- Single button Hollow -->
<div class="amui-m-btn-dropdown btn-group">
  <button type="button" class="amui-a-btn is--hollow btn">Action</button>
  <button type="button" class="amui-a-btn is--hollow btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="caret"></span>
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

<!-- Single button Primary -->
<div class="amui-m-btn-dropdown btn-group">
  <button type="button" class="amui-a-btn is--primary btn">Action</button>
  <button type="button" class="amui-a-btn is--primary btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="caret"></span>
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

<!-- Single button Secondary -->
<div class="amui-m-btn-dropdown btn-group">
  <button type="button" class="amui-a-btn is--secondary btn">Action</button>
  <button type="button" class="amui-a-btn is--secondary btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="caret"></span>
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

<!-- Single button Disabled -->
<div class="amui-m-btn-dropdown btn-group">
  <button type="button" class="amui-a-btn is--disabled btn">Action</button>
  <button type="button" class="amui-a-btn is--disabled btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="caret"></span>
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

<!-- Single button Success -->
<div class="amui-m-btn-dropdown btn-group">
  <button type="button" class="amui-a-btn is--success btn">Action</button>
  <button type="button" class="amui-a-btn is--success btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="caret"></span>
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

<!-- Single button Warning -->
<div class="amui-m-btn-dropdown btn-group">
  <button type="button" class="amui-a-btn is--warning btn">Action</button>
  <button type="button" class="amui-a-btn is--warning btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="caret"></span>
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

<!-- Single button Danger -->
<div class="amui-m-btn-dropdown btn-group">
  <button type="button" class="amui-a-btn is--danger btn">Action</button>
  <button type="button" class="amui-a-btn is--danger btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="caret"></span>
    <span class="sr-only">Toggle Dropdown</span>
  </button>
  <ul class="dropdown-menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li role="separator" class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

1.8 Button dropdowns alignment

Par défaut, un « dropdown menu » est automatiquement positionné à 100% en haut à gauche de son parent. Ajoutez la class .dropdown-menu-right à la class .dropdown-menu pour aligner le « dropdown menu » à droite.

<div class="amui-h-text-right">
  <div class="amui-m-btn-dropdown dropdown">
    <button type="button" id="dropdownMenu1" class="amui-a-btn is--hollow btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
      Action <span class="caret"></span>
    </button>
    <ul class="dropdown-menu dropdown-menu-right" aria-labelledby="dropdownMenu1">
      <li><a href="#">Modifier</a></li>
      <li><a href="#">Supprimer</a></li>
    </ul>
  </div>
</div>

Multi-Select Dropdown

  • Title
  • Title
  • Title
  • Select all Clear all 
<div class="amui-m-btn-dropdown dropdown amui-h-text-right">
  <button type="button" id="dropdownMenuDivider" class="amui-a-btn is--default is--sm btn is--hollow is--icon-only btn dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <i class="material-icons md-24">filter_list</i>
  </button>
  <ul class="amui-m-btn-dropdown__items dropdown-menu dropdown-menu-right add" aria-labelledby="dropdownMenuDivider">
    <li class="amui-m-btn-dropdown__item dropdown-header">Title</li>
    <li class="amui-m-btn-dropdown__item">
      <label class="amui-a-form-check">
        <input type="checkbox" id="item-1" name="item-1" value="Item 1" checked>
        <span class="amui-a-form-check__indicator"></span>
        <span class="amui-a-form-check__label">Item 1</span>
      </label>
    </li>
    <li class="amui-m-btn-dropdown__item">
      <label class="amui-a-form-check">
        <input type="checkbox" id="item-2" name="item-2" value="Item 2" checked>
        <span class="amui-a-form-check__indicator"></span>
        <span class="amui-a-form-check__label">Item 2</span>
      </label>
    </li>
    <li class="amui-m-btn-dropdown__item">
      <label class="amui-a-form-check">
        <input type="checkbox" id="item-3" name="item-3" value="Item 3" checked>
        <span class="amui-a-form-check__indicator"></span>
        <span class="amui-a-form-check__label">Item 3</span>
      </label>
    </li>
    <li class="amui-m-btn-dropdown__item">
      <label class="amui-a-form-check">
        <input type="checkbox" id="item-4" name="item-4" value="Item 4" checked>
        <span class="amui-a-form-check__indicator"></span>
        <span class="amui-a-form-check__label">Item 4</span>
      </label>
    </li>
    <li class="amui-m-btn-dropdown__item">
      <label class="amui-a-form-check">
        <input type="checkbox" id="item-5" name="item-5" value="Item 5" checked>
        <span class="amui-a-form-check__indicator"></span>
        <span class="amui-a-form-check__label">Item 5</span>
      </label>
    </li>
    <li class="amui-m-btn-dropdown__item dropdown-header">Title</li>
    <li class="amui-m-btn-dropdown__item">
      <label class="amui-a-form-check">
        <input type="checkbox" id="item-6" name="item-6" value="Item 6" checked>
        <span class="amui-a-form-check__indicator"></span>
        <span class="amui-a-form-check__label">Item 6</span>
      </label>
    </li>
    <li class="amui-m-btn-dropdown__item">
      <label class="amui-a-form-check">
        <input type="checkbox" id="item-7" name="item-7" value="Item 7" checked>
        <span class="amui-a-form-check__indicator"></span>
        <span class="amui-a-form-check__label">Item 7</span>
      </label>
    </li>
    <li class="amui-m-btn-dropdown__item">
      <label class="amui-a-form-check">
        <input type="checkbox" id="item-8" name="item-8" value="Item 8" checked>
        <span class="amui-a-form-check__indicator"></span>
        <span class="amui-a-form-check__label">Item 8</span>
      </label>
    </li>
    <li class="amui-m-btn-dropdown__item dropdown-header">Title</li>
    <li class="amui-m-btn-dropdown__item">
      <label class="amui-a-form-check">
        <input type="checkbox" id="item-9" name="item-9" value="Item 9" checked>
        <span class="amui-a-form-check__indicator"></span>
        <span class="amui-a-form-check__label">Item 9</span>
      </label>
    </li>
    <li class="amui-m-btn-dropdown__item">
      <label class="amui-a-form-check">
        <input type="checkbox" id="item-10" name="item-10" value="Item 10" checked>
        <span class="amui-a-form-check__indicator"></span>
        <span class="amui-a-form-check__label">Item 10</span>
      </label>
    </li>
    <li class="amui-m-btn-dropdown__item amui-h-mb-ms amui-h-mt-ms">
      <a id="btn-dropdown-select-all-filters" href="#" class="amui-a-btn is--link btn amui-h-text-lowercase">Select all</a>
      <a id="btn-dropdown-clear-filters" href="#" class="amui-a-btn is--link btn amui-h-text-lowercase pull-right">Clear all</a>
    </li>
    <li role="separator" class="divider"></li>
    <li class="amui-m-btn-dropdown__item">
      <button id="btn-dropdown-apply-filters" type="button" class="amui-a-btn is--primary btn amui-h-mr-sm">Apply</button>
      <button id="btn-dropdown-cancel" type="button" class="amui-a-btn is--link btn pull-right">Cancel</button>
    </li>
  </ul>
</div>
← Breadcrumnbs Button Group →