<nav aria-label="Breadcrumb navigation" class="breadcrumbs breadcrumbs--network">
<ul class="breadcrumbs__list">
<li class="breadcrumbs__item">
<a href="#" class="breadcrumbs__item-link">
Home</a><span class="breadcrumbs__separator"><svg aria-hidden="true" class="icon-right-triangle" xmlns="http://www.w3.org/2000/svg" width="6" height="8" viewBox="0 0 6 8">
<path class="_mark" fill="#AEB4BA" fill-rule="evenodd" d="M0 0l6 4-6 4z"/>
</svg>
</span>
</li>
<li class="breadcrumbs__item">
<a href="#" class="breadcrumbs__item-link">
Programs & Applying</a><span class="breadcrumbs__separator"><svg aria-hidden="true" class="icon-right-triangle" xmlns="http://www.w3.org/2000/svg" width="6" height="8" viewBox="0 0 6 8">
<path class="_mark" fill="#AEB4BA" fill-rule="evenodd" d="M0 0l6 4-6 4z"/>
</svg>
</span>
</li>
<li class="breadcrumbs__item">
<a href="#" class="breadcrumbs__item-link">
Master of Science in Sustainable Urban Management</a><span class="breadcrumbs__separator"><svg aria-hidden="true" class="icon-right-triangle" xmlns="http://www.w3.org/2000/svg" width="6" height="8" viewBox="0 0 6 8">
<path class="_mark" fill="#AEB4BA" fill-rule="evenodd" d="M0 0l6 4-6 4z"/>
</svg>
</span>
</li>
<li class="breadcrumbs__item">
<a href="#" class="breadcrumbs__item-link">
Resources</a><span class="breadcrumbs__separator"><svg aria-hidden="true" class="icon-right-triangle" xmlns="http://www.w3.org/2000/svg" width="6" height="8" viewBox="0 0 6 8">
<path class="_mark" fill="#AEB4BA" fill-rule="evenodd" d="M0 0l6 4-6 4z"/>
</svg>
</span>
</li>
<li class="breadcrumbs__item">
<span class="breadcrumbs__item-current">
Student projects
</span>
</li>
</ul>
</nav>
{% if breadcrumbs %}
<nav aria-label="Breadcrumb navigation" class="breadcrumbs breadcrumbs--{{ siteUnit }}">
<ul class="breadcrumbs__list">
{% for item in breadcrumbs %}
<li class="breadcrumbs__item">
{% if loop.last %}
<span class="breadcrumbs__item-current">
{{ item.title }}
</span>
{% else %}
<a href="{{ item.url }}" class="breadcrumbs__item-link">
{{ item.title }}</a><span class="breadcrumbs__separator">{% include 'bits/icons/right-triangle.twig' %}</span>
{% endif %}
</li>
{% endfor %}
</ul>
</nav>
{% endif %}
{
"siteUnit": "network",
"departmentName": "Network",
"background": "light",
"breadcrumbs": [
{
"title": "Home",
"url": "#"
},
{
"title": "Programs & Applying",
"url": "#"
},
{
"title": "Master of Science in Sustainable Urban Management",
"url": "#"
},
{
"title": "Resources",
"url": "#"
},
{
"title": "Student projects",
"url": "#"
}
]
}
.breadcrumbs
--borderColor illiniOrange
&--arch
--borderColor industrialBlue
&--art
--borderColor archesBlue
&--college
--borderColor illiniOrange
&--dance
--borderColor archesBlue
&--college
--borderColor illiniOrange
&--durp
--borderColor illiniOrange
&--landarch
--borderColor illiniOrange
&--theatre
--borderColor illiniOrange
&--music
--borderColor illiniOrange
&__list
display flex
flex-wrap wrap
&__item
margin-right 8px
&__item-link
border-bottom 1px solid transparent
color greyDarkest
font-size 16px
font-family proximaNova
font-weight 500
line-height 1.5
text-decoration none
&:focus
&:hover
&:active
border-bottom-color var(--borderColor)
&__item-current
color charcoalLight
font-family proximaNova
font-size 16px
font-weight 700
&__separator
margin-left 8px
display inline-block
position relative
top -1px
&--music &__item-current
color white
&--music &__item-link
color rgba(255, 255, 255, 0.75)
There are no notes for this item.