Changelog:

0.1.0: Mise à jour de la documentation, plus de data-attributes et de comportement js
0.0.1: Ajout du composant

Les éléments dropdown et dropdown-content prennent la classe is-open lors de l'ouverture du dropdown. Les styles inline sont là pour les besoins du styleguide, et ne sont pas obligatoires.

L'élément dropdown-content peut également tout à fait être positionné dans le et non dans son parent.

<div class="dropdown is-open">
  <div class="dropdown-button" role="button">
    Toute l'équipe
    <span class="icon icon--down"></span>
  </div>
  <ul class="dropdown-content is-open" style="position: relative; margin-top: 10px;">
    <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 is-open">
  <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 is-open" style="position: relative; margin-top: 10px;">
    <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>

<div class="u-bkgClr1 u-paM">
  <div class="dropdown is-open">
    <div class="dropdown-button dropdown-button--light" role="button">
      Toute l'équipe
      <span class="icon icon--down"></span>
    </div>
    <ul class="dropdown-content is-open" style="position: relative; margin-top: 10px;">
      <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>

Dropdown

Changelog:

Dropdown avec texte

Dropdown avec avatar

Dropdown avec un bouton de style light