Навигационная строка

Вид навигационной строки может меняться взависимости от дизайна, но основные блоки должены сохраняться
Вот несколько видов:

Вид навигационной строкив примере верстки

Посмотреть код html

<div class="el_navigationLine_xxxxxx">
	<div class="siteWidth container-fluid">
		<div class="row">
			<div class="col">
				<ul class="breadcrumb">
					<li itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
						<a class="main" href="/" itemprop="url" title="Вернуться на главную"><i class="fa fa-home"></i> <span itemprop="title">Главная</span></a>
					</li>
 
					<li><span class="separator"><i class="fa fa-long-arrow-right" aria-hidden="true"></i></span></li>
					<li itemscope itemtype="http://data-vocabulary.org/Breadcrumb">
						<a href="/catalog/" itemprop="url"><span itemprop="title">Название каталога</span></a>
					</li>
 
					<li><span class="separator"><i class="fa fa-long-arrow-right" aria-hidden="true"></i></span></li>
					<li itemscope itemtype="http://data-vocabulary.org/Breadcrumb"><span itemprop="title">Название товара возможно даже очень длиное</span></li>
				</ul>
			</div>
		</div>
	</div>
</div>

Посмотреть код css

.el_navigationLine_xxxxxx
{
}
.el_navigationLine_xxxxxx .breadcrumb
{
	margin-bottom: 30px;
}
.el_navigationLine_xxxxxx .breadcrumb li
{
	display: inline-block;
}
.el_navigationLine_xxxxxx .breadcrumb li a,
.el_navigationLine_xxxxxx .breadcrumb li span
{
	font-size: 1.4rem;
}
.el_navigationLine_xxxxxx .breadcrumb li span.separator
{
	margin: 0px 5px;
}