Breadcrumb

HTML

<nav class="kx-breadcrumb">
    <ol class="kx-breadcrumb__list">
        <li class="kx-breadcrumb__item">
            <a href="#" class="kx-breadcrumb__label">Home</a>
            <i class="kx-icon kx-icon--size-tiny">
        <svg focusable="false">
            <use href="../../assets/img/icons/sprites/icons.svg#chevron-right"></use>
        </svg>
    </i>
        </li>
        <li class="kx-breadcrumb__item">
            <a href="#" class="kx-breadcrumb__label">Applications</a>
            <i class="kx-icon kx-icon--size-tiny">
        <svg focusable="false">
            <use href="../../assets/img/icons/sprites/icons.svg#chevron-right"></use>
        </svg>
    </i>
        </li>
        <li class="kx-breadcrumb__item">
            <a href="#" class="kx-breadcrumb__label">GSN Management</a>
            <i class="kx-icon kx-icon--size-tiny">
        <svg focusable="false">
            <use href="../../assets/img/icons/sprites/icons.svg#chevron-right"></use>
        </svg>
    </i>
        </li>
        <li class="kx-breadcrumb__item">
            <span class="kx-breadcrumb__label">Node Offshore</span>
        </li>
    </ol>
</nav>

View

<nav class="kx-breadcrumb{% if theme %} kx-breadcrumb--theme-{{ theme }}{% endif %}">
    <ol class="kx-breadcrumb__list">
        {% for item in items -%}
        <li class="kx-breadcrumb__item">
            {% if item.href -%}
            <a href="{{ item.href }}" class="kx-breadcrumb__label">{{ item.txt }}</a>
            {% render '@icon', { type: 'icon', symbol: 'chevron-right', size: 'tiny' } %}
            {% else -%}
            <span class="kx-breadcrumb__label">{{ item.txt }}</span>
            {% endif -%}
        </li>
        {%- endfor -%}
    </ol>
</nav>