Dropdown

HTML

<div class="kx-dropdown" role="group">
    <button id="--97893" class="kx-dropdown__toggle kx-btn kx-btn--skin-primary kx-btn--size-base kx-js-dropdown__toggle" aria-haspopup="true" aria-expanded="false">
        <span class="kx-btn__inner">
            <span class="kx-btn__txt">Dropdown</span>
            <i class="kx-icon kx-icon--size-small kx-dropdown__caret">
        <svg focusable="false">
            <use href="../../assets/img/icons/sprites/icons.svg#caret-down"></use>
        </svg>
    </i>
        </span>
    </button>
    <div class="kx-dropdown__menu kx-dropdown__menu--align-left kx-js-dropdown__menu" aria-labelledby="--97893">
        <ul class="kx-dropdown__list">
            <li class="kx-dropdown__item">
                <a class="kx-dropdown__link" href="#">
                            <span class="kx-dropdown__item__txt">Action</span>
                            </a>
            </li>
            <li class="kx-dropdown__item">
                <a class="kx-dropdown__link" href="#">
                            <span class="kx-dropdown__item__txt">Another Action</span>
                            </a>
            </li>
            <li aria-hidden="true" tabindex="-1"></li>
            <li class="kx-dropdown__item">
                <a class="kx-dropdown__link" href="#">
                            <span class="kx-dropdown__item__txt">Action with subitems</span>
                            <i class="kx-icon kx-icon--size-base">
        <svg focusable="false">
            <use href="../../assets/img/icons/sprites/icons.svg#chevron-right"></use>
        </svg>
    </i>
                            </a>
                <div class="kx-dropdown__menu">
                    <ul class="kx-dropdown__list">
                        <li class="kx-dropdown__item">
                            <a class="kx-dropdown__link" href="#">
                                                Sub action
                                            </a>
                        </li>
                        <li class="kx-dropdown__item">
                            <a class="kx-dropdown__link" href="#">
                                                Another sub action
                                            </a>
                        </li>
                    </ul>
                </div>
            </li>
            <li class="kx-dropdown__item">
                <a class="kx-dropdown__link" href="#">
                            <span class="kx-dropdown__item__txt">Action with subitems</span>
                            <i class="kx-icon kx-icon--size-base">
        <svg focusable="false">
            <use href="../../assets/img/icons/sprites/icons.svg#chevron-right"></use>
        </svg>
    </i>
                            </a>
                <div class="kx-dropdown__menu">
                    <ul class="kx-dropdown__list">
                        <li class="kx-dropdown__item">
                            <a class="kx-dropdown__link" href="#">
                                                Sub action
                                            </a>
                        </li>
                        <li class="kx-dropdown__item">
                            <a class="kx-dropdown__link" href="#">
                                                Another sub action
                                            </a>
                        </li>
                    </ul>
                </div>
            </li>
            <li class="kx-dropdown__item">
                <a class="kx-dropdown__link" href="#">
                            <i class="kx-icon kx-icon--size-base">
        <svg focusable="false">
            <use href="../../assets/img/icons/sprites/icons.svg#box"></use>
        </svg>
    </i><span class="kx-dropdown__item__txt">Action with icon</span>
                            </a>
            </li>
            <li class="kx-dropdown__item">
                <a class="kx-dropdown__link" href="#">
                            <i class="kx-icon kx-icon--size-base">
        <svg focusable="false">
            <use href="../../assets/img/icons/sprites/icons.svg#box"></use>
        </svg>
    </i><span class="kx-dropdown__item__txt">Action with icon and subitems</span>
                            <i class="kx-icon kx-icon--size-base">
        <svg focusable="false">
            <use href="../../assets/img/icons/sprites/icons.svg#chevron-right"></use>
        </svg>
    </i>
                            </a>
                <div class="kx-dropdown__menu">
                    <ul class="kx-dropdown__list">
                        <li class="kx-dropdown__item">
                            <a class="kx-dropdown__link" href="#">
                                                Sub action
                                            </a>
                        </li>
                        <li class="kx-dropdown__item">
                            <a class="kx-dropdown__link" href="#">
                                                Another sub action
                                            </a>
                        </li>
                    </ul>
                </div>
            </li>
        </ul>
    </div>
</div>

View

{%- if id -%}
    {-% set random_number = range(0, 100000) | random -%}
    {%- set id = id | replace(' ', '-') | lower + '--' + random_number -%}
{%- else -%}
    {%- set random_number = range(0, 100000) | random -%}
    {%- set id = label | replace(' ', '-') | lower + '--' + random_number -%}
{% endif -%}

<div class="kx-dropdown{% if show %} kx-dropdown--show{% endif %}" role="group">
    <button id="{{ id }}" class="kx-dropdown__toggle kx-btn{% if skin %} kx-btn--skin-{{ skin }}{% endif %}{% if size %} kx-btn--size-{{ size }}{% endif %}{% if icon %}{% if hideText==true %} kx-btn--icon{% endif %}{% endif %}{% if show %} kx-dropdown--show{% endif %} kx-js-dropdown__toggle" aria-haspopup="true" aria-expanded="false">
        <span class="kx-btn__inner">
            <span class="kx-btn__txt{% if hideText %} kx-is-vishidden{% endif %}">{{ text }}</span>
            {% render '@icon', { type: 'icon', symbol: 'caret-down', size: 'small', classes: ['kx-dropdown__caret'] } %}
        </span>
    </button>
    <div class="kx-dropdown__menu{% if menuAlignment %} kx-dropdown__menu--align-{{ menuAlignment }}{% endif %} kx-js-dropdown__menu" aria-labelledby="{{ id }}">
        <ul class="kx-dropdown__list">
            {% for item in items -%}
                {% if item.divider -%}
                    <li aria-hidden="true" tabindex="-1"></li>
                {% else -%}
                    <li class="kx-dropdown__item">
                        <a class="kx-dropdown__link" href="{{ item.href }}">
                            {% if item.icon -%}
                                {% render '@icon', item.icon, true -%}
                            {% endif -%}
                            <span class="kx-dropdown__item__txt">{{ item.text }}</span>
                            {% if item.subitems -%}
                                {% render '@icon', { type: 'icon', symbol: 'chevron-right', size: 'base' } %}
                            {% endif -%}
                        </a>
                        {% if item.subitems -%}
                            <div class="kx-dropdown__menu">
                                <ul class="kx-dropdown__list">
                                    {% for subitem in item.subitems -%}
                                        <li class="kx-dropdown__item">
                                            <a class="kx-dropdown__link" href="{{ subitem.href }}">
                                                {{ subitem.text }}
                                            </a>
                                        </li>
                                    {% endfor -%}
                                </ul>
                            </div>
                        {% endif -%}
                    </li>
                {% endif %}
            {%- endfor -%}
        </ul>
    </div>
</div>