Sidebar

HTML

<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>

View

{%- 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 -%}