Simple breadcrumbs.
@mixin breadcrumbs()
None.
nav.breadcrumbs>ul>li>a+li.active>a
<nav class="breadcrumbs">
<ul class="breadcrumbs__list">
<li class="breadcrumbs__item"><a class="breadcrumbs__link" href="">Item 1</a></li>
<li class="breadcrumbs__item"><a class="breadcrumbs__link" href="">Item 2</a></li>
<li class="breadcrumbs__item -active"><a class="breadcrumbs__link" href="">Item 3</a></li>
</ul>
</nav>
///
/// Simple breadcrumbs for your breadcrumbing needs.
///
/// $color
/// crumb color
/// $hover-color
/// crumb hover color
///
@mixin breadcrumbs(
$color: $meta-text,
$hover-color: $link-hover,
) {
&__list {
display: inline-flex;
list-style: none;
margin: 0;
padding-left: 0;
}
&__item {
margin-bottom: 0;
&.-active {
font-weight: 700;
}
}
&__link {
color: $color;
display: block;
padding: .618em .809em;
&:hover {
color: $hover-color;
}
&::after {
content: "∕";
display: inline-block;
transform: translateX(.809em);
}
.-active &::after {
content: unset;
}
}
}