<div role="navigation" aria-label="Main Navigation" class="primary-navigation">
<ul class="primary-navigation__list">
<li class="primary-navigation__item" data-item-has-children data-large-primary-navigation-item="hidden">
<a class="
primary-navigation__item-link
" href="#" data-main-has-submenu>
<span class="primary-navigation__item-link-text">
Workforce resources
</span>
</a>
<button class="primary-navigation__submenu-toggle" data-submenu-large-toggle aria-expanded="false" aria-label="Workforce resources submenu" aria-haspopup="menu">
<span class="primary-navigation__item-link-icon">
<svg role="img" width="12" height="8" viewBox="0 0 12 8" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<title>toggle</title>
<g>
<path d="M5.98003 4.99531L0.00647545 0.5L0 0.5V3.49611L5.97463 8L12 3.48968V0.490351L5.98003 4.99531Z" />
</g>
</svg>
</span>
</button>
<ul class="primary-navigation-children">
<li class="primary-navigation-children-item">
<a class="
primary-navigation-children__item-link
" href="#">Resource Directory
</a>
</li>
<li class="primary-navigation-children-item">
<a class="
primary-navigation-children__item-link
" href="#">Trainings
</a>
</li>
</ul>
</li>
<li class="primary-navigation__item" data-item-has-children data-large-primary-navigation-item="hidden">
<a class="
primary-navigation__item-link
primary-navigation__item-link--active-trail
" href="#" data-main-has-submenu>
<span class="primary-navigation__item-link-text">
Programs & Projects
</span>
</a>
<button class="primary-navigation__submenu-toggle" data-submenu-large-toggle aria-expanded="false" aria-label="Programs & Projects submenu" aria-haspopup="menu">
<span class="primary-navigation__item-link-icon">
<svg role="img" width="12" height="8" viewBox="0 0 12 8" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<title>toggle</title>
<g>
<path d="M5.98003 4.99531L0.00647545 0.5L0 0.5V3.49611L5.97463 8L12 3.48968V0.490351L5.98003 4.99531Z" />
</g>
</svg>
</span>
</button>
<ul class="primary-navigation-children">
<li class="primary-navigation-children-item">
<a class="
primary-navigation-children__item-link
" href="#">Data Modernization
</a>
</li>
<li class="primary-navigation-children-item">
<a class="
primary-navigation-children__item-link
" href="#">Environmental Health and Emergency Preparedness
</a>
</li>
<li class="primary-navigation-children-item">
<a class="
primary-navigation-children__item-link
primary-navigation-children__item-link--active-trail
" href="#">Evaluation and Impact
</a>
</li>
<li class="primary-navigation-children-item">
<a class="
primary-navigation-children__item-link
" href="#">Multisector Strategies and Population Health
</a>
</li>
<li class="primary-navigation-children-item">
<a class="
primary-navigation-children__item-link
" href="#">Public Health Events and Convenings Management
</a>
</li>
<li class="primary-navigation-children-item">
<a class="
primary-navigation-children__item-link
" href="#">Public Health Infrastructure Grant
</a>
</li>
<li class="primary-navigation-children-item">
<a class="
primary-navigation-children__item-link
" href="#">Public health training
</a>
</li>
</ul>
</li>
<li class="primary-navigation__item" data-item-has-children data-large-primary-navigation-item="hidden">
<a class="
primary-navigation__item-link
" href="#" data-main-has-submenu>
<span class="primary-navigation__item-link-text">
Explore the Network
</span>
</a>
<button class="primary-navigation__submenu-toggle" data-submenu-large-toggle aria-expanded="false" aria-label="Explore the Network submenu" aria-haspopup="menu">
<span class="primary-navigation__item-link-icon">
<svg role="img" width="12" height="8" viewBox="0 0 12 8" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<title>toggle</title>
<g>
<path d="M5.98003 4.99531L0.00647545 0.5L0 0.5V3.49611L5.97463 8L12 3.48968V0.490351L5.98003 4.99531Z" />
</g>
</svg>
</span>
</button>
<ul class="primary-navigation-children">
<li class="primary-navigation-children-item">
<a class="
primary-navigation-children__item-link
" href="#">Member Directory
</a>
</li>
<li class="primary-navigation-children-item">
<a class="
primary-navigation-children__item-link
" href="#">Membership paths
</a>
</li>
</ul>
</li>
<li class="primary-navigation__item">
<a class="
primary-navigation__item-link
" href="#">
<span class="primary-navigation__item-link-text">
Partner with us
</span>
</a>
</li>
<li class="primary-navigation__item" data-item-has-children data-large-primary-navigation-item="hidden">
<a class="
primary-navigation__item-link
" href="#" data-main-has-submenu>
<span class="primary-navigation__item-link-text">
About
</span>
</a>
<button class="primary-navigation__submenu-toggle" data-submenu-large-toggle aria-expanded="false" aria-label="About submenu" aria-haspopup="menu">
<span class="primary-navigation__item-link-icon">
<svg role="img" width="12" height="8" viewBox="0 0 12 8" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
<title>toggle</title>
<g>
<path d="M5.98003 4.99531L0.00647545 0.5L0 0.5V3.49611L5.97463 8L12 3.48968V0.490351L5.98003 4.99531Z" />
</g>
</svg>
</span>
</button>
<ul class="primary-navigation-children">
<li class="primary-navigation-children-item">
<a class="
primary-navigation-children__item-link
" href="#">Blog
</a>
</li>
<li class="primary-navigation-children-item">
<a class="
primary-navigation-children__item-link
" href="#">Events
</a>
</li>
<li class="primary-navigation-children-item">
<a class="
primary-navigation-children__item-link
" href="#">Newsletters
</a>
</li>
<li class="primary-navigation-children-item">
<a class="
primary-navigation-children__item-link
" href="#">Signature programs
</a>
</li>
<li class="primary-navigation-children-item">
<a class="
primary-navigation-children__item-link
" href="#">Contact us
</a>
</li>
<li class="primary-navigation-children-item">
<a class="
primary-navigation-children__item-link
" href="#">Meet the team
</a>
</li>
</ul>
</li>
</ul>
</div>
<div role="navigation" aria-label="Main Navigation" class="primary-navigation">
<ul class="primary-navigation__list">
{% for item in primaryNavigation.items %}
<li class="primary-navigation__item" {% if item.children %}data-item-has-children data-large-primary-navigation-item="hidden"{% endif %}>
<a class="
primary-navigation__item-link
{{ item.isActive ? 'primary-navigation__item-link--active' }}
{{ item.isDescendantActive ? 'primary-navigation__item-link--active-trail' }}
"
href="{{ item.url }}"
{{ item.children ? 'data-main-has-submenu'}}>
<span class="primary-navigation__item-link-text">
{{ item.title }}
</span>
</a>
{% if item.children %}
<button class="primary-navigation__submenu-toggle" data-submenu-large-toggle aria-expanded="false" aria-label="{{ item.title }} submenu" aria-haspopup="menu">
<span class="primary-navigation__item-link-icon">
{% include 'bits/icons/chevron-down.twig' %}
</span>
</button>
<ul class="primary-navigation-children">
{% for item in item.children %}
<li class="primary-navigation-children-item">
<a
class="
primary-navigation-children__item-link
{{ item.isActive ? 'primary-navigation-children__item-link--active' }}
{{ item.isDescendantActive ? 'primary-navigation-children__item-link--active-trail' }}
"
href="{{ item.url }}">{{ item.title }}
</a>
</li>
{% endfor %}
</ul>
{% endif %}
</li>
{% endfor %}
</ul>
</div>
{
"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": []
}
]
}
]
}
}
$breakpointLarge: 106.25rem;
.primary-navigation {
display: flex;
justify-content: end;
width: 100%;
&__list {
display: flex;
gap: 1.5rem;
}
&__item {
display: flex;
position: relative;
@media (max-width: $breakpointLarge) {
flex: 1 0;
}
/* Add dropdown functionality */
&:is(:hover) > ul {
display: flex;
}
&:is(:hover) {
svg {
transform: rotate(-180deg);
}
}
}
&__item-link {
@include headline6;
align-items: center;
color: var(--black);
display: flex;
position: relative;
text-decoration: none;
transition: all 0.2s;
&:focus,
&:hover,
&:active {
color: var(--purple);
}
&--active,
&--active-trail {
color: var(--blue);
}
}
&__item-link-icon {
align-items: center;
color: var(--brightPurple);
display: inline-flex;
margin-left: .5rem;
width: 0.75rem;
}
&__submenu-toggle {
width: 1.5rem;
svg {
@include animate("transform");
width: 1.5rem;
height: 1.5rem;
}
&[aria-expanded="true"] {
svg {
transform: rotate(-180deg);
}
}
}
}
.primary-navigation-children {
background-color: var(--white);
box-shadow: 0px 0.5rem 1rem rgba(0, 0, 0, 0.3);
display: none;
flex-direction: column;
gap: 0.75rem;
left: 0;
padding: 1.5rem;
position: absolute;
top: calc(100% - 2rem);
z-index: 3;
min-width: max-content;
&__item-link {
@include bodySmall;
display: block;
color: var(--black);
text-decoration: none;
max-width: 20rem;
&:focus,
&:hover,
&:active {
color: var(--purple);
}
&--active,
&--active-trail {
color: var(--blue);
}
}
[data-large-primary-navigation-item="visible"] & {
display: flex;
}
}
No notes defined.