<div class="kx-dropdown" role="group">
<button id="--14271" class="kx-dropdown__toggle kx-btn kx-btn--skin-secondary 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="--14271">
<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>
{%- 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>
{
"classes": null,
"text": "Dropdown",
"skin": "secondary",
"size": "base",
"split": null,
"icon": null,
"iconAfter": null,
"hideText": null,
"caret": true,
"items": [
{
"text": "Action",
"href": "#"
},
{
"text": "Another Action",
"href": "#"
},
{
"divider": true
},
{
"text": "Action with subitems",
"href": "#",
"subitems": [
{
"text": "Sub action",
"href": "#"
},
{
"text": "Another sub action",
"href": "#"
}
]
},
{
"text": "Action with subitems",
"href": "#",
"subitems": [
{
"text": "Sub action",
"href": "#"
},
{
"text": "Another sub action",
"href": "#"
}
]
},
{
"text": "Action with icon",
"href": "#",
"icon": {
"symbol": "box",
"size": "base"
}
},
{
"text": "Action with icon and subitems",
"href": "#",
"icon": {
"symbol": "box",
"size": "base"
},
"subitems": [
{
"text": "Sub action",
"href": "#"
},
{
"text": "Another sub action",
"href": "#"
}
]
}
],
"menuAlignment": "left"
}
There are no notes for this item.