KSS Style Guide

Navigation - breadcrumbs

Toggle example guides Toggle HTML markup

Breadcrums displays current user position on the page

<insert-markup>molecules.breadcrumbs-</insert-markup>
.-invert
inverted version
<insert-markup>molecules.breadcrumbs-0</insert-markup>
Markup: ..\..\styleguide\templates\molecules\breadcrumbs.html
<ol class="rocksite-m-breadcrumbs [modifier class]">
	<li class="rocksite-m-breadcrumbs__item">
		<a href="#">Home</a>
		<span class="rocksite-m-breadcrumbs__item__separator">/</span>
	</li>
	<li class="rocksite-m-breadcrumbs__item">
		<a href="#">Second Category</a>
		<span class="rocksite-m-breadcrumbs__item__separator">/</span>
	</li>
	<li class="rocksite-m-breadcrumbs__item">
		<a href="#">Last Category</a>
		<span class="rocksite-m-breadcrumbs__item__separator">/</span>
	</li>
</ol>
Source: ../source/scss/components/molecules/_nav-breadcrumbs.scss, line 1