SIA Web Design Library

Dropdown: Default

No notes defined.

<ul class="c-dropdown">
        <li class="c-dropdown__item ">
            <a href="#" class="c-dropdown__item__link">Ana Jeličić (Mentor)</a>
        </li>
        <li class="c-dropdown__item  c-dropdown__item--active ">
            <a href="#" class="c-dropdown__item__link">Anna Reid (Germany 2026, Mentor)</a>
        </li>
        <li class="c-dropdown__item ">
            <a href="#" class="c-dropdown__item__link">Boris Kaplan (Mentor)</a>
        </li>
        <li class="c-dropdown__item ">
            <a href="#" class="c-dropdown__item__link">Carla Mendes (Mentor)</a>
        </li>
        <li class="c-dropdown__item ">
            <a href="#" class="c-dropdown__item__link">David Okafor (Germany 2026, Mentor)</a>
        </li>
        <li class="c-dropdown__item ">
            <a href="#" class="c-dropdown__item__link">Elena Petrova (Mentor)</a>
        </li>
        <li class="c-dropdown__item ">
            <a href="#" class="c-dropdown__item__link">Farid Haidari (Germany 2026, Mentor)</a>
        </li>
    </ul>
 
{% if items is empty %}
    <div class="{{ get_component_class( 'dropdown', { 'modifiers': [ 'empty' ] } ) }}">No results found</div>
{% else %}
    <ul class="{{ get_component_class( 'dropdown', display ) }}">
        {% for item in items %}
            <li class="c-dropdown__item {% if item.active %} c-dropdown__item--active {% endif %}">
                <a href="#" class="c-dropdown__item__link">{{ item.title }}</a>
            </li>
        {% endfor %}
    </ul>
{% endif %}
 
{
  "theme": "education",
  "items": [
    {
      "title": "Ana Jeličić (Mentor)"
    },
    {
      "title": "Anna Reid (Germany 2026, Mentor)",
      "active": true
    },
    {
      "title": "Boris Kaplan (Mentor)"
    },
    {
      "title": "Carla Mendes (Mentor)"
    },
    {
      "title": "David Okafor (Germany 2026, Mentor)"
    },
    {
      "title": "Elena Petrova (Mentor)"
    },
    {
      "title": "Farid Haidari (Germany 2026, Mentor)"
    }
  ]
}