<button aria-label="Toggle main navigation" aria-expanded="false" class="small-main-navigation-toggle js-small-main-navigation-toggle">
<span class="small-main-navigation-toggle__content-container small-main-navigation-toggle__content-container--collapsed">
<span class="small-main-navigation-toggle__icon">
<svg class="menu" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<g class="menu__shape" mask="url(#mask0_3722_41141)">
<path d="M3 18V16H21V18H3ZM3 13V11H21V13H3ZM3 8V6H21V8H3Z" fill="#162F93" />
</g>
</svg>
</span>
</span>
<span class="small-main-navigation-toggle__content-container small-main-navigation-toggle__content-container--expanded">
<span class="small-main-navigation-toggle__icon">
<svg class="x" xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12" fill="none">
<path class="x__shape" d="M1.6129 0.209705L1.70711 0.292893L6 4.585L10.2929 0.292893C10.6834 -0.0976311 11.3166 -0.0976311 11.7071 0.292893C12.0676 0.653377 12.0953 1.22061 11.7903 1.6129L11.7071 1.70711L7.415 6L11.7071 10.2929C12.0976 10.6834 12.0976 11.3166 11.7071 11.7071C11.3466 12.0676 10.7794 12.0953 10.3871 11.7903L10.2929 11.7071L6 7.415L1.70711 11.7071C1.31658 12.0976 0.683418 12.0976 0.292893 11.7071C-0.0675907 11.3466 -0.0953203 10.7794 0.209705 10.3871L0.292893 10.2929L4.585 6L0.292893 1.70711C-0.0976311 1.31658 -0.0976311 0.683418 0.292893 0.292893C0.653377 -0.0675907 1.22061 -0.0953203 1.6129 0.209705Z" fill="#303030" />
</svg>
</span>
</span>
</button>
<div role="navigation" aria-label="Main Navigation" class="small-main-navigation">
<div class="small-main-navigation__search">
<div class="quick-search">
<form role="search" method="get" 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">
<label for="quick-search-small-input" class="quick-search__input-label">
Search the website
</label>
<div class="quick-search__icon" aria-hidden="true">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="25" fill="none" viewBox="0 0 24 25">
<path class="_mark" fill="#fff" d="m19.6 21.5-6.3-6.3a6.096 6.096 0 0 1-3.8 1.3c-1.817 0-3.354-.63-4.612-1.887C3.629 13.354 3 11.817 3 10c0-1.817.63-3.354 1.888-4.612C6.146 4.129 7.683 3.5 9.5 3.5c1.817 0 3.354.63 4.613 1.888C15.37 6.646 16 8.183 16 10a6.096 6.096 0 0 1-1.3 3.8l6.3 6.3-1.4 1.4Zm-10.1-7c1.25 0 2.313-.438 3.188-1.313C13.562 12.313 14 11.25 14 10c0-1.25-.438-2.313-1.313-3.188C11.813 5.938 10.75 5.5 9.5 5.5c-1.25 0-2.313.438-3.188 1.313S5 8.75 5 10c0 1.25.438 2.313 1.313 3.188.875.874 1.937 1.312 3.187 1.312Z" />
</svg>
</div>
<input aria-label="submit search query" class="quick-search__submit" type="submit" id="quick-search-small-submit" value="Search" />
</form>
</div>
</div>
<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
small-main-navigation__item-link--active-trail" href="https://google.com">Programs & Schools
</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">Admissions & Aid
</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">Research & Creative Work
</a>
<button aria-expanded="false" class="small-main-navigation__item-toggle" aria-label="toggle Research & Creative Work menu">
<span class="small-main-navigation__item-toggle-icon">
<svg width="6" height="12" viewBox="0 0 6 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path class="_mark icon-right-chevron__shape" fill-rule="evenodd" clip-rule="evenodd" d="M0.400059 0.200059C0.841887 -0.131312 1.46869 -0.041769 1.80006 0.400059L6.00006 6.00006L1.80006 11.6001C1.46869 12.0419 0.841887 12.1314 0.400059 11.8001C-0.0417684 11.4687 -0.131312 10.8419 0.200059 10.4001L3.50006 6.00006L0.200059 1.60006C-0.131312 1.15823 -0.0417684 0.53143 0.400059 0.200059Z" fill="black" />
</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">Interior Page 1
</a>
</li>
<li class="small-main-navigation__children-item">
<a class="
small-main-navigation__children-item-link
" href="http://google.com">Interior Page 2
</a>
</li>
<li class="small-main-navigation__children-item">
<a class="
small-main-navigation__children-item-link
small-main-navigation__children-item-link--active
" href="http://google.com">Interior Page 3
</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">Interior Page 4
</a>
</li>
<li class="small-main-navigation__children-item">
<a class="
small-main-navigation__children-item-link
" href="http://google.com">Interior Page 5
</a>
</li>
<li class="small-main-navigation__children-item">
<a class="
small-main-navigation__children-item-link
" href="http://google.com">Interior Page 6
</a>
</li>
<li class="small-main-navigation__children-item">
<a class="
small-main-navigation__children-item-link
" href="http://google.com">Interior Page 7
</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">About
</a>
</div>
</li>
</ul>
<div class="small-main-navigation__eyebrow">
<ul class="eyebrow-menu">
</ul>
</div>
</div>
{{ enqueue_script('small-main-navigation') }}
<button aria-label="Toggle main navigation"
aria-expanded="false"
class="small-main-navigation-toggle js-small-main-navigation-toggle">
<span class="small-main-navigation-toggle__content-container small-main-navigation-toggle__content-container--collapsed">
<span class="small-main-navigation-toggle__icon">
{% include 'bits/icons/menu.twig' %}
</span>
</span>
<span class="small-main-navigation-toggle__content-container small-main-navigation-toggle__content-container--expanded">
<span class="small-main-navigation-toggle__icon">
{% include 'bits/icons/x.twig' %}
</span>
</span>
</button>
<div
role="navigation"
aria-label="Main Navigation"
class="small-main-navigation">
<div class="small-main-navigation__search">
{% include 'bits/quick-search/quick-search.twig' with {
isLarge: true,
id: 'quick-search-small'
} %}
</div>
<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 }}
</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/right-chevron.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__eyebrow">
{% include 'partials/navigation/eyebrow/eyebrow.twig' %}
</div>
</div>
{
"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": []
}
]
}
}
.small-main-navigation-toggle
--buttonBackgroundColor white
--iconFillColor blue500
align-items center
cursor pointer
display flex
margin-left auto
position relative
+above(breakpointHeaderLarge)
display none
&__icon
transition all 0.3s
margin-bottom -2px
& .x__shape
& .menu__shape
width 24px
fill var(--iconFillColor)
&[aria-expanded=true]
z-index 2
position relative
background-color var(--buttonBackgroundColor)
& .small-main-navigation-toggle__content-container--expanded
display block
& .small-main-navigation-toggle__content-container--collapsed
display none
&[aria-expanded=false]
& .small-main-navigation-toggle__content-container--expanded
display none
& .small-main-navigation-toggle__content-container--collapsed
display block
&[aria-expanded=true]
& ^[0]__text
color var(--expandedTextColor)
.small-main-navigation
--activeBackgroundColor transparent
--backgroundColor linear-gradient(180deg, #002657 0%, #162F93 100%)
--iconFillColor white
--iconFillColorActive white
--itemBackgroundColor transparent
--itemBackgroundColorActive transparent
--itemBorderColor blue400
--itemBorderColorActive orange
--itemTextColorActive white
background var(--backgroundColor)
display none
min-height 100vh
+above(breakpoint)
display none
@supports (display: grid)
position absolute
top 100%
left 0
right 0
z-index -1
opacity 0
&__list
padding 16px
&__item
border-bottom 2px solid var(--itemBorderColor)
&:has(&-link:hover, &-link:focus)
&:has(&-link--active, &-link--active-trail)
border-bottom-color var(--itemBorderColorActive)
&__item-container
display flex
&__item-link
@extends $headline3
border none
color white
display block
font-weight 500
text-decoration none
background-color var(--itemBackgroundColor)
padding 24px 16px 24px 0
flex 1
transition all 0.3s
&:focus
&:hover
&:active
border none
&__item-link-icon
display inline-block
margin-left 8px
transition all 0.3s
& path
fill var(--iconFillColor)
&__item-toggle
align-items center
background-color var(--itemBackgroundColor)
cursor pointer
display flex
flex 0 0 56px
justify-content center
margin-left 2px
transform rotate(90deg)
transition all 0.3s
&:focus
&:hover
&:active
background-color var(--activeBackgroundColor)
& path
fill var(--iconFillColorActive)
&[aria-expanded=true]
&--active
&--active-trail
transform rotate(-90deg)
&[aria-expanded=true]
background-color var(--activeBackgroundColor)
&__item-toggle-icon
width 16px
& .down-toggle-icon__shape
& ._mark
fill white
&__children
display none
&[data-active=true]
display block
&__children-item
border-top 2px solid var(--itemBorderColor)
margin-left 32px
&:has(&-link:hover, &-link:focus)
&:has(&-link--active, &-link--active-trail)
border-top-color var(--itemBorderColorActive)
&__children-item-link
color white
display block
font-family gentona
font-size 18px
padding 16px 32px 16px 0
text-decoration none
transition all 0.3s
&__search
+above(breakpointHeaderLarge)
display none
&__eyebrow
margin-top 32px
+above(breakpointHeaderLarge)
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 2
opacity 1
display block
No notes defined.