<div role="navigation" aria-label="Main Navigation" class="main-navigation">
<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
main-navigation__item-link--active-trail
" href="https://google.com">Our Work
<div class="main-navigation__item-link-icon-container">
<div class="main-navigation__item-link-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>
</div>
</div>
</a>
<div class="main-navigation__children">
<div data-active="false" class="mega-menu js-mega-menu">
<div class="mega-menu__container">
<ul class="mega-menu__list">
<li class="mega-menu__item">
<a class="
mega-menu__item-link
mega-menu__item-link--active-trail
" href="http://google.com">Interior Page 1
</a>
</li>
<li class="mega-menu__item">
<a class="
mega-menu__item-link
" href="http://google.com">Interior Page 2
</a>
</li>
<li class="mega-menu__item">
<a class="
mega-menu__item-link
" href="http://google.com">Interior Page 3
</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">Services
<div class="main-navigation__item-link-icon-container">
<div class="main-navigation__item-link-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>
</div>
</div>
</a>
<div class="main-navigation__children">
<div data-active="false" class="mega-menu js-mega-menu">
<div class="mega-menu__container">
<ul class="mega-menu__list">
<li class="mega-menu__item">
<a class="
mega-menu__item-link
" href="http://google.com">Interior Page 1
</a>
</li>
<li class="mega-menu__item">
<a class="
mega-menu__item-link
" href="http://google.com">Interior Page 2
</a>
</li>
<li class="mega-menu__item">
<a class="
mega-menu__item-link
" href="http://google.com">Interior Page 3
</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">About
<div class="main-navigation__item-link-icon-container">
<div class="main-navigation__item-link-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>
</div>
</div>
</a>
<div class="main-navigation__children">
<div data-active="false" class="mega-menu js-mega-menu">
<div class="mega-menu__container">
<ul class="mega-menu__list">
<li class="mega-menu__item">
<a class="
mega-menu__item-link
" href="http://google.com">Interior Page 1 Interior Page 1 Interior Page 1 Interior Page 1
</a>
</li>
<li class="mega-menu__item">
<a class="
mega-menu__item-link
" href="http://google.com">Interior Page 2
</a>
</li>
<li class="mega-menu__item">
<a class="
mega-menu__item-link
" href="http://google.com">Interior Page 3
</a>
</li>
<li class="mega-menu__item">
<a class="
mega-menu__item-link
mega-menu__item-link--active-trail
" href="http://google.com">Interior Page 4
</a>
</li>
<li class="mega-menu__item">
<a class="
mega-menu__item-link
" href="http://google.com">Interior Page 5
</a>
</li>
<li class="mega-menu__item">
<a class="
mega-menu__item-link
" href="http://google.com">Interior Page 6
</a>
</li>
<li class="mega-menu__item">
<a class="
mega-menu__item-link
" href="http://google.com">Interior Page 7
</a>
</li>
</ul>
</div>
</div>
</div>
</li>
<li class="main-navigation__item main-navigation__item--last">
<a aria-expanded="false" class="
js-mega-menu-toggle
main-navigation__item-link
" href="http://google.com">Invest
<div class="main-navigation__item-link-icon-container">
<div class="main-navigation__item-link-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>
</div>
</div>
</a>
<div class="main-navigation__children">
<div data-active="false" class="mega-menu js-mega-menu">
<div class="mega-menu__container">
<ul class="mega-menu__list">
<li class="mega-menu__item">
<a class="
mega-menu__item-link
" href="http://google.com">Interior Page 1
</a>
</li>
<li class="mega-menu__item">
<a class="
mega-menu__item-link
" href="http://google.com">Interior Page 2
</a>
</li>
<li class="mega-menu__item">
<a class="
mega-menu__item-link
" href="http://google.com">Interior Page 3
</a>
</li>
</ul>
</div>
</div>
</div>
</li>
<li class="main-navigation__search">
<button aria-expanded="false" class="search-toggle" data-search-toggle>
<div class="search-toggle__text">
Toggle search form
</div>
<div class="search-toggle__icon-open">
<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M17.1259 15.2325C17.6239 15.7638 17.6239 16.5939 17.1259 17.1251C16.5946 17.6232 15.7645 17.6232 15.2333 17.1251L11.2821 13.1408C9.92078 14.0372 8.26063 14.5021 6.46766 14.2697C3.41297 13.838 0.955938 11.3478 0.557501 8.3263C-0.00695259 3.81067 3.81141 -0.00768501 8.32703 0.556768C11.3485 0.955206 13.8388 3.41224 14.2704 6.46692C14.5028 8.25989 14.038 9.92005 13.1415 11.2482L17.1259 15.2325ZM3.14734 7.39661C3.14734 9.75403 5.03992 11.6466 7.39734 11.6466C9.72156 11.6466 11.6473 9.75403 11.6473 7.39661C11.6473 5.07239 9.72156 3.14661 7.39734 3.14661C5.03992 3.14661 3.14734 5.07239 3.14734 7.39661Z" />
<path d="M17.1259 15.2325C17.6239 15.7638 17.6239 16.5939 17.1259 17.1251C16.5946 17.6232 15.7645 17.6232 15.2333 17.1251L11.2821 13.1408C9.92078 14.0372 8.26063 14.5021 6.46766 14.2697C3.41297 13.838 0.955938 11.3478 0.557501 8.3263C-0.00695259 3.81067 3.81141 -0.00768501 8.32703 0.556768C11.3485 0.955206 13.8388 3.41224 14.2704 6.46692C14.5028 8.25989 14.038 9.92005 13.1415 11.2482L17.1259 15.2325ZM3.14734 7.39661C3.14734 9.75403 5.03992 11.6466 7.39734 11.6466C9.72156 11.6466 11.6473 9.75403 11.6473 7.39661C11.6473 5.07239 9.72156 3.14661 7.39734 3.14661C5.03992 3.14661 3.14734 5.07239 3.14734 7.39661Z" fill-opacity="0.2" />
</svg>
</div>
<div class="search-toggle__icon-close">
<svg class="close-icon" width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path class="close-icon__path" d="M15.7803 13.4951C16.4404 14.1045 16.4404 15.1709 15.7803 15.7803C15.4756 16.085 15.0693 16.2373 14.6631 16.2373C14.2061 16.2373 13.7998 16.085 13.4951 15.7803L8.16309 10.4482L2.78027 15.7803C2.47559 16.085 2.06934 16.2373 1.66309 16.2373C1.20605 16.2373 0.799805 16.085 0.495117 15.7803C-0.165039 15.1709 -0.165039 14.1045 0.495117 13.4951L5.82715 8.1123L0.495117 2.78027C-0.165039 2.1709 -0.165039 1.10449 0.495117 0.495117C1.10449 -0.165039 2.1709 -0.165039 2.78027 0.495117L8.16309 5.82715L13.4951 0.495117C14.1045 -0.165039 15.1709 -0.165039 15.7803 0.495117C16.4404 1.10449 16.4404 2.1709 15.7803 2.78027L10.4482 8.16309L15.7803 13.4951Z" fill="#14516E" />
</svg>
</div>
</button>
</li>
</ul>
</div>
{{ enqueue_script('main-navigation') }}
<div role="navigation" aria-label="Main Navigation" class="main-navigation">
<ul class="main-navigation__list">
{% set menuItems = mainMenu.items %}
{% for key, item in menuItems %}
<li class="main-navigation__item {% if key == menuItems|length - 1 %}main-navigation__item--last{% endif %}">
<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-container">
<div class="main-navigation__item-link-icon">
{% include 'bits/icons/down-toggle.twig' %}
</div>
</div>
{% endif %}
</a>
{% if item.children %}
<div class="main-navigation__children">
<div data-active="false" class="mega-menu js-mega-menu">
<div class="mega-menu__container">
<ul class="mega-menu__list">
{% for childItem in item.children %}
<li class="mega-menu__item">
<a
class="
mega-menu__item-link
{{ childItem.isActive ? 'mega-menu__item-link--active' }}
{{ childItem.isDescendantActive ? 'mega-menu__item-link--active-trail' }}
"
href="{{ childItem.url }}">{{ childItem.title }}
</a>
</li>
{% endfor %}
</ul>
</div>
</div>
</div>
{% endif %}
</li>
{% endfor %}
<li class="main-navigation__search">
{% include 'bits/search-toggle/search-toggle.twig' %}
</li>
</ul>
</div>
{
"site": {
"name": "E3 Alliance"
},
"mainMenu": {
"currentPageInMenu": true,
"items": [
{
"title": "Our Work",
"url": "https://google.com",
"isActive": true,
"isChildActive": false,
"isDescendantActive": true,
"children": [
{
"title": "Interior Page 1",
"url": "http://google.com",
"isActive": false,
"isChildActive": true,
"isDescendantActive": true,
"children": [
{
"title": "Child Page 1",
"url": "http://google.com",
"isActive": false,
"isChildActive": false,
"isDescendantActive": false,
"children": []
},
{
"title": "Child Page 2",
"url": "http://google.com",
"isActive": true,
"isChildActive": false,
"isDescendantActive": false,
"children": []
},
{
"title": "Child Page 3",
"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": "Child Page 1",
"url": "http://google.com",
"isActive": false,
"isChildActive": false,
"isDescendantActive": false,
"children": []
},
{
"title": "Child Page 2",
"url": "http://google.com",
"isActive": true,
"isChildActive": false,
"isDescendantActive": false,
"children": []
},
{
"title": "Child Page 3",
"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": "Services",
"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": "About",
"url": "http://google.com",
"isActive": false,
"isChildActive": false,
"isDescendantActive": false,
"children": [
{
"title": "Interior Page 1 Interior Page 1 Interior Page 1 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": "Invest",
"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": []
}
]
}
]
}
}
.main-navigation
--itemLinkIconColor greenApple
--itemLinkTextColor jet
--itemLinkBorderColorActive smokeDarkest
--itemLinkBorderColorFocus jet
--itemLinkBackgroundColorActive navigationGrey
display flex
align-items center
+below(breakpointHeaderLarge)
display none
&__list
align-items center
display flex
justify-content space-between
gap 0 48px
&__item
&--last
+below(1700px)
.mega-menu[data-active]
right 0
&__item-link
@extends $headline5
align-items center
border-radius 8px
color var(--itemLinkTextColor)
display flex
font-size 20px
line-height 28px
position relative
padding 8px 10px
text-decoration none
transition all 0.2s
white-space nowrap
& ^[0]__item-link-icon svg
position relative
top -3px
transform rotate(0)
transition transform 200ms ease-in-out
&:focus
&:hover
&:active
&[aria-expanded=true]
&--active
&--active-trail
background-color var(--itemLinkBackgroundColorActive)
z-index 2
&__item-link-icon-container
align-items center
display inline-flex
margin-left 8px
width 8px
& .down-toggle-icon__shape
fill var(--itemLinkIconColor)
.mega-menu
--backgroundColor white
--itemBackgroundColorActive navigationGrey
--itemBackgroundColorFocus sapphire
--itemLinkIconColor white
--itemTextColor jet
--itemTextColorFocus white
background-color var(--backgroundColor)
border-radius 8px
box-shadow 0 0 12px rgba(0,0,0,0.3)
opacity 0
position absolute
top 90%
transition all 0.2s
width 264px
&:before
&:after
background-color var(--backgroundColor)
bottom 0
content ""
display block
position absolute
top 0
+below(breakpointHeaderLarge)
&:before
right 100%
&:after
left 100%
&__container
display flex
&__title
margin-right 48px
width 400px
&__title-line
margin-bottom 16px
&__title-text-link-icon
display inline-block
transition all 0.3s
& svg
transform rotate(-90deg)
& .down-toggle-icon__shape
fill var(--itemLinkIconColor)
&__title-text-link
@extends $headline2
text-decoration none
color white
&:focus
&:hover
&:active
^[0]__title-text-link-icon
transform translate(4px, 0)
&__list
column-count 1
column-gap 8px
flex 1
&__item
background-color var(--itemBackgroundColor)
break-inside avoid
&__item-link
color var(--itemTextColor)
display block
font-size 16px
font-weight 700
line-height 24px
padding 12px 16px
//padding-right 165px
text-decoration none
transition all 0.3s
&:focus
&:hover
&:active
background-color var(--itemBackgroundColorFocus)
color var(--itemTextColorFocus)
&--active
&--active-trail
background-color var(--itemBackgroundColorActive)
.mega-menu[data-active=true]
z-index 2
opacity 1
display block
No notes defined.