<!-- Classic (Default) -->
<nav class="mol-header-desktop-nav mol-header-desktop-nav--classic">
<ul>
<li class="active">
<div class="selector selector-closed selector--compact">
<span class="selector-wrapper">
<a href="atm-nav-link selector-link" href="#">
<span class="text"> Opdrachtgevers met extra text </span>
</a>
<button>
<i class="atm-icon far fa-chevron-down fa-xs "></i>
</button>
</span>
<div class="selector-sub">
<ul>
<li class="selector-item selector-item selector-item--">
<a href="#" class="selector-item-link">
<span>/</span>
<p>Mijn villa</p>
</a>
</li>
<li class="selector-item selector-item selector-item--">
<a href="#" class="selector-item-link">
<span>/</span>
<p>Bouwreizen</p>
</a>
</li>
<li class="selector-item selector-item selector-item--">
<a href="#" class="selector-item-link">
<span>/</span>
<p>Partners</p>
</a>
</li>
<li class="selector-item selector-item selector-item--">
<a href="#" class="selector-item-link">
<span>/</span>
<p>Blog</p>
</a>
</li>
<li class="selector-item selector-item selector-item--">
<a href="#" class="selector-item-link">
<span>/</span>
<p>Mijn villa</p>
</a>
</li>
<li class="selector-item selector-item selector-item--">
<a href="#" class="selector-item-link">
<span>/</span>
<p>Bouwreizen</p>
</a>
</li>
</ul>
</div>
</div>
</li>
<li class="">
<div class="selector selector-closed selector--compact">
<span class="selector-wrapper">
<a href="atm-nav-link selector-link" href="#">
<span class="text"> Branches </span>
</a>
<button>
<i class="atm-icon far fa-chevron-down fa-xs "></i>
</button>
</span>
<div class="selector-sub">
<ul>
<li class="selector-item selector-item selector-item--">
<a href="#" class="selector-item-link">
<span>/</span>
<p>Mijn villa</p>
</a>
</li>
<li class="selector-item selector-item selector-item--">
<a href="#" class="selector-item-link">
<span>/</span>
<p>Bouwreizen</p>
</a>
</li>
<li class="selector-item selector-item selector-item--">
<a href="#" class="selector-item-link">
<span>/</span>
<p>Partners</p>
</a>
</li>
<li class="selector-item selector-item selector-item--">
<a href="#" class="selector-item-link">
<span>/</span>
<p>Blog</p>
</a>
</li>
</ul>
</div>
</div>
</li>
<li class="">
<a class="atm-nav-link " href="#" title="Nav link" aria-label="" target="">Over</a>
</li>
<li class="">
<a class="atm-nav-link " href="#" title="Nav link" aria-label="" target="">Vacatures</a>
</li>
</ul>
</nav>
<!-- Mega menu -->
<nav class="mol-header-desktop-nav mol-header-desktop-nav--megamenu">
<ul>
<li class="active">
<div class="selector selector-closed">
<span class="selector-wrapper">
<a href="atm-nav-link selector-link" href="#">
<span class="text"> Opdrachtgevers met extra text </span>
</a>
<button>
<i class="atm-icon far fa-chevron-down fa-xs "></i>
</button>
</span>
<div class="selector-sub mega-menu mega-menu--marketing">
<ul>
<li>
<a href="#">
<i class="atm-icon fal fa-ferris-wheel "></i>
<div>
<p class="atm-heading h6">Mijn villa</p>
<div class="atm-paragraph">
<p>The latest industry news, updates and info.</p>
</div>
</div>
</a>
</li>
<li>
<a href="#">
<i class="atm-icon fal fa-book "></i>
<div>
<p class="atm-heading h6">Bouwreizen</p>
<div class="atm-paragraph">
<p>The latest industry news, updates and info.</p>
</div>
</div>
</a>
</li>
<li>
<a href="#">
<i class="atm-icon fal fa-bolt-lightning "></i>
<div>
<p class="atm-heading h6">Partners</p>
<div class="atm-paragraph">
<p>The latest industry news, updates and info.</p>
</div>
</div>
</a>
</li>
<li>
<a href="#">
<i class="atm-icon fal fa-circle-play "></i>
<div>
<p class="atm-heading h6">Blog</p>
<div class="atm-paragraph">
<p>The latest industry news, updates and info.</p>
</div>
</div>
</a>
</li>
<li>
<a href="#">
<i class="atm-icon fal fa-ferris-wheel "></i>
<div>
<p class="atm-heading h6">Mijn villa</p>
<div class="atm-paragraph">
<p>The latest industry news, updates and info.</p>
</div>
</div>
</a>
</li>
<li>
<a href="#">
<i class="atm-icon fal fa-book "></i>
<div>
<p class="atm-heading h6">Bouwreizen</p>
<div class="atm-paragraph">
<p>The latest industry news, updates and info.</p>
</div>
</div>
</a>
</li>
</ul>
<div class="marketing-area">
<div>
<picture class="atm-image ">
<source srcset="https://picsum.photos/id/250/1280/1280" media="(min-width: 1024px)">
<source srcset="https://picsum.photos/id/250/1024/1024" media="(min-width: 768px)">
<img class="" src="https://picsum.photos/id/250/768/768" alt="" loading="lazy">
</picture>
<h4 class="atm-heading ">Create more value for your customers with extra services</h4>
<div class="atm-paragraph text-md">We’ve just released a 10 minute podcast about value creation for your customers.</div>
</div>
<a class="atm-button atm-button-primary button-md icon-left ">
<div class="button-content-wrapper">
<span class="button-content">
<i class="atm-icon fal fa-arrow-right "></i>
<span>Listen podcast</span>
</span>
</div>
<span class="button-triangle"></span>
</a>
</div>
</div>
</div>
</li>
<li class="">
<div class="selector selector-closed">
<span class="selector-wrapper">
<a href="atm-nav-link selector-link" href="#">
<span class="text"> Branches </span>
</a>
<button>
<i class="atm-icon far fa-chevron-down fa-xs "></i>
</button>
</span>
<div class="selector-sub mega-menu mega-menu--marketing">
<ul>
<li>
<a href="#">
<i class="atm-icon fal fa-ferris-wheel "></i>
<div>
<p class="atm-heading h6">Mijn villa</p>
<div class="atm-paragraph">
<p>The latest industry news, updates and info.</p>
</div>
</div>
</a>
</li>
<li>
<a href="#">
<i class="atm-icon fal fa-book "></i>
<div>
<p class="atm-heading h6">Bouwreizen</p>
<div class="atm-paragraph">
<p>The latest industry news, updates and info.</p>
</div>
</div>
</a>
</li>
<li>
<a href="#">
<i class="atm-icon fal fa-bolt-lightning "></i>
<div>
<p class="atm-heading h6">Partners</p>
<div class="atm-paragraph">
<p>The latest industry news, updates and info.</p>
</div>
</div>
</a>
</li>
<li>
<a href="#">
<i class="atm-icon fal fa-circle-play "></i>
<div>
<p class="atm-heading h6">Blog</p>
<div class="atm-paragraph">
<p>The latest industry news, updates and info.</p>
</div>
</div>
</a>
</li>
</ul>
<div class="marketing-area">
<div>
<picture class="atm-image ">
<source srcset="https://picsum.photos/id/250/1280/1280" media="(min-width: 1024px)">
<source srcset="https://picsum.photos/id/250/1024/1024" media="(min-width: 768px)">
<img class="" src="https://picsum.photos/id/250/768/768" alt="" loading="lazy">
</picture>
<h4 class="atm-heading ">Create more value for your customers with extra services</h4>
<div class="atm-paragraph text-md">We’ve just released a 10 minute podcast about value creation for your customers.</div>
</div>
<a class="atm-button atm-button-primary button-md icon-left ">
<div class="button-content-wrapper">
<span class="button-content">
<i class="atm-icon fal fa-arrow-right "></i>
<span>Listen podcast</span>
</span>
</div>
<span class="button-triangle"></span>
</a>
</div>
</div>
</div>
</li>
<li class="">
<a class="atm-nav-link " href="#" title="Nav link" aria-label="" target="">Over</a>
</li>
<li class="">
<a class="atm-nav-link " href="#" title="Nav link" aria-label="" target="">Vacatures</a>
</li>
</ul>
</nav>
<!-- Classic (Default) -->
<nav class="mol-header-desktop-nav mol-header-desktop-nav--{{modifier}}">
<ul>
{{#each items}}
<li class="{{#if active}}active{{/if}}">
{{#if subitems}}
<div class="selector selector-closed selector--compact">
<span class="selector-wrapper">
<a href="atm-nav-link selector-link" href="#">
<span class="text"> {{text}} </span>
</a>
<button>
{{render '@icon' @root.moreIcon}}
</button>
</span>
<div class="selector-sub">
<ul>
{{#each subitems}}
<li class="selector-item selector-item selector-item--{{this.class}}">
<a href="{{href}}" class="selector-item-link">
<span>/</span>
<p>{{title}}</p>
</a>
</li>
{{/each}}
</ul>
</div>
</div>
{{else}}
{{render '@nav-link' this merge=true}}
{{/if}}
</li>
{{/each}}
</ul>
</nav>
<!-- Mega menu -->
<nav class="mol-header-desktop-nav mol-header-desktop-nav--{{modifier}}">
<ul>
{{#each items}}
<li class="{{#if active}}active{{/if}}">
{{#if subitems}}
<div class="selector selector-closed">
<span class="selector-wrapper">
<a href="atm-nav-link selector-link" href="#">
<span class="text"> {{text}} </span>
</a>
<button>
{{render '@icon' @root.moreIcon}}
</button>
{{!-- <span class="mega-menu-arrow"></span> --}}
</span>
{{render '@mega-menu--marketing' this merge=true}}
</div>
{{else}}
{{render '@nav-link' this merge=true}}
{{/if}}
</li>
{{/each}}
</ul>
</nav>
/* Classic (Default) */
{
"moreIcon": {
"icon": "fa-chevron-down",
"style": "far",
"size": "fa-xs"
},
"items": [
{
"text": "Opdrachtgevers met extra text",
"active": true,
"href": "#",
"subitems": [
{
"title": "Mijn villa",
"text": "The latest industry news, updates and info.",
"active": true,
"href": "#",
"itemIcon": {
"icon": "fa-ferris-wheel",
"style": "fal"
}
},
{
"title": "Bouwreizen",
"text": "The latest industry news, updates and info.",
"active": false,
"href": "#",
"itemIcon": {
"icon": "fa-book",
"style": "fal"
}
},
{
"title": "Partners",
"text": "The latest industry news, updates and info.",
"active": false,
"href": "#",
"itemIcon": {
"icon": "fa-bolt-lightning",
"style": "fal"
}
},
{
"title": "Blog",
"text": "The latest industry news, updates and info.",
"active": false,
"href": "#",
"itemIcon": {
"icon": "fa-circle-play",
"style": "fal"
}
},
{
"title": "Mijn villa",
"text": "The latest industry news, updates and info.",
"active": true,
"href": "#",
"itemIcon": {
"icon": "fa-ferris-wheel",
"style": "fal"
}
},
{
"title": "Bouwreizen",
"text": "The latest industry news, updates and info.",
"active": false,
"href": "#",
"itemIcon": {
"icon": "fa-book",
"style": "fal"
}
}
]
},
{
"text": "Branches",
"active": false,
"href": "#",
"subitems": [
{
"title": "Mijn villa",
"text": "The latest industry news, updates and info.",
"active": true,
"href": "#",
"itemIcon": {
"icon": "fa-ferris-wheel",
"style": "fal"
}
},
{
"title": "Bouwreizen",
"text": "The latest industry news, updates and info.",
"active": false,
"href": "#",
"itemIcon": {
"icon": "fa-book",
"style": "fal"
}
},
{
"title": "Partners",
"text": "The latest industry news, updates and info.",
"active": false,
"href": "#",
"itemIcon": {
"icon": "fa-bolt-lightning",
"style": "fal"
}
},
{
"title": "Blog",
"text": "The latest industry news, updates and info.",
"active": false,
"href": "#",
"itemIcon": {
"icon": "fa-circle-play",
"style": "fal"
}
}
]
},
{
"text": "Over",
"active": false,
"href": "#"
},
{
"text": "Vacatures",
"active": false,
"href": "#"
}
],
"modifier": "classic",
"hasIcon": false,
"icon": {}
}
/* Mega menu */
{
"moreIcon": {
"icon": "fa-chevron-down",
"style": "far",
"size": "fa-xs"
},
"items": [
{
"text": "Opdrachtgevers met extra text",
"active": true,
"href": "#",
"subitems": [
{
"title": "Mijn villa",
"text": "The latest industry news, updates and info.",
"active": true,
"href": "#",
"itemIcon": {
"icon": "fa-ferris-wheel",
"style": "fal"
}
},
{
"title": "Bouwreizen",
"text": "The latest industry news, updates and info.",
"active": false,
"href": "#",
"itemIcon": {
"icon": "fa-book",
"style": "fal"
}
},
{
"title": "Partners",
"text": "The latest industry news, updates and info.",
"active": false,
"href": "#",
"itemIcon": {
"icon": "fa-bolt-lightning",
"style": "fal"
}
},
{
"title": "Blog",
"text": "The latest industry news, updates and info.",
"active": false,
"href": "#",
"itemIcon": {
"icon": "fa-circle-play",
"style": "fal"
}
},
{
"title": "Mijn villa",
"text": "The latest industry news, updates and info.",
"active": true,
"href": "#",
"itemIcon": {
"icon": "fa-ferris-wheel",
"style": "fal"
}
},
{
"title": "Bouwreizen",
"text": "The latest industry news, updates and info.",
"active": false,
"href": "#",
"itemIcon": {
"icon": "fa-book",
"style": "fal"
}
}
]
},
{
"text": "Branches",
"active": false,
"href": "#",
"subitems": [
{
"title": "Mijn villa",
"text": "The latest industry news, updates and info.",
"active": true,
"href": "#",
"itemIcon": {
"icon": "fa-ferris-wheel",
"style": "fal"
}
},
{
"title": "Bouwreizen",
"text": "The latest industry news, updates and info.",
"active": false,
"href": "#",
"itemIcon": {
"icon": "fa-book",
"style": "fal"
}
},
{
"title": "Partners",
"text": "The latest industry news, updates and info.",
"active": false,
"href": "#",
"itemIcon": {
"icon": "fa-bolt-lightning",
"style": "fal"
}
},
{
"title": "Blog",
"text": "The latest industry news, updates and info.",
"active": false,
"href": "#",
"itemIcon": {
"icon": "fa-circle-play",
"style": "fal"
}
}
]
},
{
"text": "Over",
"active": false,
"href": "#"
},
{
"text": "Vacatures",
"active": false,
"href": "#"
}
],
"modifier": "megamenu",
"hasIcon": false,
"icon": {}
}
.mol-header-desktop-nav {
@apply self-stretch hidden lg:block relative;
> ul {
@apply flex items-center backdrop-blur-sm h-full gap-4 px-4 rounded-full bg-white bg-opacity-90;
> li {
> a,
> div > span > a {
@apply text-md font-medium;
&:hover {
@apply text-secondary-col-1;
}
}
}
}
.selector-wrapper {
@apply inline-flex flex-nowrap gap-2;
}
.selector {
@apply static;
&.selector-active {
.selector-link {
@apply text-secondary-col-1;
}
}
.selector-link {
@apply p-0 relative;
}
.selector-sub {
@apply right-auto;
&.mega-menu {
@apply left-1/2 -translate-x-1/2 shadow-none;
}
}
}
}
(function () {
'use strict';
})();
No notes defined.