<nav aria-label="Our Work menu" class="small-secondary-navigation-container">
<div class="small-secondary-navigation-container__heading">
<a href="https://google.com" class=" small-secondary-navigation-container__heading-link">Our Work</a>
<button aria-expanded="false" class="js-small-secondary-nav-toggle" aria-label="Toggle the context menu for Our Work">
<span class="small-secondary-navigation-container__heading-link-icon">
<svg class="down-chevron" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path class="_mark down-chevron__shape" d="M12 15.375L6 9.37498L7.4 7.97498L12 12.575L16.6 7.97498L18 9.37498L12 15.375Z" fill="#4E4E4E" />
</svg>
</span>
</button>
</div>
<div data-expanded="false" class="js-small-secondary-nav small-secondary-navigation-container__menu">
<ul class="small-secondary-navigation ">
<li class="small-secondary-navigation__item">
<a class="
small-secondary-navigation__item-link
small-secondary-navigation__item-link--active-trail
" href="http://google.com">Interior Page 1
</a>
<ul class="secondary-navigation-children">
<li class="secondary-navigation-children__item">
<a class="
secondary-navigation-children__item-link
" href="http://google.com">Child Page 1
</a>
</li>
<li class="secondary-navigation-children__item">
<a class="
secondary-navigation-children__item-link
secondary-navigation-children__item-link--active
" href="http://google.com">Child Page 2
</a>
<ul class="secondary-navigation-children">
</ul>
</li>
<li class="secondary-navigation-children__item">
<a class="
secondary-navigation-children__item-link
" href="http://google.com">Child Page 3
</a>
</li>
</ul>
</li>
<li class="small-secondary-navigation__item">
<a class="
small-secondary-navigation__item-link
" href="http://google.com">Interior Page 2
</a>
</li>
<li class="small-secondary-navigation__item">
<a class="
small-secondary-navigation__item-link
" href="http://google.com">Interior Page 3
</a>
</li>
</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">
<a href="{{ item.url }}" class=" small-secondary-navigation-container__heading-link">{{ item.title }}</a>
{% if item.children %}
<button
aria-expanded="false"
class="js-small-secondary-nav-toggle"
aria-label="Toggle the context menu for {{ item.title }}"
>
<span class="small-secondary-navigation-container__heading-link-icon">
{% include 'bits/icons/down-chevron.twig' %}
</span>
</button>
{% endif %}
</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/secondary-navigation-children/secondary-navigation-children.twig' with { items: item.children } %}
{% endif %}
</li>
{% endfor %}
</ul>
</div>
</nav>
{% endif %}
{% endfor %}
{
"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": []
}
]
}
]
}
}
breakpoint = breakpointHeaderLarge
.small-secondary-navigation-container
--backgroundColor white
--backgroundColorActive sapphire
--borderColor sapphire
--borderRadius 4px
--buttonBorder smokeDark
--buttonBorderActive sapphire
--headingLinkColor sapphire
--headingLinkColorActive white
--linkColorActive sapphire
--iconFillColor sapphire
--iconFillColorActive white
border 2px solid var(--borderColor)
border-radius var(--borderRadius)
+above(breakpoint)
display none
&__heading
align-items center
background-color var(--backgroundColor)
display flex
justify-content space-between
padding 16px
z-index 1
+above(650px)
padding 16px 16px 16px 24px
&[data-active="true"]
background-color var(--backgroundColorActive)
& ^[0]__heading-link-icon
transform rotate(-180deg)
& .down-toggle-icon__shape
& ._mark
fill var(--iconFillColorActive)
&__heading-link
@extends $headline6
color var(--headingLinkColor)
text-decoration none
position relative
cursor pointer
width 60%
transition all 0.3s
&[aria-expanded="true"]
border-bottom-left-radius 0
border-bottom-right-radius 0
color var(--headingLinkColorActive)
background-color var(--backgroundColorActive)
&__heading-link-icon
display flex
align-items center
transition all 0.3s
& path
fill var(--iconFillColor)
&__menu
display none
background-color white
border-bottom-left-radius var(--borderRadius)
border-bottom-right-radius var(--borderRadius)
padding 0 16px
&[data-collapsing]
display none
animation slideOut 0.5s
&[data-expanding]
display block
animation slideIn 0.5s
&[data-expanded=true]
display block
&[data-expanded=false]
display none
@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 sapphire
--borderRadius 0
--linkColorActive sapphire
--textColor jet
&--child
margin-left 16px
&__item
overflow hidden
&:not(:last-child)
border-bottom 1px 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 $headline6
background-color white
color var(--textColor)
display flex
text-decoration none
padding 20px 0
position relative
transition all 0.3s
&:focus
&:hover
&:active
padding-left 4px
&--active
&--active-trail
color var(--textColor)
padding: 20px 0 10px 0;
&--active
border-bottom 1px solid sapphire
&__item-link-icon
position absolute
right 16px
+between(breakpointHeaderSmall, breakpoint)
right 32px
& path
fill sapphire
No notes defined.