Breadcrumbs

The breadcrumb is a component used for drilldown navigation. It shows the parent page of where you are on the website. On mobile one level up from your current level is shown, for desktop all the other levels above are also visible. the breadcrumb opperates the same way a back button does.

Default

px 

			
				<nav class="m-breadcrumbs ">
	<ul class="m-breadcrumbs__list">
		<li class="m-breadcrumbs__item u-hide@below-viewport-9">
			<a class="m-breadcrumbs__link" href="">Onze extra diensten</a>
		</li>
		<li class="m-breadcrumbs__item ">
			<a class="m-breadcrumbs__link" href="">Outplacement</a>
		</li>
	</ul>
</nav>

Ecommerce

px 

			
				<style>
	html {
		background: rgba(161, 222, 233, 0.2);
	}
</style>
<nav class="m-breadcrumbs m-breadcrumbs--ecommerce ">
	<ul class="m-breadcrumbs__list">
		<li class="m-breadcrumbs__item m-breadcrumbs__item--active ">
			<a class="m-breadcrumbs__link" href="">Onze extra diensten</a>
		</li>
		<li class="m-breadcrumbs__item  ">
			<a class="m-breadcrumbs__link" href="">Outplacement</a>
		</li>
	</ul>
</nav>