Dropdown

Dropdown link

 1
 2  <div class="c-dropdown js-dropdown">
 3    <a href="#" class="c-dropdown__trigger js-dropdown-trigger">Click me</a>
 4    <ul class="c-dropdown__menu js-dropdown-menu" hidden>
 5      <li class="c-dropdown__item">
 6        <a href="#" class="c-dropdown__link">About</a>
 7      </li>
 8      <li class="c-dropdown__item">
 9        <a href="#" class="c-dropdown__link">FAQ</a>
10      </li>
11    </ul>
12  </div>
13

Dropdown button

 1
 2  <div class="c-dropdown js-dropdown">
 3    <a href="#" class="c-btn c-dropdown__trigger js-dropdown-trigger">Click me</a>
 4    <ul class="c-dropdown__menu js-dropdown-menu" hidden>
 5      <li class="c-dropdown__item">
 6        <a href="#" class="c-dropdown__link">About</a>
 7      </li>
 8      <li class="c-dropdown__item">
 9        <a href="#" class="c-dropdown__link">FAQ</a>
10      </li>
11    </ul>
12  </div>
13

Dropdown from right

 1
 2  <div class="c-dropdown c-dropdown--right js-dropdown">
 3    <a href="#" class="c-btn c-dropdown__trigger js-dropdown-trigger">Click me</a>
 4    <ul class="c-dropdown__menu js-dropdown-menu" hidden>
 5      <li class="c-dropdown__item">
 6        <a href="#" class="c-dropdown__link">About</a>
 7      </li>
 8      <li class="c-dropdown__item">
 9        <a href="#" class="c-dropdown__link">FAQ</a>
10      </li>
11    </ul>
12  </div>
13

Dropdown from center

 1
 2  <div class="c-dropdown c-dropdown--center js-dropdown">
 3    <a href="#" class="c-btn c-dropdown__trigger js-dropdown-trigger">Click me</a>
 4    <ul class="c-dropdown__menu js-dropdown-menu" hidden>
 5      <li class="c-dropdown__item">
 6        <a href="#" class="c-dropdown__link">About</a>
 7      </li>
 8      <li class="c-dropdown__item">
 9        <a href="#" class="c-dropdown__link">FAQ</a>
10      </li>
11    </ul>
12  </div>
13

Full width

 1
 2  <div class="c-dropdown c-dropdown--full js-dropdown">
 3    <a href="#" class="c-btn c-dropdown__trigger js-dropdown-trigger">Click me</a>
 4    <ul class="c-dropdown__menu js-dropdown-menu" hidden>
 5      <li class="c-dropdown__item">
 6        <a href="#" class="c-dropdown__link">About</a>
 7      </li>
 8      <li class="c-dropdown__item">
 9        <a href="#" class="c-dropdown__link">FAQ</a>
10      </li>
11    </ul>
12  </div>
13