No notes defined.
<nav class="breadcrumbs">
<ul>
<li><a href="">Home</a></li>
<li><a href="">Academic Programs</a></li>
<li><a href="">A Long Titled Third Item Might Go Here Perhaps</a></li>
</ul>
</nav>
<nav class="breadcrumbs">
{% if list %}
{{ list }}
{% else %}
<ul>
<li><a href="">Home</a></li>
<li><a href="">Academic Programs</a></li>
<li><a href="">A Long Titled Third Item Might Go Here Perhaps</a></li>
</ul>
{% endif %}
</nav>
.breadcrumbs {
display: inline-block;
margin-bottom: $spacing-sm;
@include typescale('2xs');
text-transform: lowercase;
border-radius: $border-radius-sm;
@media (min-width: $breakpoint-largescreen-typography) {
@include typescale('3xs');
}
a {
color: $grey--dark;
margin-right: 0.5em;
text-decoration: underline;
text-decoration-color: rgba($grey--dark, 0.7);
text-decoration-thickness: 1px;
}
ul {
margin: 0;
}
li {
display: inline;
&::after {
content: '';
position: relative;
top: 0.1em;
display: inline-block;
height: 1em;
width: 0.5em;
border-left: 2px solid $secondary;
transform: skew(-20deg);
}
}
}