<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>
<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>
{
"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": {}
}
.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.