<div class="container">
	<div class="breadcrumb">
		<a href="#">
			<span class="breadcrumb__inner">
				<span class="breadcrumb__title">Website Root</span>
				<span class="breadcrumb__desc">First Item</span>
			</span>
		</a>
		<a href="#">
			<span class="breadcrumb__inner">
				<span class="breadcrumb__title">Page Depth 02</span>
				<span class="breadcrumb__desc">Second Item</span>
			</span>
		</a>
		<a href="#">
			<span class="breadcrumb__inner">
				<span class="breadcrumb__title">Page Depth 03</span>
				<span class="breadcrumb__desc">Third Item</span>
			</span>
		</a>
		<a href="#">
			<span class="breadcrumb__inner">
				<span class="breadcrumb__title">Page Depth 04</span>
				<span class="breadcrumb__desc">Fourth Item</span>
				<span class="breadcrumb__desc">With Additional Line</span>
			</span>
		</a>
		<a href="#">
			<span class="breadcrumb__inner">
				<span class="breadcrumb__title">Page Depth 05</span>
			</span>
		</a>
	</div>
</div>

$base: 38px;

* {margin: 0; padding: 0; box-sizing: border-box}

html, body {
	height: 100%; 
	background-color: #333;
}
	
.container {
	display: flex;
	flex-direction: column;
	height: 100%;
	width: 100%;
	min-width: 480px;
	padding: 0 40px;
}

.breadcrumb {
	display: flex;
	border-radius: 6px;
	overflow: hidden;
	margin: auto;
	text-align: center;
	top: 50%;
	width: 100%;
	height: $base * 1.5;
	transform: translateY(-50%);
	box-shadow: 0 1px 1px rgba(0,0,0,1),
							0 4px 14px rgba(0,0,0,0.7);
	z-index: 1;
	background-color: #ddd;
	font-size: 14px;
}

	.breadcrumb a {
		position: relative;
		display: flex;
		flex-grow: 1;
		text-decoration: none;
		margin: auto;
		height: 100%;
		padding-left: $base;
		padding-right: 0;
		color: #666;
	}

		.breadcrumb a:first-child {
			padding-left: $base / 2.5;
		}

		.breadcrumb a:last-child {
			padding-right: $base / 2.5;
		}

		.breadcrumb a:after {
			content: "";
			position: absolute;
			display: inline-block;
			width: $base * 1.5;
			height: $base * 1.5;
			top: 0;
			right: $base / 1.35 * -1;
			background-color: #ddd;
			border-top-right-radius: 5px;
			transform: scale(0.707) rotate(45deg);
			box-shadow: 1px -1px rgba(0,0,0,0.25);
			z-index: 1;
		}

			.breadcrumb a:last-child:after {
				content: none;
			}

	.breadcrumb__inner {
		display: flex;
		flex-direction: column;
		margin: auto;
		z-index: 2;
	}

		.breadcrumb__title {
			font-weight: bold;
		}

.breadcrumb a.active, .breadcrumb a:hover{
	background: darken(tomato, 20%);
	color: white;
}

.breadcrumb a.active:after, .breadcrumb a:hover:after {
	background: darken(tomato, 20%);
	color: white;
}

// 1000px
///////////////////////
@media all and (max-width: 1000px) {
	.breadcrumb {
		font-size: 12px;
	}
}

// 710px
///////////////////////
@media all and (max-width: 710px) {
	.breadcrumb__desc {
		display: none;
	}
	
	.breadcrumb {
		height: $base;
	}
	
	.breadcrumb a {
		padding-left: $base / 1.5;
	}
	
	.breadcrumb a:after {
			content: "";
			width: $base * 1;
			height: $base * 1;
			right: $base / 2 * -1;
			transform: scale(0.707) rotate(45deg);
		}
}