<nav aria-label="Breadcrumb navigation" class="breadcrumbs breadcrumbs--white">
<ul class="breadcrumbs__list">
<li class="breadcrumbs__item">
<a href="#" class="breadcrumbs__item-link">Home</a>
<span class="breadcrumbs__separator">
<svg role="img" xmlns="http://www.w3.org/2000/svg" width="7" height="12" fill="none">
<title>right chevron</title>
<path fill="#21415B" d="M4.995 6.02.5 12h1.996L7 6.025 2.49 0h-2l4.505 6.02Z" />
</svg>
</span>
</li>
<li class="breadcrumbs__item">
<a href="#" class="breadcrumbs__item-link">Primary Page One</a>
<span class="breadcrumbs__separator">
<svg role="img" xmlns="http://www.w3.org/2000/svg" width="7" height="12" fill="none">
<title>right chevron</title>
<path fill="#21415B" d="M4.995 6.02.5 12h1.996L7 6.025 2.49 0h-2l4.505 6.02Z" />
</svg>
</span>
</li>
<li class="breadcrumbs__item">
<span class="breadcrumbs__item-current">
Interior Page One
</span>
</li>
</ul>
</nav>
<nav aria-label="Breadcrumb navigation" class="breadcrumbs breadcrumbs--{{ background }}">
<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-chevron--thin.twig' %}
</span>
{% endif %}
</li>
{% endfor %}
</ul>
</nav>
{
"site": {
"title": "National Network of Public Health Institutes"
},
"background": "white",
"breadcrumbs": [
{
"title": "Home",
"url": "#"
},
{
"title": "Primary Page One",
"url": "#"
},
{
"title": "Interior Page One",
"url": "#"
}
],
"footerLinks": {
"items": [
{
"title": "Subscribe to our newsletter",
"url": "#"
},
{
"title": "Explore membership benefits",
"url": "#"
},
{
"title": "See career opportunities",
"url": "#"
}
]
},
"contactInfo": {
"copyright": "© National Network of Public Health Institutes. All Rights Reserved",
"facebookLink": "https://facebook.com",
"linkedInLink": "https://linkedin.com",
"youtubeLink": "https://youtube.com",
"flickrLink": "https://flickr.com",
"twitterLink": "https://twitter.com",
"instagramLink": "https://instagram.com",
"youTubeLink": "https://youtube.com"
},
"utilityNavigation": {
"items": [
{
"title": "Member directory",
"url": "#"
},
{
"title": "Events",
"url": "#",
"isActive": true
},
{
"title": "Blog",
"url": "#"
}
]
},
"primaryNavigation": {
"items": [
{
"title": "Workforce resources",
"url": "#",
"children": [
{
"title": "Resource Directory",
"url": "#",
"children": []
},
{
"title": "Trainings",
"url": "#",
"children": [
{
"title": "Training Level 3 example",
"url": "#"
}
]
}
]
},
{
"title": "Programs & Projects",
"url": "#",
"isDescendantActive": true,
"children": [
{
"title": "Data Modernization",
"url": "#",
"children": []
},
{
"title": "Environmental Health and Emergency Preparedness",
"url": "#",
"children": []
},
{
"title": "Evaluation and Impact",
"url": "#",
"isDescendantActive": true,
"children": [
{
"title": "Third level example",
"url": "#",
"isActive": true,
"children": [
{
"title": "Fourth level example",
"url": "#",
"isActive": true,
"children": [
{
"title": "Fifth level example",
"url": "#",
"isActive": true
}
]
},
{
"title": "Fourth level example 2",
"url": "#"
},
{
"title": "Fourth level example 3",
"url": "#"
}
]
}
]
},
{
"title": "Multisector Strategies and Population Health",
"url": "#",
"children": []
},
{
"title": "Public Health Events and Convenings Management",
"url": "#",
"children": []
},
{
"title": "Public Health Infrastructure Grant",
"url": "#",
"children": []
},
{
"title": "Public health training",
"url": "#",
"children": []
}
]
},
{
"title": "Explore the Network",
"url": "#",
"children": [
{
"title": "Member Directory",
"url": "#",
"children": []
},
{
"title": "Membership paths",
"url": "#",
"children": []
}
]
},
{
"title": "Partner with us",
"url": "#"
},
{
"title": "About",
"url": "#",
"children": [
{
"title": "Blog",
"url": "#",
"children": []
},
{
"title": "Events",
"url": "#",
"children": []
},
{
"title": "Newsletters",
"url": "#",
"children": []
},
{
"title": "Signature programs",
"url": "#",
"children": []
},
{
"title": "Contact us",
"url": "#",
"children": []
},
{
"title": "Meet the team",
"url": "#",
"children": []
}
]
}
]
}
}
.breadcrumbs {
--borderColor: var(--navy);
--textColor: var(--navy);
&--dark {
--borderColor: var(--white);
--textColor: var(--white);
}
&__list {
display: flex;
flex-wrap: wrap;
}
&__item {
margin-right: 1.5rem;
}
&__item-link {
@include bodySmall;
border-bottom: 1px solid var(--borderColor);
color: var(--textColor);
text-decoration: none;
&:focus,
&:hover,
&:active {
border-bottom-color: var(--borderColor);
}
}
&__item-current {
@include bodySmall;
color: var(--textColor);
}
&__separator {
display: inline-block;
width: 8px;
margin-left: 1.5rem;
position: relative;
& svg {
width: 100%;
& .right-chevron__shape {
fill: var(--textColor);
}
}
}
}
No notes defined.