<button aria-label="Toggle main navigation" aria-expanded="false" class="small-main-navigation-toggle
js-small-main-navigation-toggle
small-main-navigation-toggle--network">
<span class="small-main-navigation-toggle__text">
Menu
</span>
<span class="small-main-navigation-toggle__icon">
<svg class="menu" xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none">
<path class="menu__shape" fill-rule="evenodd" clip-rule="evenodd" d="M11 10C11.5523 10 12 10.4477 12 11C12 11.5523 11.5523 12 11 12H1C0.447715 12 0 11.5523 0 11C0 10.4477 0.447715 10 1 10H11ZM11 5C11.5523 5 12 5.44772 12 6C12 6.55228 11.5523 7 11 7H1C0.447715 7 0 6.55228 0 6C0 5.44772 0.447715 5 1 5H11ZM11 0C11.5523 0 12 0.447715 12 1C12 1.55228 11.5523 2 11 2H1C0.447715 2 0 1.55228 0 1C0 0.447715 0.447715 0 1 0H11Z" fill="#FF552E"/>
</svg>
</span>
</button>
<div role="navigation" aria-label="Small Main Navigation" class="small-main-navigation small-main-navigation--network">
<ul class="small-main-navigation__list">
<li class="small-main-navigation__item">
<div class="small-main-navigation__item-container">
<a class="
small-main-navigation__item-link
small-main-navigation__item-link--active-trail
" href="https://google.com">Programs & Applying
<span class="small-main-navigation__item-link-icon">
<svg class="right-chevron" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="8" height="16" viewBox="0 0 8 16">
<path class="_mark right-chevron__shape" fill="#FF552E" fill-rule="nonzero" d="M.232 1.65A1.028 1.028 0 0 1 .336.24a.937.937 0 0 1 1.356.11L8 8l-6.308 7.65a.937.937 0 0 1-1.356.11c-.403-.36-.45-.991-.104-1.41L5.466 8 .232 1.65z"/>
</svg>
</span>
</a>
<button aria-expanded="false" class="small-main-navigation__item-toggle" aria-label="toggle Programs & Applying menu">
<span class="small-main-navigation__item-toggle-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 class="small-main-navigation__children">
<ul class="small-main-navigation__children-list">
<li class="small-main-navigation__children-item">
<a class="
small-main-navigation__children-item-link
" href="http://google.com">Bachelor of Arts in Urban Studies and Planning
</a>
</li>
<li class="small-main-navigation__children-item">
<a class="
small-main-navigation__children-item-link
" href="http://google.com">Minor in Urban Studies and Planning
</a>
</li>
<li class="small-main-navigation__children-item">
<a class="
small-main-navigation__children-item-link
" href="http://google.com">Master of Urban Planning
</a>
</li>
<li class="small-main-navigation__children-item">
<a class="
small-main-navigation__children-item-link
small-main-navigation__children-item-link--active-trail
" href="http://google.com">Master of Science in Sustainable Urban Management
</a>
</li>
<li class="small-main-navigation__children-item">
<a class="
small-main-navigation__children-item-link
" href="http://google.com">PhD in Regional Planning
</a>
</li>
<li class="small-main-navigation__children-item">
<a class="
small-main-navigation__children-item-link
" href="http://google.com">Financial Aid
</a>
</li>
<li class="small-main-navigation__children-item">
<a class="
small-main-navigation__children-item-link
" href="http://google.com">Request a Visit
</a>
</li>
</ul>
</div>
</li>
<li class="small-main-navigation__item">
<div class="small-main-navigation__item-container">
<a class="
small-main-navigation__item-link
" href="http://google.com">Our Work
<span class="small-main-navigation__item-link-icon">
<svg class="right-chevron" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" width="8" height="16" viewBox="0 0 8 16">
<path class="_mark right-chevron__shape" fill="#FF552E" fill-rule="nonzero" d="M.232 1.65A1.028 1.028 0 0 1 .336.24a.937.937 0 0 1 1.356.11L8 8l-6.308 7.65a.937.937 0 0 1-1.356.11c-.403-.36-.45-.991-.104-1.41L5.466 8 .232 1.65z"/>
</svg>
</span>
</a>
<button aria-expanded="false" class="small-main-navigation__item-toggle" aria-label="toggle Our Work menu">
<span class="small-main-navigation__item-toggle-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 class="small-main-navigation__children">
<ul class="small-main-navigation__children-list">
<li class="small-main-navigation__children-item">
<a class="
small-main-navigation__children-item-link
" href="http://google.com">Financial Aid
</a>
</li>
<li class="small-main-navigation__children-item">
<a class="
small-main-navigation__children-item-link
" href="http://google.com">Request a Visit
</a>
</li>
</ul>
</div>
</li>
<li class="small-main-navigation__item">
<div class="small-main-navigation__item-container">
<a class="
small-main-navigation__item-link
" href="http://google.com">People
</a>
</div>
</li>
<li class="small-main-navigation__item">
<div class="small-main-navigation__item-container">
<a class="
small-main-navigation__item-link
" href="http://google.com">Student Life
</a>
</div>
</li>
<li class="small-main-navigation__item">
<div class="small-main-navigation__item-container">
<a class="
small-main-navigation__item-link
" href="http://google.com">About Us
</a>
</div>
</li>
</ul>
<div class="small-main-navigation__search">
<div class="quick-search quick-search--network quick-search--large">
<form role="search" method="get" aria-label="quick search form" id="quick-search-small-form" class="quick-search__form" action="">
<input id="quick-search-small-input" name="s" type="text" placeholder="Search" class="quick-search__input quick-search__input--large">
<label for="quick-search-small-input" class="quick-search__input-label">
Search the website
</label>
<div class="quick-search__icon">
<svg aria-hidden="true" class="search-icon" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<path class="_mark" fill="inherit" d="M6 12A6 6 0 116 0a6 6 0 010 12zm0-2a4 4 0 100-8 4 4 0 000 8zm5.293 2.707a1 1 0 011.414-1.414l3 3a1 1 0 01-1.414 1.414l-3-3z"/>
</svg>
</div>
<input aria-label="submit search query" class="quick-search__submit" type="submit" id="quick-search-small-submit" value="Search" />
</form>
</div>
</div>
</div>
<button aria-label="Toggle main navigation" aria-expanded="false" class="small-main-navigation-toggle
js-small-main-navigation-toggle
small-main-navigation-toggle--{{ siteUnit }}">
<span class="small-main-navigation-toggle__text">
Menu
</span>
<span class="small-main-navigation-toggle__icon">
{% include 'bits/icons/menu.twig' %}
</span>
</button>
<div
role="navigation"
aria-label="Small Main Navigation"
class="small-main-navigation small-main-navigation--{{ siteUnit }}"
>
<ul class="small-main-navigation__list">
{% for item in mainMenu.items %}
<li class="small-main-navigation__item">
<div class="small-main-navigation__item-container">
<a
class="
small-main-navigation__item-link
{{ item.isActive ? 'small-main-navigation__item-link--active' }}
{{ item.isDescendantActive ? 'small-main-navigation__item-link--active-trail' }}
"
href="{{ item.url }}">{{ item.title }}
{% if item.children %}
<span class="small-main-navigation__item-link-icon">
{% include 'bits/icons/right-chevron.twig' %}
</span>
{% endif %}
</a>
{% if item.children %}
<button aria-expanded="false" class="small-main-navigation__item-toggle" aria-label="toggle {{ item.title }} menu">
<span class="small-main-navigation__item-toggle-icon">
{% include 'bits/icons/down-toggle.twig' %}
</span>
</button>
{% endif %}
</div>
{% if item.children %}
<div class="small-main-navigation__children">
<ul class="small-main-navigation__children-list">
{% for item in item.children %}
<li class="small-main-navigation__children-item">
<a
class="
small-main-navigation__children-item-link
{{ item.isActive ? 'small-main-navigation__children-item-link--active' }}
{{ item.isDescendantActive ? 'small-main-navigation__children-item-link--active-trail' }}
"
href="{{ item.url }}">{{ item.title }}
</a>
</li>
{% endfor %}
</ul>
</div>
{% endif %}
</li>
{% endfor %}
</ul>
<div class="small-main-navigation__search">
{% include 'bits/quick-search/quick-search.twig' with {
isLarge: true,
id: 'quick-search-small'
} %}
</div>
</div>
{
"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 = breakpointHeaderLarge
.small-main-navigation-toggle
--buttonBackgroundColor white
--collapsedTextColor charcoalLight
--expandedTextColor altgeld
--iconFillColor illiniOrange
--menuButtonBorderRadius 50px
&--arch
--buttonBackgroundColor white
--collapsedTextColor charcoalLight
--expandedTextColor industrialBlue
--iconFillColor industrialBlueLight
&--art
--buttonBackgroundColor white
--collapsedTextColor charcoalLight
--expandedTextColor archesBlueDark
--iconFillColor archesBlue
&--college
--buttonBackgroundColor white
--collapsedTextColor charcoalDarker
--expandedTextColor altgeld
--iconFillColor illiniOrange
&--dance
--buttonBackgroundColor charcoalDark
--collapsedTextColor white
--expandedTextColor archesBlueBright
--iconFillColor archesBlue
&--durp
--buttonBackgroundColor white
--collapsedTextColor charcoalLight
--expandedTextColor altgeld
--iconFillColor illiniOrange
&--landarch
--buttonBackgroundColor white
--collapsedTextColor charcoalDarker
--expandedTextColor altgeld
--iconFillColor illiniOrange
&--theatre
--buttonBackgroundColor illiniBlue
--collapsedTextColor white
--expandedTextColor illiniOrange
--iconFillColor illiniOrange
&--music
--buttonBackgroundColor illiniBlue
--collapsedTextColor white
--expandedTextColor illiniOrange
--iconFillColor illiniOrange
--menuButtonBorderRadius 0
align-items center
cursor pointer
display flex
margin-left auto
position relative
top 4px
+above(breakpoint)
display none
&__text
@extends $primaryLink
color var(--collapsedTextColor)
flex 1
margin-right 8px
&__icon
transition all 0.3s
margin-bottom -2px
& .down-toggle-icon__shape
& .menu__shape
fill var(--iconFillColor)
&[aria-expanded=true]
z-index 3
position relative
border-radius var(--menuButtonBorderRadius)
background-color var(--buttonBackgroundColor)
padding 0px 16px
margin-right -16px
& .small-main-navigation-toggle__icon
transform rotate(180deg)
&[aria-expanded=true]
& ^[0]__text
color var(--expandedTextColor)
.small-main-navigation
--activeBackgroundColor illiniOrange
--activeBorderColor illiniOrange
--activeBorder 2px solid illiniOrange
--backgroundColor charcoalLighter
--iconFillColor illiniOrange
--iconFillColorActive white
--iconFillColorInactive white
--itemBackgroundColor charcoalLight
--itemBackgroundColorActive charcoal
&--arch
--activeBackgroundColor industrialBlueLight
--activeBorderColor industrialBlueLight
--activeBorder 2px solid industrialBlueLight
--backgroundColor charcoalLighter
--iconFillColor industrialBlueLight
--iconFillColorActive white
--iconFillColorInactive white
--itemBackgroundColor charcoalLight
--itemBackgroundColorActive charcoal
&--art
--activeBackgroundColor archesBlue
--activeBorderColor archesBlue
--activeBorder 2px solid archesBlue
--backgroundColor charcoalLighter
--iconFillColor archesBlue
--iconFillColorActive white
--iconFillColorInactive white
--itemBackgroundColor charcoalLight
--itemBackgroundColorActive charcoal
&--college
--activeBackgroundColor illiniOrange
--activeBorderColor illiniOrange
--activeBorder 2px solid illiniOrange
--backgroundColor illiniBlue
--iconFillColor illiniOrange
--iconFillColorActive illiniBlue
--iconFillColorInactive illiniOrange
--itemBackgroundColor illiniBlueLight
--itemBackgroundColorActive illiniBlueDark
&--dance
--activeBackgroundColor archesBlue
--activeBorderColor archesBlue
--activeBorder 2px solid archesBlue
--backgroundColor charcoalLighter
--iconFillColor archesBlue
--iconFillColorActive white
--iconFillColorInactive white
--itemBackgroundColor charcoalDark
--itemBackgroundColorActive charcoalDarker
&--durp
--activeBackgroundColor illiniOrange
--activeBorderColor illiniOrange
--activeBorder 2px solid illiniOrange
--backgroundColor charcoalLighter
--iconFillColor illiniOrange
--iconFillColorActive white
--iconFillColorInactive white
--itemBackgroundColor charcoalLight
--itemBackgroundColorActive charcoal
&--landarch
--activeBackgroundColor illiniOrange
--activeBorderColor illiniOrange
--activeBorder 2px solid illiniOrange
--backgroundColor charcoalLighter
--iconFillColor illiniOrange
--iconFillColorActive black
--iconFillColorInactive illiniOrange
--itemBackgroundColor charcoalDarker
--itemBackgroundColorActive black
&--theatre
--activeBackgroundColor illiniOrange
--activeBorderColor illiniOrange
--activeBorder 2px solid illiniOrange
--backgroundColor illiniBlueLight
--iconFillColor illiniOrange
--iconFillColorActive illiniBlue
--iconFillColorInactive white
--itemBackgroundColor illiniBlue
--itemBackgroundColorActive illiniBlueDark
&--music
--activeBackgroundColor illiniBlue
--activeBorderColor illiniOrange
--activeBorder 2px solid illiniOrange
--backgroundColor almaMaterDark
--iconFillColor illiniOrange
--iconFillColorActive illiniOrange
--iconFillColorInactive illiniOrange
--itemBackgroundColor almaMater
--itemBackgroundColorActive illiniBlue
background-color var(--backgroundColor)
display none
+above(breakpoint)
display none
@supports (display: grid)
position absolute
top 100%
left 0
right 0
z-index -1
opacity 0
&__list
padding 16px
&__item
&:not(:last-child)
margin-bottom 8px
&__item-container
display flex
&__item-link
@extends $secondaryLead
color white
display block
text-decoration none
background-color var(--itemBackgroundColor)
padding 12px 16px
border-top 2px solid var(--itemBackgroundColor)
flex 1
transition all 0.3s
&--active
&--active-trail
&:focus
&:hover
&:active
background-color var(--itemBackgroundColorActive)
border-color var(--activeBorderColor)
& .small-main-navigation__item-link-icon
transform translateX(4px)
&__item-link-icon
display inline-block
margin-left 8px
transition all 0.3s
& .right-chevron__shape
& .down-toggle-icon__shape
fill var(--iconFillColor)
&__item-toggle
align-items center
background-color var(--itemBackgroundColor)
border-top var(--activeBorder)
cursor pointer
display flex
flex 0 0 56px
justify-content center
margin-left 2px
transition all 0.3s
&:focus
&:hover
&:active
background-color var(--activeBackgroundColor)
&:focus .small-main-navigation__item-toggle-icon > svg > path
&:hover .small-main-navigation__item-toggle-icon > svg > path
&:active .small-main-navigation__item-toggle-icon > svg > path
fill var(--iconFillColorActive)
&[aria-expanded=true]
& .down-toggle-icon
transform rotate(180deg)
& .down-toggle-icon__shape
fill var(--iconFillColorActive)
&[aria-expanded=true]
background-color var(--activeBackgroundColor)
&__item-toggle-icon
width 16px
& .down-toggle-icon__shape
& ._mark
fill var(--iconFillColorInactive)
&__children
margin-top 2px
margin-bottom 16px
display none
&[data-active=true]
display block
&__children-item:not(:last-child)
margin-bottom 2px
&__children-item-link
@extends $secondaryLink
color white
background-color var(--itemBackgroundColor)
padding 16px 32px
display block
text-decoration none
border 2px solid var(--itemBackgroundColor)
transition all 0.3s
&--active
&--active-trail
&:focus
&:hover
&:active
background-color var(--itemBackgroundColorActive)
&--active
&--active-trail
&:focus
&:hover
&:active
border-color var(--activeBorderColor)
&__search
margin 16px
+above(breakpointHeaderSmall)
display none
.small-main-navigation
&[data-collapsing]
animation slideOut 0.5s
&[data-expanding]
z-index 2
animation slideIn 0.5s
&[data-expanded=true]
z-index 3
opacity 1
display block
There are no notes for this item.