<nav aria-label="Programs & Schools menu" class="secondary-navigation-container">
<div data-expanded="false" class="js-secondary-nav secondary-navigation-container__menu">
<ul class="secondary-navigation ">
<li class="secondary-navigation__heading">
<a class="secondary-navigation__heading-link" href="https://google.com">Programs & Schools
</a>
</li>
</ul>
</div>
</nav>
{% for item in mainMenu.items %}
{% if item.isDescendantActive or item.isActive %}
<nav aria-label="{{ item.title }} menu" class="secondary-navigation-container">
<div data-expanded="false" class="js-secondary-nav secondary-navigation-container__menu">
<ul class="secondary-navigation {{ child ? 'secondary-navigation--child' }}">
<li class="secondary-navigation__heading">
<a
class="secondary-navigation__heading-link"
href="{{ item.url }}">{{ item.title }}
</a>
</li>
{% 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/right-chevron.twig' %}
</span>
{% endif %}
</a>
{% if item.isDescendantActive or item.isActive %}
{% include 'partials/navigation/secondary-navigation-children/secondary-navigation-children.twig' with { items: item.children } %}
{% endif %}
</li>
{% endfor %}
</ul>
</div>
</nav>
{% endif %}
{% endfor %}
{
"mainMenu": {
"currentPageInMenu": true,
"items": [
{
"title": "Programs & Schools",
"url": "https://google.com",
"isActive": true,
"isChildActive": false,
"isDescendantActive": true,
"children": []
},
{
"title": "Admissions & Aid",
"url": "http://google.com",
"isActive": false,
"isChildActive": false,
"isDescendantActive": false,
"children": []
},
{
"title": "Research & Creative Work",
"url": "http://google.com",
"isActive": false,
"isChildActive": true,
"isDescendantActive": false,
"children": [
{
"title": "Interior Page 1",
"url": "http://google.com",
"isActive": false,
"isChildActive": false,
"isDescendantActive": false,
"children": []
},
{
"title": "Interior Page 2",
"url": "http://google.com",
"isActive": false,
"isChildActive": false,
"isDescendantActive": false,
"children": []
},
{
"title": "Interior Page 3",
"url": "http://google.com",
"isActive": true,
"isChildActive": false,
"isDescendantActive": false,
"children": []
},
{
"title": "Interior Page 4",
"url": "http://google.com",
"isActive": false,
"isChildActive": false,
"isDescendantActive": true,
"children": []
},
{
"title": "Interior Page 5",
"url": "http://google.com",
"isActive": false,
"isChildActive": false,
"isDescendantActive": false,
"children": []
},
{
"title": "Interior Page 6",
"url": "http://google.com",
"isActive": false,
"isChildActive": false,
"isDescendantActive": false,
"children": []
},
{
"title": "Interior Page 7",
"url": "http://google.com",
"isActive": false,
"isChildActive": false,
"isDescendantActive": false,
"children": []
}
]
},
{
"title": "About",
"url": "http://google.com",
"isActive": false,
"isChildActive": false,
"isDescendantActive": false,
"children": []
}
]
}
}
breakpoint = breakpointHeaderLarge
.secondary-navigation-container
--backgroundColor white
--backgroundColorActive charcoalLight
--borderColorContainer coolGray3
--borderColorSmall charcoalLight
--buttonBorder cloudDark
--headingLinkColor illiniOrange
--headingLinkColorActive white
--linkColorActive illiniOrange
--iconFillColor illiniOrange
--iconFillColorActive white
width 100%
+below(breakpoint)
display none
&__menu
+below(breakpoint)
display none
border-bottom 2px solid var(--borderColorContainer)
&[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 = breakpointHeaderLarge
.secondary-navigation
--borderColor coolGray3
--borderRadius 0
--headingColor blue500
--iconFillColor illiniOrange
--linkColorActive blue500
--textColor grey500
&__heading-link
@extends $headline5
border-bottom 2px solid var(--borderColor)
border-left 4px solid transparent
color var(--headingColor)
display flex
text-decoration none
padding 16px 32px
padding-left 16px
&:focus
&:hover
&:active
border-left 4px solid alachua
&__item
border-bottom 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
&__item-link
@extends $headline5
border-left 4px solid transparent
color var(--textColor)
display flex
font-weight 400
padding 16px 32px
padding-left 16px
text-decoration none
+below(breakpoint)
background-color white
+between(breakpointHeaderSmall, breakpoint)
padding-left 32px
position relative
&:focus
&:hover
&:active
border-left 4px solid alachua
&--active
color var(--linkColorActive)
&--active
&--active-trail
font-weight 700
padding-bottom 8px
& ^[0]__item-link-icon
transform rotate(90deg)
&__item-link-icon
position absolute
right 16px
+between(breakpointHeaderSmall, breakpoint)
right 32px
& .down-toggle-icon__shape
fill var(--iconFillColor)
No notes defined.