<ul class="utility-navigation ">
<li class="utility-navigation__item">
<a href="#" class="
utility-navigation__item-link
">
Member directory
</a>
</li>
<li class="utility-navigation__item">
<a href="#" class="
utility-navigation__item-link
utility-navigation__item-link--is-active
">
Events
</a>
</li>
<li class="utility-navigation__item">
<a href="#" class="
utility-navigation__item-link
">
Blog
</a>
</li>
</ul>
<ul class="utility-navigation {% if isMobile %} utility-navigation--mobile {% endif %}">
{% if utilityNavigation.title %}
<li class="utility-navigation__title">
{{ utilityNavigation.title }}
</li>
{% endif %}
{% for item in utilityNavigation.items %}
<li class="utility-navigation__item">
<a
href="{{ item.url }}"
class="
utility-navigation__item-link
{{ item.isActive ? ' utility-navigation__item-link--is-active' : '' }}
"
>
{{ item.title }}
</a>
</li>
{% endfor %}
</ul>
{
"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": []
}
]
}
]
}
}
.utility-navigation {
--itemTextColor: var(--lightBlue);
--underlineColor: transparent;
@include bodySmall;
display: flex;
gap: 1.12rem;
white-space: nowrap;
&__item-link {
color: var(--itemTextColor);
border-bottom: 1px solid var(--underlineColor);
text-decoration: none;
&:focus,
&:hover,
&:active,
&:focus-within {
border-color: var(--itemTextColor);
}
}
}
.utility-navigation--mobile {
--itemTextColor: var(--purple);
--underlineColor: var(--itemTextColor);
flex-direction: column;
gap: 0.62rem;
}
No notes defined.