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

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>
← Breadcrumnbs Button Group →