Fijn

Header component 

<div id="header" class="main clearfix">
    <nav class="navbar navbar-expand-xl navbar-light d-flex align-items-start">
        <button class="navbar-toggler js-toggleMenu" type="button" aria-controls="navbarToggleMobileMenu" aria-label="Toggle navigation">
            <svg width="22" height="14" viewBox="0 0 22 14" fill="none" xmlns="http://www.w3.org/2000/svg">
                <rect width="22" height="2" rx="1" fill="black" />
                <rect y="6" width="22" height="2" rx="1" fill="black" />
                <rect y="12" width="22" height="2" rx="1" fill="black" />
            </svg>
        </button>
        <a href="index.html" class="navbar-brand"><img src="../../img/logos/logo-portaal.svg" alt="logo"></a>
        <div class="component navigation navigation-title navbar-nav flex-column js-navigation">
            <div class="component-content">
                <nav>
                    <ul class="clearfix">

                        <li class="level1 item0 odd first rel-level1">
                            <div class="navigation-title field-navigationtitle">
                                <a class="-active" title="Overzicht" href="/">Overzicht</a>
                            </div>

                        </li>

                        <li class="level1 item1 even rel-level1">
                            <div class="navigation-title field-navigationtitle">
                                <a class="" title="Bestellingen" href="/">Bestellingen</a>
                            </div>

                        </li>

                        <li class="level1 item2 odd rel-level1">
                            <div class="navigation-title field-navigationtitle">
                                <a class="" title="Woningen" href="/">Woningen</a>
                            </div>

                        </li>

                        <li class="level1 item3 even rel-level1">
                            <div class="navigation-title field-navigationtitle">
                                <a class="" title="Bewoners" href="/">Bewoners</a>
                            </div>

                        </li>

                    </ul>
                </nav>
            </div>
        </div>
    </nav>
</div>
 
<div id="header" class="main clearfix">
    <nav class="navbar navbar-expand-xl navbar-light d-flex align-items-start">
        <button class="navbar-toggler js-toggleMenu" type="button" aria-controls="navbarToggleMobileMenu" aria-label="Toggle navigation">
            <svg width="22" height="14" viewBox="0 0 22 14" fill="none" xmlns="http://www.w3.org/2000/svg">
				<rect width="22" height="2" rx="1" fill="black"/>
				<rect y="6" width="22" height="2" rx="1" fill="black"/>
				<rect y="12" width="22" height="2" rx="1" fill="black"/>
			</svg>
        </button>
        <a href="index.html" class="navbar-brand"><img src="{{ '/img/logos/logo-portaal.svg' | path }}" alt="logo"></a>        
        <div class="component navigation navigation-title navbar-nav flex-column js-navigation">
        	<div class="component-content">
            	<nav>
					<ul class="clearfix">
						{% set cls = cycler("odd", "even") %}
						{% set cit = cycler("0", "1", "2", "3", "4", "5", "6", "7", "8") %}
							{% if default_menu %}
								{% set items = menu_items[default_menu] %}
							{% else %}
								{% set items = menu_items %}
							{% endif %}
							{% for item in items %}
							<li class="level1 {% if item.sub_menu_items %}submenu {% endif %}item{{ cit.next() }} {{ cls.next() }}{% if loop.first %} first{% endif %} rel-level1">
								<div class="navigation-title field-navigationtitle">
									<a class="{% if item.active %}-active{% endif %}" title="{{item.title}}" href="{{item.link}}">{{item.title}}</a>
								</div>
								{% if item.sub_menu_items %}
									{% set subcls = cycler("odd", "even") %}
									{% set subcit = cycler("0", "1", "2", "3", "4", "5", "6", "7", "8") %}
									<ul class="clearfix">
									{% for subitem in item.sub_menu_items %}
										<li class="level2 item{{ subcit.next() }} {{ subcls.next() }}{% if loop.first %} first{% endif %} rel-level2">
											<div class="navigation-title field-navigationtitle">
												<a title="{{subitem.title}}" href="{{subitem.link}}">{{subitem.title}}</a>
											</div>
										</li>
									{% endfor %}
									</ul>
								{% endif %}
							</li>
						{% endfor %}
					</ul>
				</nav>
			</div>
		</div>
    </nav>
</div>
 
{
  "default_menu": "zakelijk",
  "menu_items": {
    "zakelijk": [
      {
        "title": "Overzicht",
        "link": "/",
        "active": true
      },
      {
        "title": "Bestellingen",
        "link": "/"
      },
      {
        "title": "Woningen",
        "link": "/"
      },
      {
        "title": "Bewoners",
        "link": "/"
      }
    ],
    "particulier": [
      {
        "title": "Dashboard",
        "link": "/"
      }
    ]
  }
}

No notes defined.