v.0.0.1

Pour ajouter le bon comportement au dropdown, le container prends des data-attributes :

data-cb-dropdown contient le selecteur du dropdown (doit être un enfant)
data-cb-dropdown-trigger contient le selecteur du déclencheur du dropdown (doit être un enfant)
data-cb-dropdown-align peut prendre les valeurs right (défaut) ou left. Gère l'alignement du dropdown

<div class="dropdown" data-cb-dropdown=".dropdown-content" data-cb-dropdown-trigger=".dropdown-button">
  <div class="dropdown-button" role="button">
    Toute l'équipe
    <span class="icon icon--down"></span>
  </div>
  <ul class="dropdown-content">
    <li class="dropdown-item">
      <a href="#" class="dropdown-link">Moi</a>
    </li>
    <li class="dropdown-item">
      <a href="#" class="dropdown-link">Rémi Fericelli</a>
    </li>
    <li class="dropdown-item">
      <a href="#" class="dropdown-link">Muriel Kaplan</a>
    </li>
  </ul>
</div>

<div class="dropdown" data-cb-dropdown=".dropdown-content" data-cb-dropdown-trigger=".dropdown-button">
  <div class="dropdown-button" role="button">
    <div class="avatar">
      <div class="avatar-thumb">
        <img src="https://avatars0.githubusercontent.com/u/709456?v=3&amp;s=460" width="40" height="40" alt="Laurent sutterlity" />
      </div>
    </div>
    <span class="icon icon--down"></span>
  </div>
  <ul class="dropdown-content">
    <li class="dropdown-item">
      <a href="#" class="dropdown-link">Mon compte</a>
    </li>
    <li class="dropdown-item">
      <a href="#" class="dropdown-link">Adminstration</a>
    </li>
    <li class="dropdown-item">
      <a href="#" class="dropdown-link">
      <span class="icon icon--disconnect icon--mRight"></span> Déconnexion</a>
    </li>
  </ul>
</div>

Ajouter le data-attribute data-cb-dropdown-align="left"

<div class="dropdown" data-cb-dropdown=".dropdown-content" data-cb-dropdown-trigger=".dropdown-button" data-cb-dropdown-align="left">
  <div class="dropdown-button" role="button">
    Toute l'équipe
    <span class="icon icon--down"></span>
  </div>
  <ul class="dropdown-content">
    <li class="dropdown-item">
      <a href="#" class="dropdown-link">Moi</a>
    </li>
    <li class="dropdown-item">
      <a href="#" class="dropdown-link">Rémi Fericelli</a>
    </li>
    <li class="dropdown-item">
      <a href="#" class="dropdown-link">Muriel Kaplan</a>
    </li>
  </ul>
</div>

Dropdown

Dropdown avec texte

Dropdown avec avatar

Dropdown avec contenu aligné à gauche