<nav aria-label="Programs & Applying menu" class="js-secondary-nav-container secondary-navigation-container secondary-navigation-container--network">
<div class="secondary-navigation-container__heading">
<button aria-expanded="false" class="js-secondary-nav-toggle secondary-navigation-container__heading-link secondary-navigation-container__heading-link--network" aria-label="Toggle the context menu for Programs & Applying">
Programs & Applying
<span class="secondary-navigation-container__heading-link-icon">
<svg aria-hidden="true" class="down-toggle-icon" xmlns="http://www.w3.org/2000/svg" width="12" height="6" viewBox="0 0 12 6">
<path class="_mark down-toggle-icon__shape" fill="#FF552E" fill-rule="evenodd" d="M12 0L6 6 0 0z"/>
</svg>
</span>
</button>
</div>
<div data-expanded="false" class="js-secondary-nav secondary-navigation-container__menu">
<ul class="secondary-navigation secondary-navigation--network">
<li class="secondary-navigation__item">
<a class="
secondary-navigation__item-link
" href="http://google.com">Bachelor of Arts in Urban Studies and Planning
</a>
</li>
<li class="secondary-navigation__item">
<a class="
secondary-navigation__item-link
" href="http://google.com">Minor in Urban Studies and Planning
</a>
</li>
<li class="secondary-navigation__item">
<a class="
secondary-navigation__item-link
" href="http://google.com">Master of Urban Planning
</a>
</li>
<li class="secondary-navigation__item">
<a class="
secondary-navigation__item-link
secondary-navigation__item-link--active-trail
" href="http://google.com">Master of Science in Sustainable Urban Management
<span class="secondary-navigation__item-link-icon">
<svg aria-hidden="true" class="down-toggle-icon" xmlns="http://www.w3.org/2000/svg" width="12" height="6" viewBox="0 0 12 6">
<path class="_mark down-toggle-icon__shape" fill="#FF552E" fill-rule="evenodd" d="M12 0L6 6 0 0z"/>
</svg>
</span>
</a>
<ul class="secondary-navigation-children secondary-navigation-children--network">
<li class="secondary-navigation-children__item">
<a class="
secondary-navigation-children__item-link
" href="http://google.com">What to Expect
</a>
</li>
<li class="secondary-navigation-children__item">
<a class="
secondary-navigation-children__item-link
" href="http://google.com">How to Apply
</a>
</li>
<li class="secondary-navigation-children__item">
<a class="
secondary-navigation-children__item-link
secondary-navigation-children__item-link--active-trail
" href="http://google.com">Resources
<span class="secondary-navigation-children__item-link-icon">
<svg aria-hidden="true" class="down-toggle-icon" xmlns="http://www.w3.org/2000/svg" width="12" height="6" viewBox="0 0 12 6">
<path class="_mark down-toggle-icon__shape" fill="#FF552E" fill-rule="evenodd" d="M12 0L6 6 0 0z"/>
</svg>
</span>
</a>
<ul class="secondary-navigation-children secondary-navigation-children--network">
<li class="secondary-navigation-children__item">
<a class="
secondary-navigation-children__item-link
secondary-navigation-children__item-link--active-trail
" href="http://google.com">Financial Aid
</a>
<ul class="secondary-navigation-children secondary-navigation-children--network">
</ul>
</li>
<li class="secondary-navigation-children__item">
<a class="
secondary-navigation-children__item-link
secondary-navigation-children__item-link--active-trail
" href="http://google.com">Student Projects
<span class="secondary-navigation-children__item-link-icon">
<svg aria-hidden="true" class="down-toggle-icon" xmlns="http://www.w3.org/2000/svg" width="12" height="6" viewBox="0 0 12 6">
<path class="_mark down-toggle-icon__shape" fill="#FF552E" fill-rule="evenodd" d="M12 0L6 6 0 0z"/>
</svg>
</span>
</a>
<ul class="secondary-navigation-children secondary-navigation-children--network">
<li class="secondary-navigation-children__item">
<a class="
secondary-navigation-children__item-link
" href="http://google.com">See all projects
</a>
</li>
<li class="secondary-navigation-children__item">
<a class="
secondary-navigation-children__item-link
secondary-navigation-children__item-link--active
" href="http://google.com">Award winning projects
</a>
<ul class="secondary-navigation-children secondary-navigation-children--network">
</ul>
</li>
</ul>
</li>
<li class="secondary-navigation-children__item">
<a class="
secondary-navigation-children__item-link
" href="http://google.com">Required class materials
</a>
</li>
<li class="secondary-navigation-children__item">
<a class="
secondary-navigation-children__item-link
" href="http://google.com">Additional Resources
</a>
</li>
</ul>
</li>
</ul>
</li>
<li class="secondary-navigation__item">
<a class="
secondary-navigation__item-link
" href="http://google.com">PhD in Regional Planning
</a>
</li>
<li class="secondary-navigation__item">
<a class="
secondary-navigation__item-link
" href="http://google.com">Financial Aid
</a>
</li>
<li class="secondary-navigation__item">
<a class="
secondary-navigation__item-link
" href="http://google.com">Request a Visit
</a>
</li>
</ul>
</div>
</nav>
{% set hasRenderedMenu = false %}
{% for item in mainMenu.items %}
{% if (item.isDescendantActive or item.isActive) and not hasRenderedMenu %}
{% set hasRenderedMenu = true %}
<nav aria-label="{{ item.title }} menu" class="js-secondary-nav-container secondary-navigation-container secondary-navigation-container--{{ siteUnit }}">
<div class="secondary-navigation-container__heading">
<button
aria-expanded="false"
class="js-secondary-nav-toggle secondary-navigation-container__heading-link secondary-navigation-container__heading-link--{{ siteUnit }}"
aria-label="Toggle the context menu for {{ item.title }}"
>
{{ item.title }}
{% if item.children %}
<span class="secondary-navigation-container__heading-link-icon">
{% include 'bits/icons/down-toggle.twig' %}
</span>
{% endif %}
</button>
</div>
<div data-expanded="false" class="js-secondary-nav secondary-navigation-container__menu">
<ul class="secondary-navigation {{ child ? 'secondary-navigation--child' }} secondary-navigation--{{ siteUnit }}">
{% for item in item.children %}
<li class="secondary-navigation__item">
<a
class="
secondary-navigation__item-link
{{ item.isActive ? 'secondary-navigation__item-link--active' }}
{{ item.isDescendantActive ? 'secondary-navigation__item-link--active-trail' }}
"
href="{{ item.url }}">{{ item.title }}
{% if item.children %}
<span class="secondary-navigation__item-link-icon">
{% include 'bits/icons/down-toggle.twig' %}
</span>
{% endif %}
</a>
{% if item.children and (item.isDescendantActive or item.isActive) %}
{% include 'partials/secondary-navigation-children/secondary-navigation-children.twig' with { items: item.children } %}
{% endif %}
</li>
{% endfor %}
</ul>
</div>
</nav>
{% endif %}
{% endfor %}
{
"siteUnit": "network",
"departmentName": "Network",
"background": "light",
"mainMenu": {
"currentPageInMenu": true,
"items": [
{
"title": "Programs & Applying",
"url": "https://google.com",
"isActive": false,
"isChildActive": false,
"isDescendantActive": true,
"children": [
{
"title": "Bachelor of Arts in Urban Studies and Planning",
"url": "http://google.com",
"isActive": false,
"isChildActive": false,
"isDescendantActive": false,
"children": []
},
{
"title": "Minor in Urban Studies and Planning",
"url": "http://google.com",
"isActive": false,
"isChildActive": false,
"isDescendantActive": false,
"children": []
},
{
"title": "Master of Urban Planning",
"url": "http://google.com",
"isActive": false,
"isChildActive": false,
"isDescendantActive": false,
"children": []
},
{
"title": "Master of Science in Sustainable Urban Management",
"url": "http://google.com",
"isActive": false,
"isChildActive": false,
"isDescendantActive": true,
"children": [
{
"title": "What to Expect",
"url": "http://google.com",
"isActive": false,
"isChildActive": false,
"isDescendantActive": false,
"children": []
},
{
"title": "How to Apply",
"url": "http://google.com",
"isActive": false,
"isChildActive": false,
"isDescendantActive": false,
"children": []
},
{
"title": "Resources",
"url": "http://google.com",
"isActive": false,
"isChildActive": false,
"isDescendantActive": true,
"children": [
{
"title": "Financial Aid",
"url": "http://google.com",
"isActive": false,
"isChildActive": false,
"isDescendantActive": true,
"children": []
},
{
"title": "Student Projects",
"url": "http://google.com",
"isActive": false,
"isChildActive": false,
"isDescendantActive": true,
"children": [
{
"title": "See all projects",
"url": "http://google.com",
"isActive": false,
"isChildActive": false,
"isDescendantActive": false,
"children": []
},
{
"title": "Award winning projects",
"url": "http://google.com",
"isActive": true,
"isChildActive": false,
"isDescendantActive": false,
"children": []
}
]
},
{
"title": "Required class materials",
"url": "http://google.com",
"isActive": false,
"isChildActive": false,
"isDescendantActive": false,
"children": []
},
{
"title": "Additional Resources",
"url": "http://google.com",
"isActive": false,
"isChildActive": false,
"isDescendantActive": false,
"children": []
}
]
}
]
},
{
"title": "PhD in Regional Planning",
"url": "http://google.com",
"isActive": false,
"isChildActive": false,
"isDescendantActive": false,
"children": []
},
{
"title": "Financial Aid",
"url": "http://google.com",
"isActive": false,
"isChildActive": false,
"isDescendantActive": false,
"children": []
},
{
"title": "Request a Visit",
"url": "http://google.com",
"isActive": false,
"isChildActive": false,
"isDescendantActive": false,
"children": []
}
]
},
{
"title": "Our Work",
"url": "http://google.com",
"isActive": false,
"isChildActive": false,
"isDescendantActive": false,
"children": [
{
"title": "Financial Aid",
"url": "http://google.com",
"isActive": false,
"isChildActive": false,
"isDescendantActive": false,
"children": []
},
{
"title": "Request a Visit",
"url": "http://google.com",
"isActive": false,
"isChildActive": false,
"isDescendantActive": false,
"children": []
}
]
},
{
"title": "People",
"url": "http://google.com",
"isActive": false,
"isChildActive": false,
"isDescendantActive": false,
"children": []
},
{
"title": "Student Life",
"url": "http://google.com",
"isActive": false,
"isChildActive": false,
"isDescendantActive": false,
"children": []
},
{
"title": "About Us",
"url": "http://google.com",
"isActive": false,
"isChildActive": false,
"isDescendantActive": false,
"children": []
}
]
}
}
breakpoint = 1000px
.secondary-navigation-container
--backgroundColor white
--backgroundColorActive charcoalLight
--borderColor charcoalLight
--borderColorSmall charcoalLight
--buttonBorder cloudDark
--headingLinkColor heritageOrangeDarkest
--headingLinkColorActive white
--linkColorActive heritageOrangeDarkest
--iconFillColor illiniOrange
--iconFillColorActive white
&--arch
--backgroundColor white
--backgroundColorActive charcoalLight
--borderColor charcoalLight
--borderColorSmall charcoalLight
--buttonBorder cloudDark
--headingLinkColor industrialBlue
--headingLinkColorActive white
--linkColorActive industrialBlue
--iconFillColor industrialBlue
--iconFillColorActive white
&--art
--backgroundColor white
--backgroundColorActive charcoalLight
--borderColor charcoalLight
--borderColorSmall charcoalLight
--buttonBorder cloudDark
--headingLinkColor archesBlueDark
--headingLinkColorActive white
--linkColorActive archesBlueDark
--iconFillColor archesBlue
--iconFillColorActive white
&--college
--backgroundColor white
--backgroundColorActive illiniOrange
--borderColor illiniBlue
--borderColorSmall illiniBlue
--buttonBorder cloud
--headingLinkColor heritageOrangeDarkest
--headingLinkColorActive illiniBlue
--linkColorActive heritageOrangeDarkest
--iconFillColor illiniOrange
--iconFillColorActive illiniBlue
&--dance
--backgroundColor charcoalDark
--backgroundColorActive archesBlue
--borderColor cloudDarker
--borderColorSmall black
--buttonBorder charcoalDarker
--headingLinkColor white
--headingLinkColorActive black
--linkColorActive black
--iconFillColor archesBlue
--iconFillColorActive black
&--durp
--backgroundColor white
--backgroundColorActive charcoalLight
--borderColor white
--borderColorSmall white
--buttonBorder cloudDark
--headingLinkColor heritageOrangeDarkest
--headingLinkColorActive white
--linkColorActive heritageOrangeDarkest
--iconFillColor illiniOrange
--iconFillColorActive white
&--landarch
--backgroundColor white
--backgroundColorActive illiniOrange
--borderColor black
--borderColorSmall black
--buttonBorder cloud
--headingLinkColor heritageOrangeDarkest
--headingLinkColorActive black
--linkColorActive heritageOrangeDarkest
--iconFillColor illiniOrange
--iconFillColorActive black
&--theatre
--backgroundColor illiniBlue
--backgroundColorActive illiniOrange
--borderColor illiniBlueDark
--borderColorSmall illiniBlueDark
--buttonBorder illiniBlueDark
--headingLinkColor white
--headingLinkColorActive illiniBlue
--linkColorActive heritageOrangeDarkest
--iconFillColor illiniOrange
--iconFillColorActive illiniBlue
&--music
--backgroundColor almaMaterDark
--backgroundColorActive illiniOrange
--borderColor illiniBlue
--borderColorSmall illiniBlueDark
--buttonBorder illiniBlueDark
--headingLinkColor white
--headingLinkColorActive illiniBlue
--linkColorActive altgeld
--iconFillColor illiniOrange
--iconFillColorActive illiniBlue
width 100%
&--durp
+below(breakpoint)
border-top 8px solid illiniOrange
+below(breakpoint)
position absolute
top 0
right 0
z-index 1
&__heading
+above(breakpoint)
display none
&__heading-link
@extends $secondaryLink
background-color var(--backgroundColor)
border-top 2px solid var(--buttonBorder)
border-bottom 2px solid var(--buttonBorder)
color var(--headingLinkColor)
display flex
text-decoration none
padding 16px 32px
z-index 1
+below(breakpointHeaderSmall)
padding-left 16px
+between(breakpointHeaderSmall, breakpoint)
padding-left 32px
padding-right 32px
position relative
cursor pointer
width 100%
transition all 0.3s
&[aria-expanded="true"]
background-color var(--backgroundColorActive)
border-color var(--borderColor)
color var(--headingLinkColorActive)
+below(breakpoint)
border-color var(--borderColorSmall)
& ^[0]__heading-link-icon
transform rotate(180deg)
& .down-toggle-icon__shape
& ._mark
fill var(--iconFillColorActive)
&__heading-link-icon
position absolute
right 16px
& .down-toggle-icon__shape
& ._mark
fill var(--iconFillColor)
+above(breakpointHeaderSmall)
right 32px
transition all 0.3s
&__menu
+below(breakpoint)
display none
border-bottom 2px solid var(--borderColor)
&[data-collapsing]
animation slideOut 0.5s
&[data-expanding]
display block
animation slideIn 0.5s
&[data-expanded=true]
display block
@keyframes slideIn
0%
opacity 0
transform translateY(-10px)
100%
opacity 1
transform translateY(0)
@keyframes slideOut
0%
opacity 1
transform translateY(0)
100%
opacity 0
transform translateY(-10px)
breakpoint = 1000px
breakpointSmall = 700px
.secondary-navigation
--borderColor cloudDark
--borderRadius 0
--linkColorActive heritageOrangeDarkest
--iconFillColor illiniOrange
--textColor charcoalLight
&--arch
--borderColor cloudDark
--borderRadius 0
--linkColorActive industrialBlue
--iconFillColor industrialBlue
--textColor charcoalLight
&--art
--borderColor cloudDark
--borderRadius 0
--linkColorActive archesBlueDark
--iconFillColor archesBlue
--textColor charcoalLight
&--college
--borderColor cloudDark
--borderRadius 0
--linkColorActive heritageOrangeDarkest
--iconFillColor illiniOrange
--textColor illiniBlue
&--dance
--borderColor cloudDarker
--borderRadius 8px
--linkColorActive archesBlueDark
--iconFillColor archesBlue
--textColor charcoalLight
+above(1000px)
--borderColor archesBlue
&--durp
--borderColor cloudDark
--borderRadius 0
--linkColorActive heritageOrangeDarkest
--iconFillColor illiniOrange
--textColor charcoalLight
&--landarch
--borderColor cloudDark
--borderRadius 0
--linkColorActive heritageOrangeDarkest
--iconFillColor illiniOrange
--textColor charcoalDarker
&--theatre
--borderColor cloudDark
--borderRadius 0
--linkColorActive heritageOrangeDarkest
--iconFillColor illiniOrange
--textColor illiniBlue
&--music
--borderColor cloudDark
--borderRadius 0
--linkColorActive heritageOrangeDarkest
--iconFillColor illiniOrange
--textColor illiniBlue
&__item
&:not(:last-child)
margin-bottom -2px
border 2px solid var(--borderColor)
overflow hidden
&:last-child
+above(breakpoint)
border-bottom-left-radius var(--borderRadius)
border-bottom-right-radius var(--borderRadius)
&:first-child
+above(breakpoint)
border-top-left-radius var(--borderRadius)
border-top-right-radius var(--borderRadius)
+below(breakpoint)
border-left none
border-right none
&--music &__item
+above(breakpoint)
border 2px solid almaMaterDark
&__item-link
@extends $secondaryLink
background-color white
color var(--textColor)
display flex
text-decoration none
padding 16px 32px
padding-left 16px
+between(breakpointHeaderSmall, breakpoint)
padding-left 32px
position relative
&:focus
&:hover
&:active
background-color cloud
&--active
&--active-trail
color var(--linkColorActive)
font-weight 700
& ^[0]__item-link-icon
transform rotate(180deg)
&__item-link-icon
position absolute
right 16px
+between(breakpointHeaderSmall, breakpoint)
right 32px
& .down-toggle-icon__shape
fill var(--iconFillColor)
There are no notes for this item.