<nav aria-label="Programs & Schools menu" class="small-secondary-navigation-container">
<div class="small-secondary-navigation-container__heading">
<button aria-expanded="false" class="js-small-secondary-nav-toggle small-secondary-navigation-container__heading-link" aria-label="Toggle the context menu for Programs & Schools">
Programs & Schools
</button>
</div>
<div data-expanded="false" class="js-small-secondary-nav small-secondary-navigation-container__menu">
<ul class="small-secondary-navigation ">
</ul>
</div>
</nav>
{{ enqueue_script('secondary-navigation') }}
{% for item in mainMenu.items %}
{% if item.isDescendantActive or item.isActive %}
<nav aria-label="{{ item.title }} menu" class="small-secondary-navigation-container">
<div class="small-secondary-navigation-container__heading">
<button
aria-expanded="false"
class="js-small-secondary-nav-toggle small-secondary-navigation-container__heading-link"
aria-label="Toggle the context menu for {{ item.title }}"
>
{{ item.title }}
{% if item.children %}
<span class="small-secondary-navigation-container__heading-link-icon">
{% include 'bits/icons/right-chevron.twig' %}
</span>
{% endif %}
</button>
</div>
<div data-expanded="false" class="js-small-secondary-nav small-secondary-navigation-container__menu">
<ul class="small-secondary-navigation {{ child ? 'small-secondary-navigation--child' }}">
{% for item in item.children %}
<li class="small-secondary-navigation__item">
<a
class="
small-secondary-navigation__item-link
{{ item.isActive ? 'small-secondary-navigation__item-link--active' }}
{{ item.isDescendantActive ? 'small-secondary-navigation__item-link--active-trail' }}
"
href="{{ item.url }}">{{ item.title }}
</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
.small-secondary-navigation-container
--backgroundColor white
--backgroundColorActive blue500
--borderColor blue500
--borderRadius 4px
--buttonBorder coolGray3
--buttonBorderActive blue500
--headingLinkColor blue500
--headingLinkColorActive white
--linkColorActive blue500
--iconFillColor blue500
--iconFillColorActive white
width 100%
+above(breakpoint)
display none
&__heading-link
@extends $linkBodyLarge
background-color var(--backgroundColor)
border 2px solid var(--buttonBorder)
border-radius var(--borderRadius)
color var(--headingLinkColor)
display flex
text-decoration none
padding 16px
z-index 1
+below(breakpointHeaderSmall)
padding-left 16px
position relative
cursor pointer
width 100%
transition all 0.3s
&[aria-expanded="true"]
background-color var(--backgroundColorActive)
border-color var(--buttonBorderActive)
border-bottom-left-radius 0
border-bottom-right-radius 0
color var(--headingLinkColorActive)
& ^[0]__heading-link-icon
transform rotate(-90deg)
& .down-toggle-icon__shape
& ._mark
fill var(--iconFillColorActive)
&__heading-link-icon
position absolute
right 16px
& path
fill var(--iconFillColor)
+above(breakpointHeaderSmall)
right 32px
transition all 0.3s
&__menu
+below(breakpoint)
display none
background-color white
border 2px solid var(--borderColor)
border-bottom-left-radius var(--borderRadius)
border-bottom-right-radius var(--borderRadius)
padding 8px 16px
&[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
breakpointSmall = 700px
.small-secondary-navigation
--borderColor coolGray3
--borderRadius 0
--linkColorActive blue500
--textColor grey500
&__item
overflow hidden
&:not(:last-child)
border-bottom 2px solid var(--borderColor)
&: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 $linkBodyLarge
background-color white
color var(--textColor)
display flex
text-decoration none
padding 16px 0
position relative
&:focus
&:hover
&:active
background-color cloud
&--active
color var(--linkColorActive)
&--active
&--active-trail
font-weight 700
&__item-link-icon
position absolute
right 16px
+between(breakpointHeaderSmall, breakpoint)
right 32px
& .down-toggle-icon__shape
fill var(--iconFillColor)
No notes defined.