<div class="kx-sidebar-wrapper">
<nav class="kx-sidebar kx-two-level-nav">
<ul class="kx-menu">
<li class="kx-menu__item">
<a href="#" class="kx-menu__link">
<span class="kx-menu__icon">
<i class="kx-icon kx-icon--size-moderate">
<svg focusable="false">
<use href="../../assets/img/icons/sprites/icons.svg#box"></use>
</svg>
</i>
</span>
<span class="kx-menu__name">Level 1 item</span>
</a>
</li>
<li class="kx-menu__item">
<a href="#" class="kx-menu__link">
<span class="kx-menu__icon">
<i class="kx-icon kx-icon--size-moderate">
<svg focusable="false">
<use href="../../assets/img/icons/sprites/icons.svg#box"></use>
</svg>
</i>
</span>
<span class="kx-menu__name">Level 1 item</span>
<span class="kx-menu__icon kx-menu__icon--expand-menu">
<i class="kx-icon kx-icon--size-base">
<svg focusable="false">
<use href="../../assets/img/icons/sprites/icons.svg#chevron-right"></use>
</svg>
</i>
</span></a>
<div class="kx-sub-menu-container">
<ul class="kx-menu kx-sub-menu">
<li class="kx-menu__item">
<a href="#" class="kx-menu__link">
<span class="kx-menu__name">Level 2 item</span>
</a>
</li>
<li class="kx-menu__item">
<a href="#" class="kx-menu__link">
<span class="kx-menu__name">Level 2 item</span>
</a>
</li>
<li class="kx-menu__item">
<a href="#" class="kx-menu__link">
<span class="kx-menu__name">Level 2 item</span>
</a>
</li>
</ul>
</div>
</li>
<li class="kx-menu__item">
<a href="#" class="kx-menu__link">
<span class="kx-menu__icon">
<i class="kx-icon kx-icon--size-moderate">
<svg focusable="false">
<use href="../../assets/img/icons/sprites/icons.svg#box"></use>
</svg>
</i>
</span>
<span class="kx-menu__name">Level 1 item</span>
</a>
</li>
<li class="kx-menu__item">
<a href="#" class="kx-menu__link">
<span class="kx-menu__icon">
<i class="kx-icon kx-icon--size-moderate">
<svg focusable="false">
<use href="../../assets/img/icons/sprites/icons.svg#box"></use>
</svg>
</i>
</span>
<span class="kx-menu__name">Level 1 item</span>
<span class="kx-menu__icon kx-menu__icon--expand-menu">
<i class="kx-icon kx-icon--size-base">
<svg focusable="false">
<use href="../../assets/img/icons/sprites/icons.svg#chevron-right"></use>
</svg>
</i>
</span></a>
<div class="kx-sub-menu-container">
<ul class="kx-menu kx-sub-menu">
<li class="kx-menu__item">
<a href="#" class="kx-menu__link">
<span class="kx-menu__name">Level 2 item</span>
</a>
</li>
<li class="kx-menu__item">
<a href="#" class="kx-menu__link">
<span class="kx-menu__name">Level 2 item</span>
</a>
</li>
<li class="kx-menu__item">
<a href="#" class="kx-menu__link">
<span class="kx-menu__name">Level 2 item</span>
</a>
</li>
</ul>
</div>
</li>
<li class="kx-menu__item">
<a href="#" class="kx-menu__link">
<span class="kx-menu__icon">
<i class="kx-icon kx-icon--size-moderate">
<svg focusable="false">
<use href="../../assets/img/icons/sprites/icons.svg#box"></use>
</svg>
</i>
</span>
<span class="kx-menu__name">Level 1 item</span>
</a>
</li>
<li class="kx-menu__item">
<a href="#" class="kx-menu__link">
<span class="kx-menu__icon">
<i class="kx-icon kx-icon--size-moderate">
<svg focusable="false">
<use href="../../assets/img/icons/sprites/icons.svg#box"></use>
</svg>
</i>
</span>
<span class="kx-menu__name">Level 1 item</span>
</a>
</li>
</ul>
<div class="kx-expand-nav">
<button class="kx-btn kx-btn-expand-nav kx-btn--skin-flat">
<i class="kx-icon kx-icon--size-moderate">
<svg focusable="false">
<use href="../../assets/img/icons/sprites/icons.svg#chevron-right"></use>
</svg>
</i>
</button>
</div>
</nav>
</div>
{%- if type == 'sidebar' -%}
<div class="kx-sidebar-wrapper">
<nav class="kx-sidebar kx-two-level-nav">
<ul class="kx-menu">
{% for item in items -%}
<li class="kx-menu__item">
<a href="#" class="kx-menu__link">
<span class="kx-menu__icon">
{% render '@icon', {type: 'icon', symbol: item.symbol, size: item.size } %}
</span>
<span class="kx-menu__name">{{item.name}}</span>
{% if item.hasChildren %}
<span class="kx-menu__icon kx-menu__icon--expand-menu">
{% render '@icon', {type: 'icon', symbol: 'chevron-right', size: 'base' } %}
</span>
{%- endif -%}
</a>
{% if item.hasChildren %}
<div class="kx-sub-menu-container">
<ul class="kx-menu kx-sub-menu">
{% for child in item.children -%}
<li class="kx-menu__item">
<a href="#" class="kx-menu__link">
<span class="kx-menu__name">{{child.name}}</span>
</a>
</li>
{% endfor -%}
</ul>
</div>
{%- endif -%}
</li>
{% endfor -%}
</ul>
<div class="kx-expand-nav">
<button class="kx-btn kx-btn-expand-nav kx-btn--skin-flat">
{% render '@icon', {type: 'icon', symbol: 'chevron-right', size: 'moderate' } %}
</button>
</div>
</nav>
</div>
{%- elseif type == 'sidebar-deep' -%}
<nav class="kx-three-level-nav kx-three-level-nav--expanded kx-overflow-visible">
<div class="kx-menu__primary">
<ul class="kx-menu">
{% for item in items -%}
<li class="kx-menu__item">
<a href="#" class="kx-menu__link{% if item.hasChildren %} kx-expand-sub{%- endif -%}">
<span class="kx-menu__icon">
<i class="kx-icon kx-icon--size-moderate">
<svg focusable="false">
<use xlink:href="/assets/img/icons/sprites/icons.svg#{{item.icon}}"></use>
</svg>
</i>
</span>
<span class="kx-menu__name">{{item.name}}</span>
{% if item.hasChildren %}
<span class="kx-menu__icon kx-menu__icon--expand-menu">
<i class="kx-icon kx-icon--size-base">
<svg focusable="false">
<use xlink:href="/assets/img/icons/sprites/icons.svg#chevron-right"></use>
</svg>
</i>
</span>
{%- endif -%}
</a>
{% if item.hasChildren %}
<div class="kx-sub-menu kx-menu__secondary">
<ul class="kx-menu">
{% for childTwo in item.children -%}
<li class="kx-menu__item">
<a href="#" class="kx-menu__link{% if item.hasChildren %} kx-expand-sub{%- endif -%}">
<span class="kx-menu__name">{{childTwo.name}}</span>
{% if childTwo.hasChildren %}
<span class="kx-menu__icon kx-menu__icon--expand-menu">
<i class="kx-icon kx-icon--size-base">
<svg focusable="false">
<use xlink:href="/assets/img/icons/sprites/icons.svg#chevron-right"></use>
</svg>
</i>
</span>
{%- endif -%}
</a>
{% if childTwo.hasChildren %}
<div class="kx-sub-menu kx-menu__tertiary">
<ul class="kx-menu">
<li class="kx-menu__item">
<a href="#" class="kx-menu__link"> Level 3 </a>
</li>
<li class="kx-menu__item">
<a href="#" class="kx-menu__link"> Level 3 </a>
</li>
<li class="kx-menu__item">
<a href="#" class="kx-menu__link"> Level 3 </a>
</li>
</ul>
</div>
{%- endif -%}
</li>
{% endfor %}
</ul>
</div>
{%- endif -%}
</li>
{% endfor %}
</ul>
</div>
<div class="kx-expand-nav">
<button class="kx-btn kx-btn-expand-nav kx-btn--skin-flat kx-btn--size-small">
<i class="kx-icon kx-icon--size-base">
<svg focusable="false">
<use xlink:href="/assets/img/icons/sprites/icons.svg#chevron-right"></use>
</svg>
</i>
</button>
</div>
</nav>
{%- endif -%}
{
"type": "sidebar",
"items": [
{
"symbol": "box",
"size": "moderate",
"hasChildren": null,
"name": "Level 1 item"
},
{
"symbol": "box",
"size": "moderate",
"hasChildren": true,
"name": "Level 1 item",
"children": [
{
"name": "Level 2 item"
},
{
"name": "Level 2 item"
},
{
"name": "Level 2 item"
}
]
},
{
"symbol": "box",
"size": "moderate",
"hasChildren": null,
"name": "Level 1 item"
},
{
"symbol": "box",
"size": "moderate",
"hasChildren": true,
"name": "Level 1 item",
"children": [
{
"symbol": "box",
"children": null,
"name": "Level 2 item"
},
{
"symbol": "box",
"children": null,
"name": "Level 2 item"
},
{
"symbol": "box",
"children": null,
"name": "Level 2 item"
}
]
},
{
"symbol": "box",
"size": "moderate",
"hasChildren": null,
"name": "Level 1 item"
},
{
"symbol": "box",
"size": "moderate",
"hasChildren": null,
"name": "Level 1 item"
}
]
}
- Handle: @sidebar--sidebar
- Variants (2): Sidebar , Sidebar Deep
- Preview:
- Filesystem Path: src\components\sidebar\sidebar.njk
- References (1): @icon
There are no notes for this item.