Dropdown layout

Multipurpose dropdown

 .dropdown

Requirements:

Toggle

It requires a toggler as previous sibling element to trigger the opening

 .toggle--dropdown

Or with action components:

 <div class="flx --flxColumn --flx-center --pY-100">
  <x-link toggle="dropdown">trigger</x-link>
  <ul class="dropdown flx --flxColumn --flx-start --gapingY-5">
   <li>
    <a href="#" class="link">aguacate</a>
   </li>
   <li>
    <a href="#" class="link">cereza</a>
   </li>
   <li>
    <a href="#" class="link">platano</a>
   </li>
  </ul>
 </div>

If an icon is provided this will rotate accordignly. It is recomended that this points to the oposite direction where the dropdown is located.

 <div class="flx --flxColumn --flx-center --pY-100">
  <a href="#" class="toggle--dropdown link">
   <span>trigger</span>
   <i class="icon fa-chevron-up fas"></i>
  </a>
  <ul class="dropdown flx --flxColumn --flx-start --gapingY-5">
   <li>
    <a href="#" class="link">aguacate</a>
   </li>
   <li>
    <a href="#" class="link">cereza</a>
   </li>
   <li>
    <a href="#" class="link">platano</a>
   </li>
  </ul>
 </div>

Modifiers:

None

Unions:

Position

This component can be aligned at almost any position, the default being bottom-left. The second value is optional and fallbacks to center.

 .dropdown.--position-bottom-left

Example

njk
{% extends "dropdown.njk" %}
html compiled
<link href="https://use.fontawesome.com/releases/v5.8.2/css/all.css" rel="stylesheet">
<div class="flx --flxColumn --flx-center --pY-100">
  <ul class="list --gapingY-25">
    <li class="--p-5 --bgColor-dark1"> <a href="#" class="toggle--dropdown link --txtStyle --txtTransform">
                  <span>.--position-top-left</span>
                  <i class="icon fa-chevron-down fas"></i>
               </a>

      <ul class="dropdown --position-top-left flx --flxColumn --flx-start --gapY-5">
        <li> <a href="#" class="link">aguacate</a>

        </li>
        <li> <a href="#" class="link">cereza</a>

        </li>
        <li> <a href="#" class="link">platano</a>

        </li>
      </ul>
    </li>
    <li class="--p-5 --bgColor-dark1"> <a href="#" class="toggle--dropdown link --txtStyle --txtTransform">
                  <span>.--position-top-right</span>
                  <i class="icon fa-chevron-down fas"></i>
               </a>

      <ul class="dropdown --position-top-right flx --flxColumn --flx-start --gapY-5">
        <li> <a href="#" class="link">aguacate</a>

        </li>
        <li> <a href="#" class="link">cereza</a>

        </li>
        <li> <a href="#" class="link">platano</a>

        </li>
      </ul>
    </li>
    <li class="--p-5 --bgColor-dark1"> <a href="#" class="toggle--dropdown link --txtStyle --txtTransform">
                  <span>.--position-top-center</span>
                  <i class="icon fa-chevron-down fas"></i>
               </a>

      <ul class="dropdown --position-top-center flx --flxColumn --flx-start --gapY-5">
        <li> <a href="#" class="link">aguacate</a>

        </li>
        <li> <a href="#" class="link">cereza</a>

        </li>
        <li> <a href="#" class="link">platano</a>

        </li>
      </ul>
    </li>
    <li class="--p-5 --bgColor-dark1"> <a href="#" class="toggle--dropdown link --txtStyle --txtTransform">
                  <span>.--position-right-top</span>
                  <i class="icon fa-chevron-left fas"></i>
               </a>

      <ul class="dropdown --position-right-top flx --flxColumn --flx-start --gapY-5">
        <li> <a href="#" class="link">aguacate</a>

        </li>
        <li> <a href="#" class="link">cereza</a>

        </li>
        <li> <a href="#" class="link">platano</a>

        </li>
      </ul>
    </li>
    <li class="--p-5 --bgColor-dark1"> <a href="#" class="toggle--dropdown link --txtStyle --txtTransform">
                  <span>.--position-right-bottom</span>
                  <i class="icon fa-chevron-left fas"></i>
               </a>

      <ul class="dropdown --position-right-bottom flx --flxColumn --flx-start --gapY-5">
        <li> <a href="#" class="link">aguacate</a>

        </li>
        <li> <a href="#" class="link">cereza</a>

        </li>
        <li> <a href="#" class="link">platano</a>

        </li>
      </ul>
    </li>
    <li class="--p-5 --bgColor-dark1"> <a href="#" class="toggle--dropdown link --txtStyle --txtTransform">
                  <span>.--position-right-center</span>
                  <i class="icon fa-chevron-left fas"></i>
               </a>

      <ul class="dropdown --position-right-center flx --flxColumn --flx-start --gapY-5">
        <li> <a href="#" class="link">aguacate</a>

        </li>
        <li> <a href="#" class="link">cereza</a>

        </li>
        <li> <a href="#" class="link">platano</a>

        </li>
      </ul>
    </li>
    <li class="--p-5 --bgColor-dark1"> <a href="#" class="toggle--dropdown link --txtStyle --txtTransform">
                  <span>.--position-bottom-left</span>
                  <i class="icon fa-chevron-up fas"></i>
               </a>

      <ul class="dropdown --position-bottom-left flx --flxColumn --flx-start --gapY-5">
        <li> <a href="#" class="link">aguacate</a>

        </li>
        <li> <a href="#" class="link">cereza</a>

        </li>
        <li> <a href="#" class="link">platano</a>

        </li>
      </ul>
    </li>
    <li class="--p-5 --bgColor-dark1"> <a href="#" class="toggle--dropdown link --txtStyle --txtTransform">
                  <span>.--position-bottom-right</span>
                  <i class="icon fa-chevron-up fas"></i>
               </a>

      <ul class="dropdown --position-bottom-right flx --flxColumn --flx-start --gapY-5">
        <li> <a href="#" class="link">aguacate</a>

        </li>
        <li> <a href="#" class="link">cereza</a>

        </li>
        <li> <a href="#" class="link">platano</a>

        </li>
      </ul>
    </li>
    <li class="--p-5 --bgColor-dark1"> <a href="#" class="toggle--dropdown link --txtStyle --txtTransform">
                  <span>.--position-bottom-center</span>
                  <i class="icon fa-chevron-up fas"></i>
               </a>

      <ul class="dropdown --position-bottom-center flx --flxColumn --flx-start --gapY-5">
        <li> <a href="#" class="link">aguacate</a>

        </li>
        <li> <a href="#" class="link">cereza</a>

        </li>
        <li> <a href="#" class="link">platano</a>

        </li>
      </ul>
    </li>
    <li class="--p-5 --bgColor-dark1"> <a href="#" class="toggle--dropdown link --txtStyle --txtTransform">
                  <span>.--position-left-top</span>
                  <i class="icon fa-chevron-right fas"></i>
               </a>

      <ul class="dropdown --position-left-top flx --flxColumn --flx-start --gapY-5">
        <li> <a href="#" class="link">aguacate</a>

        </li>
        <li> <a href="#" class="link">cereza</a>

        </li>
        <li> <a href="#" class="link">platano</a>

        </li>
      </ul>
    </li>
    <li class="--p-5 --bgColor-dark1"> <a href="#" class="toggle--dropdown link --txtStyle --txtTransform">
                  <span>.--position-left-bottom</span>
                  <i class="icon fa-chevron-right fas"></i>
               </a>

      <ul class="dropdown --position-left-bottom flx --flxColumn --flx-start --gapY-5">
        <li> <a href="#" class="link">aguacate</a>

        </li>
        <li> <a href="#" class="link">cereza</a>

        </li>
        <li> <a href="#" class="link">platano</a>

        </li>
      </ul>
    </li>
    <li class="--p-5 --bgColor-dark1"> <a href="#" class="toggle--dropdown link --txtStyle --txtTransform">
                  <span>.--position-left-center</span>
                  <i class="icon fa-chevron-right fas"></i>
               </a>

      <ul class="dropdown --position-left-center flx --flxColumn --flx-start --gapY-5">
        <li> <a href="#" class="link">aguacate</a>

        </li>
        <li> <a href="#" class="link">cereza</a>

        </li>
        <li> <a href="#" class="link">platano</a>

        </li>
      </ul>
    </li>
  </ul>
</div>