Dropdown

Hoverable

• Home
• Profile
• Settings
• Help
• Logout

<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

• Home
• Profile
• Settings
• Help
• Logout

<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

• This is a very long item
• And so is this item
• Who are you kidding, I'm the longessssssssst!

<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>