<div role="navigation" aria-label="Main Navigation" class="small-primary-navigation">
<ul class="small-primary-navigation__list">
<li class="small-primary-navigation__item" data-small-primary-navigation-item>
<div class="small-primary-navigation__item-container">
<a data-small-primary-navigation-link class="
small-primary-navigation__item-link
" href="#">Workforce resources
<span class="small-primary-navigation__item-link-icon">
<svg role="img" class="right-chevron" xmlns="http://www.w3.org/2000/svg" fill="currentColor" aria-hidden="true" viewBox="0 0 8 12">
<title>right chevron</title>
<path class="_mark right-chevron__shape" d="M4.50496 5.98003L0.00107202 0.0064757L0.00964937 2.55136e-07L3.49611 5.59932e-07L8 5.97463L3.48968 12L-9.53674e-07 12L4.50496 5.98003Z" />
</svg>
</span>
</a>
<button aria-expanded="false" data-submenu-small-toggle class="small-primary-navigation__item-toggle" aria-label="toggle Workforce resources menu">
<span class="small-primary-navigation__item-toggle-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>
<div class="small-primary-navigation__children" data-small-primary-navigation-children>
<ul class="small-primary-navigation__children-list" data-depth="1" data-small-primary-navigation-children data-active="false">
<li class="small-primary-navigation__item" data-small-primary-navigation-item>
<div class="small-primary-navigation__item-container">
<a data-small-primary-navigation-link class="small-primary-navigation__item-link
" href="#">Resource Directory
</a>
</div>
</li>
<li class="small-primary-navigation__item" data-small-primary-navigation-item>
<div class="small-primary-navigation__item-container">
<a data-small-primary-navigation-link class="small-primary-navigation__item-link
" href="#">Trainings
</a>
<button aria-expanded="false" data-submenu-small-toggle data-submenu-depth="1" class="small-primary-navigation__item-toggle" aria-label="toggle Trainings menu">
<span class="small-primary-navigation__item-toggle-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>
<div class="small-primary-navigation__children" data-small-primary-navigation-children>
<ul class="small-primary-navigation__children-list" data-depth="2" data-small-primary-navigation-children data-active="false">
<li class="small-primary-navigation__item" data-small-primary-navigation-item>
<div class="small-primary-navigation__item-container">
<a data-small-primary-navigation-link class="small-primary-navigation__item-link
" href="#">Training Level 3 example
</a>
</div>
</li>
</ul>
</div>
</li>
</ul>
</div>
</li>
<li class="small-primary-navigation__item" data-small-primary-navigation-item>
<div class="small-primary-navigation__item-container">
<a data-small-primary-navigation-link class="
small-primary-navigation__item-link
small-primary-navigation__item-link--active-trail" href="#">Programs & Projects
<span class="small-primary-navigation__item-link-icon">
<svg role="img" class="right-chevron" xmlns="http://www.w3.org/2000/svg" fill="currentColor" aria-hidden="true" viewBox="0 0 8 12">
<title>right chevron</title>
<path class="_mark right-chevron__shape" d="M4.50496 5.98003L0.00107202 0.0064757L0.00964937 2.55136e-07L3.49611 5.59932e-07L8 5.97463L3.48968 12L-9.53674e-07 12L4.50496 5.98003Z" />
</svg>
</span>
</a>
<button aria-expanded="false" data-submenu-small-toggle class="small-primary-navigation__item-toggle" aria-label="toggle Programs & Projects menu">
<span class="small-primary-navigation__item-toggle-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>
<div class="small-primary-navigation__children" data-small-primary-navigation-children>
<ul class="small-primary-navigation__children-list" data-depth="1" data-small-primary-navigation-children data-active="false">
<li class="small-primary-navigation__item" data-small-primary-navigation-item>
<div class="small-primary-navigation__item-container">
<a data-small-primary-navigation-link class="small-primary-navigation__item-link
" href="#">Data Modernization
</a>
</div>
</li>
<li class="small-primary-navigation__item" data-small-primary-navigation-item>
<div class="small-primary-navigation__item-container">
<a data-small-primary-navigation-link class="small-primary-navigation__item-link
" href="#">Environmental Health and Emergency Preparedness
</a>
</div>
</li>
<li class="small-primary-navigation__item" data-small-primary-navigation-item>
<div class="small-primary-navigation__item-container">
<a data-small-primary-navigation-link class="small-primary-navigation__item-link
small-primary-navigation__item-link--active-trail
" href="#">Evaluation and Impact
</a>
<button aria-expanded="false" data-submenu-small-toggle data-submenu-depth="1" class="small-primary-navigation__item-toggle" aria-label="toggle Evaluation and Impact menu">
<span class="small-primary-navigation__item-toggle-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>
<div class="small-primary-navigation__children" data-small-primary-navigation-children>
<ul class="small-primary-navigation__children-list" data-depth="2" data-small-primary-navigation-children data-active="false">
<li class="small-primary-navigation__item" data-small-primary-navigation-item>
<div class="small-primary-navigation__item-container">
<a data-small-primary-navigation-link class="small-primary-navigation__item-link
small-primary-navigation__item-link--active
" href="#">Third level example
</a>
<button aria-expanded="false" data-submenu-small-toggle data-submenu-depth="2" class="small-primary-navigation__item-toggle" aria-label="toggle Third level example menu">
<span class="small-primary-navigation__item-toggle-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>
<div class="small-primary-navigation__children" data-small-primary-navigation-children>
<ul class="small-primary-navigation__children-list" data-depth="3" data-small-primary-navigation-children data-active="false">
<li class="small-primary-navigation__item" data-small-primary-navigation-item>
<div class="small-primary-navigation__item-container">
<a data-small-primary-navigation-link class="small-primary-navigation__item-link
small-primary-navigation__item-link--active
" href="#">Fourth level example
</a>
<button aria-expanded="false" data-submenu-small-toggle data-submenu-depth="3" class="small-primary-navigation__item-toggle" aria-label="toggle Fourth level example menu">
<span class="small-primary-navigation__item-toggle-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>
<div class="small-primary-navigation__children" data-small-primary-navigation-children>
<ul class="small-primary-navigation__children-list" data-depth="4" data-small-primary-navigation-children data-active="false">
<li class="small-primary-navigation__item" data-small-primary-navigation-item>
<div class="small-primary-navigation__item-container">
<a data-small-primary-navigation-link class="small-primary-navigation__item-link
small-primary-navigation__item-link--active
" href="#">Fifth level example
</a>
</div>
</li>
</ul>
</div>
</li>
<li class="small-primary-navigation__item" data-small-primary-navigation-item>
<div class="small-primary-navigation__item-container">
<a data-small-primary-navigation-link class="small-primary-navigation__item-link
" href="#">Fourth level example 2
</a>
</div>
</li>
<li class="small-primary-navigation__item" data-small-primary-navigation-item>
<div class="small-primary-navigation__item-container">
<a data-small-primary-navigation-link class="small-primary-navigation__item-link
" href="#">Fourth level example 3
</a>
</div>
</li>
</ul>
</div>
</li>
</ul>
</div>
</li>
<li class="small-primary-navigation__item" data-small-primary-navigation-item>
<div class="small-primary-navigation__item-container">
<a data-small-primary-navigation-link class="small-primary-navigation__item-link
" href="#">Multisector Strategies and Population Health
</a>
</div>
</li>
<li class="small-primary-navigation__item" data-small-primary-navigation-item>
<div class="small-primary-navigation__item-container">
<a data-small-primary-navigation-link class="small-primary-navigation__item-link
" href="#">Public Health Events and Convenings Management
</a>
</div>
</li>
<li class="small-primary-navigation__item" data-small-primary-navigation-item>
<div class="small-primary-navigation__item-container">
<a data-small-primary-navigation-link class="small-primary-navigation__item-link
" href="#">Public Health Infrastructure Grant
</a>
</div>
</li>
<li class="small-primary-navigation__item" data-small-primary-navigation-item>
<div class="small-primary-navigation__item-container">
<a data-small-primary-navigation-link class="small-primary-navigation__item-link
" href="#">Public health training
</a>
</div>
</li>
</ul>
</div>
</li>
<li class="small-primary-navigation__item" data-small-primary-navigation-item>
<div class="small-primary-navigation__item-container">
<a data-small-primary-navigation-link class="
small-primary-navigation__item-link
" href="#">Explore the Network
<span class="small-primary-navigation__item-link-icon">
<svg role="img" class="right-chevron" xmlns="http://www.w3.org/2000/svg" fill="currentColor" aria-hidden="true" viewBox="0 0 8 12">
<title>right chevron</title>
<path class="_mark right-chevron__shape" d="M4.50496 5.98003L0.00107202 0.0064757L0.00964937 2.55136e-07L3.49611 5.59932e-07L8 5.97463L3.48968 12L-9.53674e-07 12L4.50496 5.98003Z" />
</svg>
</span>
</a>
<button aria-expanded="false" data-submenu-small-toggle class="small-primary-navigation__item-toggle" aria-label="toggle Explore the Network menu">
<span class="small-primary-navigation__item-toggle-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>
<div class="small-primary-navigation__children" data-small-primary-navigation-children>
<ul class="small-primary-navigation__children-list" data-depth="1" data-small-primary-navigation-children data-active="false">
<li class="small-primary-navigation__item" data-small-primary-navigation-item>
<div class="small-primary-navigation__item-container">
<a data-small-primary-navigation-link class="small-primary-navigation__item-link
" href="#">Member Directory
</a>
</div>
</li>
<li class="small-primary-navigation__item" data-small-primary-navigation-item>
<div class="small-primary-navigation__item-container">
<a data-small-primary-navigation-link class="small-primary-navigation__item-link
" href="#">Membership paths
</a>
</div>
</li>
</ul>
</div>
</li>
<li class="small-primary-navigation__item" data-small-primary-navigation-item>
<div class="small-primary-navigation__item-container">
<a data-small-primary-navigation-link class="
small-primary-navigation__item-link
" href="#">Partner with us
</a>
</div>
</li>
<li class="small-primary-navigation__item" data-small-primary-navigation-item>
<div class="small-primary-navigation__item-container">
<a data-small-primary-navigation-link class="
small-primary-navigation__item-link
" href="#">About
<span class="small-primary-navigation__item-link-icon">
<svg role="img" class="right-chevron" xmlns="http://www.w3.org/2000/svg" fill="currentColor" aria-hidden="true" viewBox="0 0 8 12">
<title>right chevron</title>
<path class="_mark right-chevron__shape" d="M4.50496 5.98003L0.00107202 0.0064757L0.00964937 2.55136e-07L3.49611 5.59932e-07L8 5.97463L3.48968 12L-9.53674e-07 12L4.50496 5.98003Z" />
</svg>
</span>
</a>
<button aria-expanded="false" data-submenu-small-toggle class="small-primary-navigation__item-toggle" aria-label="toggle About menu">
<span class="small-primary-navigation__item-toggle-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>
<div class="small-primary-navigation__children" data-small-primary-navigation-children>
<ul class="small-primary-navigation__children-list" data-depth="1" data-small-primary-navigation-children data-active="false">
<li class="small-primary-navigation__item" data-small-primary-navigation-item>
<div class="small-primary-navigation__item-container">
<a data-small-primary-navigation-link class="small-primary-navigation__item-link
" href="#">Blog
</a>
</div>
</li>
<li class="small-primary-navigation__item" data-small-primary-navigation-item>
<div class="small-primary-navigation__item-container">
<a data-small-primary-navigation-link class="small-primary-navigation__item-link
" href="#">Events
</a>
</div>
</li>
<li class="small-primary-navigation__item" data-small-primary-navigation-item>
<div class="small-primary-navigation__item-container">
<a data-small-primary-navigation-link class="small-primary-navigation__item-link
" href="#">Newsletters
</a>
</div>
</li>
<li class="small-primary-navigation__item" data-small-primary-navigation-item>
<div class="small-primary-navigation__item-container">
<a data-small-primary-navigation-link class="small-primary-navigation__item-link
" href="#">Signature programs
</a>
</div>
</li>
<li class="small-primary-navigation__item" data-small-primary-navigation-item>
<div class="small-primary-navigation__item-container">
<a data-small-primary-navigation-link class="small-primary-navigation__item-link
" href="#">Contact us
</a>
</div>
</li>
<li class="small-primary-navigation__item" data-small-primary-navigation-item>
<div class="small-primary-navigation__item-container">
<a data-small-primary-navigation-link class="small-primary-navigation__item-link
" href="#">Meet the team
</a>
</div>
</li>
</ul>
</div>
</li>
</ul>
</div>
<div
role="navigation"
aria-label="Main Navigation"
class="small-primary-navigation">
<ul class="small-primary-navigation__list">
{% for item in primaryNavigation.items %}
<li class="small-primary-navigation__item" data-small-primary-navigation-item>
<div class="small-primary-navigation__item-container">
<a
data-small-primary-navigation-link
class="
small-primary-navigation__item-link
{{ item.isActive ? 'small-primary-navigation__item-link--active' }}
{{ item.isDescendantActive ? 'small-primary-navigation__item-link--active-trail' }}"
href="{{ item.url }}">{{ item.title }}
{% if item.children %}
<span class="small-primary-navigation__item-link-icon">
{% include 'bits/icons/right-chevron.twig' %}
</span>
{% endif %}
</a>
{% if item.children %}
<button aria-expanded="false" data-submenu-small-toggle class="small-primary-navigation__item-toggle" aria-label="toggle {{ item.title }} menu">
<span class="small-primary-navigation__item-toggle-icon">
{% include 'bits/icons/chevron-down.twig' %}
</span>
</button>
{% endif %}
</div>
{% if item.children %}
<div class="small-primary-navigation__children" data-small-primary-navigation-children>
{% include 'partials/navigation/small-primary-navigation-children/small-primary-navigation-children.twig' with { items: item.children } %}
</div>
{% 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": []
}
]
}
]
}
}
.small-primary-navigation {
--activeBackgroundColor: transparent;
--backgroundColor: var(--white);
--iconFillColor: var(--brightPurple);
--itemBackgroundColor: transparent;
--itemBackgroundColorActive: transparent;
--itemTextColor: var(--black);
--itemTextColorActive: var(--purple);
--childrenTextColor: var(--purple);
background-color: var(--backgroundColor);
max-width: 25rem;
width: 100%;
position: relative;
z-index: 1;
&__list {
display: flex;
flex-direction: column;
}
&__item-container {
display: flex;
border-bottom: 1px solid var(--grayTint);
}
&__item-link {
@include headline6;
color: var(--itemTextColor);
display: block;
text-decoration: none;
background-color: var(--itemBackgroundColor);
flex: 1;
gap: 1.24rem;
transition: all 0.3s;
padding: 0.75rem 0;
&:focus,
&:hover,
&:active {
background-color: var(--itemBackgroundColorActive);
color: var(--itemTextColorActive);
& .small-main-navigation__item-link-icon {
transform: translateX(.25rem);
}
}
[data-depth] & {
@include detail;
font-weight: 500;
}
[data-depth="1"] & {
padding-inline: 1rem;
}
[data-depth="2"] & {
padding-inline: 2rem;
}
[data-depth="3"] & {
padding-inline: 3rem;
}
}
&__item-link-icon {
display: inline-block;
margin-inline-start: .5rem;
transition: all 0.3s;
}
&__item-toggle {
align-items: center;
background-color: var(--itemBackgroundColor);
cursor: pointer;
display: flex;
flex: 0 0 3.5rem;
justify-content: center;
margin-left: 2px;
transition: all 0.3s;
&:focus,
&:hover,
&:active {
background-color: var(--activeBackgroundColor);
}
&[aria-expanded=true] {
& svg {
transform: rotate(-90deg);
}
}
&[aria-expanded=true] {
background-color: var(--activeBackgroundColor);
}
}
&__item-toggle-icon {
color: var(--iconFillColor);
width: 1rem;
}
&__children {
display: none;
&[data-active=true] {
display: block;
}
}
&__children-list {
display: flex;
flex-direction: column;
}
&__children-item-link {
@include detail;
color: var(--childrenTextColor);
background-color: var(--itemBackgroundColor);
display: block;
text-decoration: none;
transition: all 0.3s;
&:focus,
&:hover,
&:active {
background-color: var(--itemBackgroundColorActive);
color: var(--itemTextColorActive);
}
}
}
[data-small-primary-navigation] {
&[data-expanded=true] {
z-index: 2;
opacity: 1;
display: block;
}
}
.js-small-main-navigation-overlay {
position: absolute;
display: none;
background-color: rgba(0, 0, 0, 0.5);
bottom: 0;
left: 0;
top: 0;
right: 0;
width: 100%;
z-index: 1; // 1 to appear above the footer on short pages
[data-menu-active="true"] & {
display: block;
}
}
No notes defined.