<div class="breadcrumb">
    <ul class="breadcrumb__list">
        <li class="breadcrumb__item">
            <a href="./" class="breadcrumb__link">home</a>
        </li>
        <li class="breadcrumb__item">
            <a href="#" class="breadcrumb__link">key products</a>
        </li>
        <li class="breadcrumb__item">
            <a href="#" class="breadcrumb__link">all products</a>
        </li>
        <li class="breadcrumb__item">
            <a href="#" class="breadcrumb__link">product group</a>
        </li>
        <li class="breadcrumb__item">
            product name
        </li>
    </ul>
</div>
<div class="breadcrumb">
	<ul class="breadcrumb__list">
		{{#each items}}
			{{#if @last}}
			<li class="breadcrumb__item">
				{{text}}
			</li>
			{{else}}
			<li class="breadcrumb__item">
				<a href="{{link}}" class="breadcrumb__link">{{text}}</a>
			</li>
			{{/if}}
		{{/each}}
	</ul>
</div>
{
    "items": [
        {
            "text": "home",
            "link": "./"
        },
        {
            "text": "key products",
            "link": "#"
        },
        {
            "text": "all products",
            "link": "#"
        },
        {
            "text": "product group",
            "link": "#"
        },
        {
            "text": "product name",
            "link": "#"
        }
    ]
}
.breadcrumb__list {
	@include clearfix();
}
.breadcrumb__item {
	display: inline-block;
	text-align: flip(right,left);
	color: $grey--dark;
	@include rem2px(font-size, 1);
	&:after { 
		content:"\203A";
		html[dir="rtl"] & {
			content:"\2039";
		}
	}
	&:last-child:after{
		content: initial;
	}
}
.breadcrumb__link {
	color: $grey--dark;
}

There are no notes for this item.