<nav class="secondary-navigation">
<div class="secondary-navigation__heading">
Programs & Projects
</div>
<ul class="secondary-navigation">
<li class="secondary-navigation__item ">
<a class="
secondary-navigation__item-link
" href="#">Data Modernization
</a>
</li>
<li class="secondary-navigation__item ">
<a class="
secondary-navigation__item-link
" href="#">Environmental Health and Emergency Preparedness
</a>
</li>
<li class="secondary-navigation__item secondary-navigation__item--has-children">
<div class="secondary-navigation__item-wrapper"> <a class="
secondary-navigation__item-link
secondary-navigation__item-link--active
secondary-navigation__item-link--has-children" href="#">Evaluation and Impact
</a>
<button class="secondary-navigation__item-button" data-secondary-submenu-toggle aria-expanded="false" aria-label="Evaluation and Impact submenu">
<span class="secondary-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>
</div>
<ul class="secondary-navigation-children" data-secondary-navigation-item>
<li class="secondary-navigation-children__item ">
<a class="
secondary-navigation-children__item-link
secondary-navigation-children__item-link--active
" href="#">Third level example
</a>
<ul class="secondary-navigation-children" data-secondary-navigation-item>
<li class="secondary-navigation-children__item ">
<a class="
secondary-navigation-children__item-link
secondary-navigation-children__item-link--active
" href="#">Fourth level example
</a>
<ul class="secondary-navigation-children" data-secondary-navigation-item>
<li class="secondary-navigation-children__item ">
<a class="
secondary-navigation-children__item-link
secondary-navigation-children__item-link--active
" href="#">Fifth level example
</a>
<ul class="secondary-navigation-children" data-secondary-navigation-item>
</ul>
</li>
</ul>
</li>
<li class="secondary-navigation-children__item ">
<a class="
secondary-navigation-children__item-link
" href="#">Fourth level example 2
</a>
</li>
<li class="secondary-navigation-children__item ">
<a class="
secondary-navigation-children__item-link
" href="#">Fourth level example 3
</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="secondary-navigation__item ">
<a class="
secondary-navigation__item-link
" href="#">Multisector Strategies and Population Health
</a>
</li>
<li class="secondary-navigation__item ">
<a class="
secondary-navigation__item-link
" href="#">Public Health Events and Convenings Management
</a>
</li>
<li class="secondary-navigation__item ">
<a class="
secondary-navigation__item-link
" href="#">Public Health Infrastructure Grant
</a>
</li>
<li class="secondary-navigation__item ">
<a class="
secondary-navigation__item-link
" href="#">Public health training
</a>
</li>
</ul>
</nav>
{% set hasRenderedMenu = false %}
{% for item in primaryNavigation.items %}
{% if (item.isDescendantActive or item.isActive) and not hasRenderedMenu %}
{% set hasRenderedMenu = true %}
<nav class="secondary-navigation">
<div class="secondary-navigation__heading">
{{ item.title }}
</div>
<ul class="secondary-navigation">
{% for item in item.children %}
<li class="secondary-navigation__item {{ item.children ? 'secondary-navigation__item--has-children' }}">
{% if item.children %}<div class="secondary-navigation__item-wrapper">{% endif %}
<a class="
secondary-navigation__item-link
{{ item.isActive or item.isDescendantActive ? 'secondary-navigation__item-link--active' }}
{{ item.children ? 'secondary-navigation__item-link--has-children'}}"
href="{{ item.url }}">{{ item.title }}
</a>
{% if item.children %}
<button class="secondary-navigation__item-button" data-secondary-submenu-toggle aria-expanded="false" aria-label="{{ item.title }} submenu" >
<span class="secondary-navigation__item-link-icon">
{% include 'bits/icons/chevron-down.twig' %}
</span>
</button>
</div>
{% include 'partials/navigation/secondary-navigation-children/secondary-navigation-children.twig' with { items: item.children } %}
{% endif %}
</li>
{% endfor %}
</ul>
</nav>
{% endif %}
{% endfor %}
{
"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": []
}
]
}
]
},
"latest_blog_component": {
"heading": "Latest from the Blog",
"moreLinkText": "View all posts",
"moreLinkUrl": "#",
"moreLinkType": "internal",
"cards": [
{
"type": "Press Release",
"typeIcon": "bullhorn",
"title": "Mauris nibh felis adipiscing varius in lacinia vel tellus",
"isComplete": true
},
{
"type": "Announcement",
"typeIcon": "update-boxes",
"title": "Mauris nibh felis adipiscing varius in lacinia vel tellus Lorem nulla nostrud velit anim lorem anim lorem qui enim.",
"isComplete": true
},
{
"type": "Press Release",
"typeIcon": "bullhorn",
"title": "Mauris nibh felis adipiscing varius in lacinia vel tellus",
"isComplete": true
}
]
}
}
.secondary-navigation {
--linkColor: var(--navy);
--linkHoverColor: var(--purple);
--borderColor: var(--blue);
--iconFillColor: var(--brightPurple);
width: 20rem;
&__heading {
@include headline5;
align-items: center;
border-bottom: 1px solid var(--borderColor);
color: var(--linkColor);
display: flex;
justify-content: space-between;
padding: 0.75rem 0;
text-decoration: none;
width: 100%;
}
&__item {
&:not(:first-child) {
border-top: 1px solid var(--borderColor);
}
width: 100%;
}
&__item-link {
@include bodySmall;
color: var(--linkColor);
display: block;
padding-left: 1rem;
padding: 1rem 0;
text-decoration: none;
&--active {
font-weight: bold;
}
&:focus,
&:hover,
&:active {
color: var(--linkHoverColor);
text-decoration: underline;
}
}
&__item--has-children {
display: flex;
flex-flow: row wrap;
justify-content: space-between;
.secondary-navigation__item-link {
flex: 1 1 auto;
}
}
&__item-wrapper {
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
gap: 0.50rem;
width: 100%;
}
&__item-button {
display: flex;
flex: 0 0 3rem;
align-items: center;
justify-content: center;
background-color: transparent;
border: none;
cursor: pointer;
padding: 0;
width: 3rem;
svg {
@include animate("transform");
& {
width: 1rem;
height: 1rem;
fill: var(--iconFillColor);
}
}
&[aria-expanded="true"] {
svg {
transform: rotate(-180deg);
}
}
}
}
No notes defined.