<nav class="dso-navbar">
<div class="dso-navbar-header">
<button type="button" class="dso-navbar-toggle btn btn-default" aria-expanded="false">
<dso-icon icon="bars"></dso-icon>
<span class="sr-only">Menu</span>
</button>
</div>
<ul class="dso-nav dso-nav-main">
<li class="dso-active">
<a href="#" aria-current="page">
Home
</a>
</li>
<li>
<a href="#">
Vergunningcheck
</a>
</li>
<li>
<a href="#">
Aanvragen
</a>
</li>
<li>
<a href="#">
Regels op de kaart
</a>
</li>
<li>
<a href="#">
Mijn Omgevingsloket
</a>
</li>
</ul>
</nav>
<nav class="dso-navbar">
<ul class="dso-nav dso-nav-sub">
<li class="dso-active">
<a href="#" aria-current="page">
Deze locatie
</a>
</li>
<li>
<a href="#">
Regels
</a>
</li>
<li>
<a href="#">
Overige informatie
</a>
</li>
</ul>
</nav>
<nav {{ className('dso-navbar', [open, 'dso-open']) }}>
{% if modifier === 'main' %}
<div class="dso-navbar-header">
<button type="button" class="dso-navbar-toggle btn btn-default" {{ attributes([open, 'aria-expanded', not(not(open)), true]) }}>
<dso-icon icon="bars"></dso-icon>
<span class="sr-only">Menu</span>
</button>
</div>
{% endif %}
<ul {{ className('dso-nav', 'dso-nav-' + modifier) }}>
{%- for item in items %}
<li {{ className([item.active, 'dso-active']) }}>
<a href="#" {{ attributes([item.active, 'aria-current="page"']) }}>
{{ item.label }}
</a>
</li>
{%- endfor -%}
</ul>
</nav>
__title: Primary
__explanation: Verklein de viewport en gebruik de checkbox om het responsive gedrag te zien
__switches:
- name: state
label: Open/sluit
modifier: main
items:
- label: Home
active: true
- label: Vergunningcheck
- label: Aanvragen
- label: Regels op de kaart
- label: Mijn Omgevingsloket
collapsed: true
__title: Secondary
__explanation: null
__switches: null
modifier: sub
items:
- label: Deze locatie
active: true
- label: Regels
- label: Overige informatie
collapsed: true