<div role="navigation" aria-label="Main Navigation" class="main-navigation">
<ul class="main-navigation__list">
<li class="main-navigation__item">
<a class="
main-navigation__item-link
main-navigation__item-link--active
main-navigation__item-link--active-trail
" href="https://google.com">Primary Page One
</a>
</li>
<li class="main-navigation__item">
<a class="
main-navigation__item-link
" href="http://google.com">Primary Page Two
</a>
</li>
<li class="main-navigation__item">
<a aria-expanded="false" class="
js-mega-menu-toggle
main-navigation__item-link
" href="http://google.com">Primary Page Three
<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">
<div class="mega-menu__title">
<div class="mega-menu__title-text">
<a href="http://google.com" class="mega-menu__title-text-link">
Primary Page Three
<span class="mega-menu__title-text-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>
</span>
</a>
</div>
</div>
<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>
<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">
<a class="
main-navigation__item-link
" href="http://google.com">Primary Page Four
</a>
</li>
<li class="main-navigation__item">
<a class="
main-navigation__item-link
" href="http://google.com">Primary Page Five
</a>
</li>
<li class="main-navigation__item">
<a class="
main-navigation__item-link
" href="http://google.com">Primary Page Six
</a>
</li>
</ul>
</div>
<div role="navigation" aria-label="Main Navigation" class="main-navigation">
<ul class="main-navigation__list">
{% for item in mainMenu.items %}
<li class="main-navigation__item">
<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">
<div class="mega-menu__title">
<div class="mega-menu__title-text">
<a href="{{ item.url }}" class="mega-menu__title-text-link">
{{ item.title }}
<span class="mega-menu__title-text-link-icon">
{% include 'bits/icons/down-toggle.twig' %}
</span>
</a>
</div>
</div>
<ul class="mega-menu__list">
{% for item in item.children %}
<li class="mega-menu__item">
<a
class="
mega-menu__item-link
{{ item.isActive ? 'mega-menu__item-link--active' }}
{{ item.isDescendantActive ? 'mega-menu__item-link--active-trail' }}
"
href="{{ item.url }}">{{ item.title }}
</a>
</li>
{% endfor %}
</ul>
</div>
</div>
</div>
{% endif %}
</li>
{% endfor %}
</ul>
</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": []
}
]
}
}
.main-navigation
--itemLinkIconColor charcoal
--itemLinkTextColor charcoal
--itemLinkBorderColorActive smokeDarkest
--itemLinkBorderColorFocus charcoal
+below(breakpointHeaderLarge)
display none
&__list
display flex
justify-content space-between
margin-left -24px
margin-right -24px
margin-bottom -11px
&__item
&:not(:last-child)
margin-left 8px
&:not(:first-child)
margin-right 8px
&__item-link
@extends $headline5
align-items center
color var(--itemLinkTextColor)
display flex
font-size 20px
padding 10px 16px
position relative
text-decoration none
transition all 0.2s
white-space nowrap
border-bottom: 4px solid transparent
& ^[0]__item-link-icon svg
position relative
top -3px
transform rotate(0)
transition transform 200ms ease-in-out
&:focus
&:hover
&:active
&[aria-expanded=true]
z-index 2
& ^[0]__item-link-icon svg
transform rotate(-90deg)
&--active
border-bottom 4px solid var(--itemLinkBorderColorActive)
&:focus
&:hover
border-bottom 4px solid var(--itemLinkBorderColorFocus)
&__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 charcoal
--itemBackgroundColor soot
--itemBackgroundColorFocus white
--itemLinkIconColor white
--itemTextColorFocus charcoal
background-color var(--backgroundColor)
position absolute
left 0
right 0
top 100%
opacity 0
padding-top 32px
padding-bottom 32px
transition all 0.2s
&:before
&:after
background-color var(--backgroundColor)
bottom 0
content ""
display block
position absolute
top 0
width 100vw
&:before
right 100%
&:after
left 100%
&__container
@extends $contentContainer
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 2
column-gap 8px
flex 1
&__item
background-color var(--itemBackgroundColor)
break-inside avoid
margin-bottom 8px
&__item-link
color white
padding 16px
text-decoration none
display block
transition all 0.3s
&:focus
&:hover
&:active
background-color var(--itemBackgroundColorFocus)
color var(--itemTextColorFocus)
&--active
&--active-trail
border-left 4px solid white
.mega-menu[data-active=true]
z-index 2
opacity 1
display block
No notes defined.