<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__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>
</span>
<span class="small-main-navigation-toggle__content-container small-main-navigation-toggle__content-container--expanded">
<span class="small-main-navigation-toggle__text">
Close
</span>
<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">
<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">Primary Page One
</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">Primary Page Two
</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">Primary Page Three
<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-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 Primary Page Three 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">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
" 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">Primary Page Four
</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">Primary Page Five
</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">Primary Page Six
</a>
</div>
</li>
</ul>
<div class="small-main-navigation__search">
<div class="quick-search quick-search--large">
<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 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">
<span class="small-main-navigation-toggle__content-container small-main-navigation-toggle__content-container--collapsed">
<span class="small-main-navigation-toggle__text">
Menu
</span>
<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__text">
Close
</span>
<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">
<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>
{
"mainMenu": {
"currentPageInMenu": true,
"items": [
{
"title": "Primary Page One",
"url": "https://google.com",
"isActive": true,
"isChildActive": false,
"isDescendantActive": true,
"children": []
},
{
"title": "Primary Page Two",
"url": "http://google.com",
"isActive": false,
"isChildActive": false,
"isDescendantActive": false,
"children": []
},
{
"title": "Primary Page Three",
"url": "http://google.com",
"isActive": false,
"isChildActive": false,
"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": false,
"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": "Primary Page Four",
"url": "http://google.com",
"isActive": false,
"isChildActive": false,
"isDescendantActive": false,
"children": []
},
{
"title": "Primary Page Five",
"url": "http://google.com",
"isActive": false,
"isChildActive": false,
"isDescendantActive": false,
"children": []
},
{
"title": "Primary Page Six",
"url": "http://google.com",
"isActive": false,
"isChildActive": false,
"isDescendantActive": false,
"children": []
}
]
}
}
.small-main-navigation-toggle
--buttonBackgroundColor white
--collapsedTextColor charcoal
--expandedTextColor charcoal
--iconFillColor charcoal
align-items center
cursor pointer
display flex
margin-left auto
position relative
+above(breakpointHeaderLarge)
display none
&__text
@extends $headline5
color var(--collapsedTextColor)
flex 1
margin-right 8px
&__icon
transition all 0.3s
margin-bottom -2px
& .x__shape
& .menu__shape
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 white
--backgroundColor charcoal
--iconFillColor white
--iconFillColorActive charcoal
--itemBackgroundColor soot
--itemBackgroundColorActive white
--itemTextColorActive charcoal
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 $headline5
color white
display block
text-decoration none
background-color var(--itemBackgroundColor)
padding 12px 16px
flex 1
transition all 0.3s
&--active
&--active-trail
border-left 4px solid var(--itemBackgroundColorActive)
&:focus
&:hover
&:active
background-color var(--itemBackgroundColorActive)
color var(--itemTextColorActive)
& .small-main-navigation__item-link-icon
transform translateX(4px)
& .right-chevron__shape
fill var(--iconFillColorActive)
&__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)
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)
& .down-toggle-icon__shape
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 white
&__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
color white
background-color var(--itemBackgroundColor)
padding 16px 32px
display block
text-decoration none
transition all 0.3s
&--active
&--active-trail
border-left 4px solid white
&:focus
&:hover
&:active
background-color var(--itemBackgroundColorActive)
color var(--itemTextColorActive)
&__search
background-color var(--itemBackgroundColor)
padding 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 2
opacity 1
display block
No notes defined.