Breadcrumbs

Useful Links:

HTML

<nav aria-label="Breadcrumb" class="breadcrumbs_nav">
	<ol class="breadcrumbs" itemscope itemtype="https://schema.org/BreadcrumbList">
		<li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
			<a itemprop="item" href="https://example.com">
				<span itemprop="name">Home</span>
			</a>
			<meta itemprop="position" content="1" />
		</li>
		<li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
			<a itemscope itemtype="https://schema.org/WebPage" itemprop="item" itemid="https://example.com/books" href="https://example.com/books">
				<span itemprop="name">Books</span>
			</a>
			<meta itemprop="position" content="2" />
		</li>
		<li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
			<a itemscope itemtype="https://schema.org/WebPage" itemprop="item" itemid="https://example.com/books/sciencefiction" href="https://example.com/books/sciencefiction">
				<span itemprop="name">Science Fiction</span>
			</a>
			<meta itemprop="position" content="3" />
		</li>
		<li itemprop="itemListElement" itemscope itemtype="https://schema.org/ListItem">
			<span itemprop="name" aria-current="page">Award Winners</span>
			<meta itemprop="position" content="4" />
		</li>
	</ol>
</nav>

CSS

.breadcrumbs{padding:1rem 1.5rem .8rem;background-color:#efefef;font-size:0}
.breadcrumbs li{display:inline-block;font-size:1.6rem;position:relative}
.breadcrumbs li + li::before{content:"/";color:#000;padding:0 .5rem 0 .9rem}
.breadcrumbs li a{color:#09a5be;text-decoration:none}

@media (-ms-high-contrast: none),(-ms-high-contrast: active),(-moz-touch-enabled: 0),(hover: hover) {
	.breadcrumbs li a:hover{color:#066978}
}

SCSS

/* Vars */
$main:            #09a5be;
$dark:            #066978;
$grey2:           #efefef;
$cb:              #000000;

.breadcrumbs {
	padding: 1rem 1.5rem .8rem;
	background-color: $grey2;
	font-size: 0;
	
	li {
		display: inline-block;
		font-size: 1.6rem;
		position: relative;
		
		+ li::before {
			content: "/";
			color: $cb;
			padding:0 .5rem 0 0.9rem;
		}
		
		a {
			color: $main;
			text-decoration: none;
		}
	}
}

@media (-ms-high-contrast: none), (-ms-high-contrast: active), (-moz-touch-enabled: 0), (hover: hover) {
	.breadcrumbs li a:hover {
		color: $dark;
	}
}