Dropdown
Hoverable#
<div class="dropdown dropdown--hoverable"> <button class="button button--primary">Hover Me</button> <ul class="dropdown__menu"> <li> <a class="dropdown__link" href="#url"> Home </a> </li> <li> <a class="dropdown__link" href="#url"> Profile </a> </li> <li> <a class="dropdown__link" href="#url"> Settings </a> </li> <li> <a class="dropdown__link" href="#url"> Help </a> </li> <li> <a class="dropdown__link" href="#url"> Logout </a> </li> </ul></div>Clickable#
<div class="dropdown"> <button class="button button--secondary" data-toggle="dropdown"> Click Me </button> <ul class="dropdown__menu"> <li> <a class="dropdown__link" href="#url"> Home </a> </li> <li> <a class="dropdown__link" href="#url"> Profile </a> </li> <li> <a class="dropdown__link" href="#url"> Settings </a> </li> <li> <a class="dropdown__link" href="#url"> Help </a> </li> <li> <a class="dropdown__link" href="#url"> Logout </a> </li> </ul></div>Right-Aligned#
<div class="dropdown dropdown--right"> <button class="button button--info" data-toggle="dropdown"> Right-Aligned Long Children </button> <ul class="dropdown__menu"> <li> <a class="dropdown__link" href="#url"> This is a very long item </a> </li> <li> <a class="dropdown__link" href="#url"> And so is this item </a> </li> <li> <a class="dropdown__link" href="#url"> Who are you kidding, I'm the longessssssssst! </a> </li> </ul></div>