Original source from https://utsa-asc.github.io/college-dls/college-dls/reference/navigation-standard.html#breadcrumb
The Breadcrumb component is designed to be displayed on all interior pages before the page content starts. For examples of correct usage of this component, please see any of the Reference Pages.
<!-- Breadcrumb -->
<div class="breadcrumb-wrapper">
<div class="container">
<ul class="list-unstyled">
<li class="crumb-item">
<a class="link-text" href="index.html">Home</a>
<span class="breadcrumb-divider"> / </span>
<span class="unlink-text">Department of Accounting</span>
</li>
</ul>
</div>
</div>
<!-- End Breadcrumb -->
/* components/02-components/07-navigation/02-breadcrumb/breadcrumb.scss */
/* BEGIN breadcrumb.scss */
// .breadcrumb-wrapper ul {
// margin-bottom: 0px;
// }
.breadcrumb-wrapper {
background-color: $blue-b;
padding: 12px 0px;
.crumb-item .link-text:hover {
color: $orange-a11y;
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.crumb-item {
color: $white;
font-size: 17px;
font-weight: 600;
}
.crumb-item .link-text {
color: $white;
font-weight: 300;
}
.crumb-item .unlink-text a {
color: $white;
&:hover {
color: $orange-a11y;
background-color: $grey;
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
}
ul {
width: 100%;
margin: 0 auto;
}
}
/* END breadcrumb.scss */
<!-- Breadcrumb -->
<div class="breadcrumb-wrapper">
<div class="container">
<ul class="list-unstyled">
<li class="crumb-item">
<a class="link-text" href="index.html">Home</a>
<span class="breadcrumb-divider"> / </span>
<span class="unlink-text">{{ breadcrumb.title }}</span></li>
</ul>
</div>
</div>
<!-- End Breadcrumb -->