<div role="navigation" aria-label="Main Navigation" class="main-navigation main-navigation--music">
<ul class="main-navigation__list">
<li class="main-navigation__item">
<a aria-expanded="false" class="
js-mega-menu-toggle
main-navigation__item-link
main-navigation__item-link--active-trail
" href="https://google.com">Programs & Applying
<div class="main-navigation__item-link-icon">
<div class="main-navigation__item-link-icon-inactive">
<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>
</div>
<div class="main-navigation__item-link-icon-active">
<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>
</div>
</div>
</a>
<div class="main-navigation__children">
<div data-active="false" class="mega-menu mega-menu--music js-mega-menu">
<div class="mega-menu__container">
<div class="mega-menu__title">
<div class="mega-menu__title-text">
<a href="https://google.com" class="mega-menu__title-text-link">
Programs & Applying
<span class="mega-menu__title-text-link-icon">
<svg aria-hidden="true" class="right-chevron-large" xmlns="http://www.w3.org/2000/svg" width="12" height="24" viewBox="0 0 12 24">
<path class="_mark right-chevron-large__shape" fill="#FF552E" d="M.347 2.476C-.17 1.847-.1.9.504.361c.605-.539 1.516-.466 2.034.163L12 12 2.538 23.476c-.518.63-1.43.702-2.034.163-.605-.54-.675-1.486-.157-2.115L8.2 12 .347 2.476z"/>
</svg>
</span>
</a>
</div>
</div>
<ul class="mega-menu__list">
<li class="mega-menu__item">
<a class="
mega-menu__item-link
" href="http://google.com">Bachelor of Arts in Urban Studies and Planning
</a>
</li>
<li class="mega-menu__item">
<a class="
mega-menu__item-link
" href="http://google.com">Minor in Urban Studies and Planning
</a>
</li>
<li class="mega-menu__item">
<a class="
mega-menu__item-link
" href="http://google.com">Master of Urban Planning
</a>
</li>
<li class="mega-menu__item">
<a class="
mega-menu__item-link
mega-menu__item-link--active-trail
" href="http://google.com">Master of Science in Sustainable Urban Management
</a>
</li>
<li class="mega-menu__item">
<a class="
mega-menu__item-link
" href="http://google.com">PhD in Regional Planning
</a>
</li>
<li class="mega-menu__item">
<a class="
mega-menu__item-link
" href="http://google.com">Financial Aid
</a>
</li>
<li class="mega-menu__item">
<a class="
mega-menu__item-link
" href="http://google.com">Request a Visit
</a>
</li>
</ul>
</div>
</div>
</div>
</li>
<li class="main-navigation__item">
<a aria-expanded="false" class="
js-mega-menu-toggle
main-navigation__item-link
" href="http://google.com">Our Work
<div class="main-navigation__item-link-icon">
<div class="main-navigation__item-link-icon-inactive">
<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>
</div>
<div class="main-navigation__item-link-icon-active">
<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>
</div>
</div>
</a>
<div class="main-navigation__children">
<div data-active="false" class="mega-menu mega-menu--music js-mega-menu">
<div class="mega-menu__container">
<div class="mega-menu__title">
<div class="mega-menu__title-text">
<a href="http://google.com" class="mega-menu__title-text-link">
Our Work
<span class="mega-menu__title-text-link-icon">
<svg aria-hidden="true" class="right-chevron-large" xmlns="http://www.w3.org/2000/svg" width="12" height="24" viewBox="0 0 12 24">
<path class="_mark right-chevron-large__shape" fill="#FF552E" d="M.347 2.476C-.17 1.847-.1.9.504.361c.605-.539 1.516-.466 2.034.163L12 12 2.538 23.476c-.518.63-1.43.702-2.034.163-.605-.54-.675-1.486-.157-2.115L8.2 12 .347 2.476z"/>
</svg>
</span>
</a>
</div>
</div>
<ul class="mega-menu__list">
<li class="mega-menu__item">
<a class="
mega-menu__item-link
" href="http://google.com">Financial Aid
</a>
</li>
<li class="mega-menu__item">
<a class="
mega-menu__item-link
" href="http://google.com">Request a Visit
</a>
</li>
</ul>
</div>
</div>
</div>
</li>
<li class="main-navigation__item">
<a class="
main-navigation__item-link
" href="http://google.com">People
</a>
</li>
<li class="main-navigation__item">
<a class="
main-navigation__item-link
" href="http://google.com">Student Life
</a>
</li>
<li class="main-navigation__item">
<a class="
main-navigation__item-link
" href="http://google.com">About Us
</a>
</li>
</ul>
</div>
<div role="navigation" aria-label="Main Navigation" class="main-navigation main-navigation--{{ siteUnit }}">
<ul class="main-navigation__list">
{% for item in mainMenu.items %}
<li class="main-navigation__item">
<a
{{ item.children ? 'aria-expanded="false"' }}
class="
{{ item.children ? 'js-mega-menu-toggle' }}
main-navigation__item-link
{{ item.isActive ? 'main-navigation__item-link--active' }}
{{ item.isDescendantActive ? 'main-navigation__item-link--active-trail' }}
"
href="{{ item.url }}">{{ item.title }}
{% if item.children %}
<div class="main-navigation__item-link-icon">
<div class="main-navigation__item-link-icon-inactive">
{% include 'bits/icons/down-toggle.twig' %}
</div>
<div class="main-navigation__item-link-icon-active">
{% include 'bits/icons/right-chevron.twig' %}
</div>
</div>
{% endif %}
</a>
{% if item.children %}
<div class="main-navigation__children">
<div data-active="false" class="mega-menu mega-menu--{{ siteUnit }} js-mega-menu">
<div class="mega-menu__container">
<div class="mega-menu__title">
{% if siteUnit == 'durp' %}
<div class="mega-menu__title-line">
{% include '/bits/orange-line/orange-line.twig' %}
</div>
{% endif %}
<div class="mega-menu__title-text">
<a href="{{ item.url }}" class="mega-menu__title-text-link">
{{ item.title }}
<span class="mega-menu__title-text-link-icon">
{% include 'bits/icons/right-chevron-large.twig' %}
</span>
</a>
</div>
</div>
<ul class="mega-menu__list">
{% for item in item.children %}
<li class="mega-menu__item">
<a
class="
mega-menu__item-link
{{ item.isActive ? 'mega-menu__item-link--active' }}
{{ item.isDescendantActive ? 'mega-menu__item-link--active-trail' }}
"
href="{{ item.url }}">{{ item.title }}
</a>
</li>
{% endfor %}
</ul>
</div>
</div>
</div>
{% endif %}
</li>
{% endfor %}
</ul>
</div>
{
"siteUnit": "music",
"departmentName": "Music",
"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
.main-navigation
--itemLinkActiveColor illiniOrange
--itemLinkActiveBorderColor illiniOrange
--itemLinkBackgroundColor white
--itemLinkBackgroundColorActive white
--itemLinkBorderRadius 50px
--itemLinkIconColor illiniOrange
--itemLinkIconColorActive illiniOrange
--itemLinkTextColor charcoalLight
--itemLinkTextColorActive charcoalLight
&--arch
--itemLinkActiveColor industrialBlue
--itemLinkActiveBorderColor industrialBlue
--itemLinkBackgroundColor white
--itemLinkBackgroundColorActive white
--itemLinkBorderRadius 0%
--itemLinkIconColor industrialBlue
--itemLinkIconColorActive industrialBlue
--itemLinkTextColor charcoalLight
--itemLinkTextColorActive charcoalLight
&--art
--itemLinkActiveColor archesBlueDark
--itemLinkActiveBorderColor archesBlue
--itemLinkBackgroundColor white
--itemLinkBackgroundColorActive white
--itemLinkBorderRadius 8px
--itemLinkIconColor archesBlue
--itemLinkIconColorActive archesBlue
--itemLinkTextColor charcoalLight
--itemLinkTextColorActive charcoalLight
&--college
--itemLinkActiveColor altgeld
--itemLinkActiveBorderColor illiniOrange
--itemLinkBackgroundColor white
--itemLinkBackgroundColorActive illiniOrange
--itemLinkBorderRadius 50px
--itemLinkIconColor illiniOrange
--itemLinkIconColorActive illiniBlue
--itemLinkTextColor illiniBlue
--itemLinkTextColorActive illiniBlue
&--dance
--itemLinkActiveColor archesBlueBright
--itemLinkActiveBorderColor archesBlue
--itemLinkBackgroundColor charcoalDark
--itemLinkBackgroundColorActive charcoalDark
--itemLinkBorderRadius 50px
--itemLinkIconColor archesBlue
--itemLinkIconColorActive archesBlue
--itemLinkTextColor white
--itemLinkTextColorActive white
&--durp
--itemLinkActiveColor altgeld
--itemLinkActiveBorderColor illiniOrange
--itemLinkBackgroundColor white
--itemLinkBackgroundColorActive white
--itemLinkBorderRadius 50px
--itemLinkIconColor illiniOrange
--itemLinkIconColorActive illiniOrange
--itemLinkTextColor charcoalLight
--itemLinkTextColorActive charcoalLight
&--landarch
--itemLinkActiveColor altgeld
--itemLinkActiveBorderColor illiniOrange
--itemLinkBackgroundColor white
--itemLinkBackgroundColorActive illiniOrange
--itemLinkBorderRadius 8px
--itemLinkIconColor illiniOrange
--itemLinkIconColorActive black
--itemLinkTextColor charcoalDarker
--itemLinkTextColorActive black
&--theatre
--itemLinkActiveColor illiniOrange
--itemLinkActiveBorderColor illiniBlue
--itemLinkBackgroundColor illiniBlue
--itemLinkBackgroundColorActive illiniBlue
--itemLinkBorderRadius 50px
--itemLinkIconColor illiniOrange
--itemLinkIconColorActive illiniOrange
--itemLinkTextColor white
--itemLinkTextColorActive illiniOrange
&--music
--itemLinkActiveColor illiniOrange
--itemLinkActiveBorderColor transparent
--itemLinkBackgroundColor transparent
--itemLinkBackgroundColorActive illiniOrange
--itemLinkBorderRadius 8px
--itemLinkIconColor illiniOrange
--itemLinkIconColorActive illiniBlue
--itemLinkTextColor white
--itemLinkTextColorActive illiniBlue
+below(breakpoint)
display none
&__list
display flex
justify-content space-between
margin-left -24px
margin-right -24px
margin-bottom -11px
&__item
&:not(:last-child)
margin-left 8px
&:not(:first-child)
margin-right 8px
&__item-link
@extends $primaryLink
align-items center
background-color var(--itemLinkBackgroundColor)
border 2px solid transparent
border-radius var(--itemLinkBorderRadius)
color var(--itemLinkTextColor)
display flex
padding 10px 16px
position relative
text-decoration none
transition all 0.2s
white-space nowrap
&:focus
&:hover
&:active
&[aria-expanded=true]
background-color var(--itemLinkBackgroundColorActive)
border-color var(--itemLinkActiveBorderColor)
color var(--itemLinkTextColorActive)
z-index 2
& ^[0]__item-link-icon-active
opacity 1
& ^[0]__item-link-icon-inactive
opacity 0
&--active
&--active-trail
color var(--itemLinkActiveColor)
&__item-link-icon
display inline-flex
margin-left 8px
width 8px
&-active
&-inactive
transition opacity 0.2s
display flex
align-items center
&-inactive
& .down-toggle-icon__shape
fill var(--itemLinkIconColor)
&-active
& .right-chevron__shape
fill var(--itemLinkIconColorActive)
&-active
margin-left -8px
opacity 0
.mega-menu
--backgroundColor charcoalLighter
--itemBackgroundColor charcoalLight
--itemBackgroundColorActive charcoal
--itemLinkActiveBorderColor illiniOrange
--itemLinkIconColor illiniOrange
--itemLinkColor white
--itemLinkActiveColor white
&--arch
--backgroundColor charcoalLighter
--itemBackgroundColor charcoalLight
--itemBackgroundColorActive charcoal
--itemLinkActiveBorderColor industrialBlueLight
--itemLinkIconColor industrialBlueLight
&--art
--backgroundColor charcoalLighter
--itemBackgroundColor charcoalLight
--itemBackgroundColorActive charcoal
--itemLinkActiveBorderColor archesBlue
--itemLinkIconColor archesBlue
&--college
--backgroundColor illiniBlue
--itemBackgroundColor illiniBlueLight
--itemBackgroundColorActive illiniBlueDark
--itemLinkActiveBorderColor illiniOrange
--itemLinkIconColor illiniOrange
&--dance
--backgroundColor charcoal
--itemBackgroundColor charcoalDark
--itemBackgroundColorActive charcoalDarker
--itemLinkActiveBorderColor archesBlue
--itemLinkIconColor archesBlue
&--durp
--backgroundColor charcoalLighter
--itemBackgroundColor charcoalLight
--itemBackgroundColorActive charcoal
--itemLinkActiveBorderColor illiniOrange
--itemLinkIconColor illiniOrange
&--landarch
--backgroundColor charcoal
--itemBackgroundColor charcoalDarker
--itemBackgroundColorActive black
--itemLinkActiveBorderColor illiniOrange
--itemLinkIconColor illiniOrange
&--theatre
--backgroundColor illiniBlueLight
--itemBackgroundColor illiniBlue
--itemBackgroundColorActive illiniBlueDark
--itemLinkActiveBorderColor illiniOrange
--itemLinkIconColor illiniOrange
&--music
--backgroundColor almaMaterDark
--itemBackgroundColor almaMater
--itemBackgroundColorActive illiniOrange
--itemLinkActiveBorderColor illiniOrange
--itemLinkIconColor illiniOrange
--itemLinkColor white
--itemLinkActiveColor illiniBlue
display none
background-color var(--backgroundColor)
position absolute
left 0
right 0
top 100%
opacity 0
padding-top 32px
padding-bottom 32px
transition all 0.2s
&:before
&:after
background-color var(--backgroundColor)
bottom 0
content ""
display block
position absolute
top 0
width 100vw
&:before
right 100%
&:after
left 100%
&__container
@extends $contentContainer
display flex
&__title
margin-right 48px
width 400px
&__title-line
margin-bottom 16px
&__title-text
@extends $tertiaryTitle
&__title-text-link-icon
display inline-block
transition all 0.3s
& .right-chevron-large__shape
& .down-toggle-icon__shape
fill var(--itemLinkIconColor)
&__title-text-link
@extends $tertiaryTitle
text-decoration none
color white
&:focus
&:hover
&:active
^[0]__title-text-link-icon
transform translate(4px, 0)
&__list
column-count 2
column-gap 8px
flex 1
&__item
background-color var(--itemBackgroundColor)
break-inside avoid
margin-bottom 8px
&__item-link
@extends $secondaryLink
padding 16px
text-decoration none
display block
border 2px solid var(--itemBackgroundColor)
color var(--itemLinkColor)
transition all 0.3s
&--active
&:focus
&:hover
&:active
background-color var(--itemBackgroundColorActive)
border-color var(--itemLinkActiveBorderColor)
color var(--itemLinkActiveColor)
.mega-menu[data-active=true]
z-index 2
opacity 1
display block
There are no notes for this item.