Dropdowns

Closed Dropdown

When closed, dropdowns look like ordinary buttons, icons, or iconic buttons. The only difference between the closed state and the open state is the absence of the is-open class in the c-dropdown div.

<div class="c-dropdown c-dropdown--right"> <!-- can toggle `is-open` -->
  <div data-tooltip="Help, What's New, Keyboard Shortcuts" class="c-tooltip c-tooltip--right c-tooltip--small">
    <button class="o-button o-button--iconic o-button--discreet o-button--circle">
      <i class="fa fa-question-circle"></i>
    </button>
  </div>
  <ul class="c-dropdown__list c-dropdown__list--action">
    <li class="c-dropdown__item">
      <a class="c-dropdown__link">
        <span class="c-dropdown__icon">
          <i class="fa fa-commenting"></i>
        </span>
        <span>Live Support</span>
      </a>
    </li>
    <!-- list contents omitted for brevity's sake -->
  </ul>
</div>

Open Dropdown

<div class="c-dropdown c-dropdown--right is-open"> <!-- can toggle `is-open` -->
  <div data-tooltip="Help, What's New, Keyboard Shortcuts" class="c-tooltip c-tooltip--right c-tooltip--small">
    <button class="o-button o-button--iconic o-button--discreet o-button--circle">
      <i class="fa fa-question-circle"></i>
    </button>
  </div>
  <ul class="c-dropdown__list c-dropdown__list--action">
    <li class="c-dropdown__item">
      <a class="c-dropdown__link">
        <span class="c-dropdown__icon">
          <i class="fa fa-commenting"></i>
        </span>
        <span>Live Support</span>
      </a>
    </li>
    <li class="c-dropdown__item">
      <a class="c-dropdown__link">
        <span class="c-dropdown__icon">
          <i class="fa fa-fw fa-info-circle"></i>
        </span>
        <span>Help Center</span>
      </a>
    </li>
    <li class="c-dropdown__item">
      <a class="c-dropdown__link">
        <span class="c-dropdown__icon">
          <i class="fa fa-fw fa-gift"></i>
        </span>
        <span>What's New</span>
      </a>
    </li>
    <li>
      <hr class="c-dropdown__divider">
    </li>
    <li>
      <button class="c-dropdown__item l-box l-box--space-between l-box--align-base">
        <div class="l-box l-box--baseline-items">
          <span class="c-dropdown__icon">
            <i class="fa fa-keyboard-o"></i>
          </span>
          <span>Keyboard Shortcuts</span>
        </div>
      <div class="c-dropdown__shortcut">⌘/</div>
      </button>
    </li>
  </ul>
</div>