<div class="Dropdown">
    <div class="Dropdown-inner">
        <label class="Dropdown-label" for="Dropdown-button">show</label>
        <button id="Dropdown-button" class="Dropdown-button" aria-controls="content" aria-expanded="false">Choose an option</button>
        <ul id="content" class="Dropdown-content">
            <li class="Dropdown-item">
                <a class="Dropdown-link  " href="#">option one</a>
            </li>
            <li class="Dropdown-item">
                <a class="Dropdown-link Dropdown-link--active" href="#">option two</a>
            </li>
            <li class="Dropdown-item">
                <a class="Dropdown-link  " href="#">option three</a>
            </li>
            <li class="Dropdown-item">
                <a class="Dropdown-link  " href="#">option four</a>
            </li>
            <li class="Dropdown-item">
                <a class="Dropdown-link  " href="#">option five</a>
            </li>
            <li class="Dropdown-item">
                <a class="Dropdown-link  " href="#">option six</a>
            </li>
        </ul>
    </div>
</div>
<div class="Dropdown{% if dropdownModifier %} Dropdown{{ dropdownModifier }}{% endif %}">
  <div class="Dropdown-inner">
    {% if dropdownLabel %}
    <label class="Dropdown-label" for="Dropdown-button">{{ dropdownLabel }}</label>
    {% endif %}
    <button id="Dropdown-button" class="Dropdown-button" aria-controls="content" aria-expanded="false">{{ dropdownButtonText }}</button>
    <ul id="content" class="Dropdown-content">
      {% for item in items %}
      <li class="Dropdown-item">
        <a class="Dropdown-link {{item.active ? "Dropdown-link--active" : " "}}" href="{{ item.url }}">{{ item.text }}</a>
      </li>
      {% endfor %}
    </ul>
  </div>
</div>
{
  "dropdownButtonText": "Choose an option",
  "dropdownLabel": "show",
  "items": [
    {
      "url": "#",
      "text": "option one"
    },
    {
      "url": "#",
      "text": "option two",
      "active": true
    },
    {
      "url": "#",
      "text": "option three"
    },
    {
      "url": "#",
      "text": "option four"
    },
    {
      "url": "#",
      "text": "option five"
    },
    {
      "url": "#",
      "text": "option six"
    }
  ]
}

There are no notes for this item.