<!-- Default -->
<nav class="dso-navbar">
<div class="dso-navbar-header">
<button type="button" class="dso-navbar-toggle">
<span class="fas fa-bars" aria-hidden="true"></span>
<span class="sr-only">Ga naar menu</span>
</button>
</div>
<ul class="dso-nav dso-nav-main">
<li class="dso-active">
<a href="#">
Home
</a>
</li>
<li>
<a href="#">
Actueel
</a>
</li>
<li>
<a href="#">
Kalender
</a>
</li>
<li>
<a href="#">
Zelf aan de slag
</a>
</li>
<li>
<a href="#">
Documenten
</a>
</li>
<li>
<a href="#">
Over ons
</a>
</li>
<li>
<a href="#">
Wetgeving
</a>
</li>
</ul>
</nav>
<!-- Open -->
<nav class="dso-navbar">
<div class="dso-navbar-header">
<button type="button" class="dso-navbar-toggle">
<span class="fas fa-bars" aria-hidden="true"></span>
<span class="sr-only">Ga naar menu</span>
</button>
</div>
<ul class="dso-nav dso-nav-main">
<li class="dso-active">
<a href="#">
Home
</a>
</li>
<li>
<a href="#">
Actueel
</a>
</li>
<li>
<a href="#">
Kalender
</a>
</li>
<li>
<a href="#">
Zelf aan de slag
</a>
</li>
<li>
<a href="#">
Documenten
</a>
</li>
<li>
<a href="#">
Over ons
</a>
</li>
<li>
<a href="#">
Wetgeving
</a>
</li>
</ul>
</nav>
<nav class="dso-navbar{{#if open}} dso-open{{/if}}">
<div class="dso-navbar-header">
<button type="button" class="dso-navbar-toggle">
{{> '@icon' icon='fas fa-bars' }}
<span class="sr-only">Ga naar menu</span>
</button>
</div>
{{render '@navs' modifier="main" }}
</nav>
/* Default */
__title: 'Example: open/close'
__explanation: Verklein de viewport en gebruik de checkbox om het responsive gedrag te zien
__switches:
- name: state
label: Open/sluit
menuItems:
- label: Home
active: true
- label: Actueel
- label: Kalender
- label: Zelf aan de slag
- label: Documenten
- label: Over ons
count: 12
- label: Wetgeving
collapsed: true
/* Open */
__title: Menu open
__explanation: Verklein de viewport om het responsive menu open te zien
__switches: null
menuItems:
- label: Home
active: true
- label: Actueel
- label: Kalender
- label: Zelf aan de slag
- label: Documenten
- label: Over ons
count: 12
- label: Wetgeving
collapsed: null
Openen van het hamburger menu gaat door .dso-open
naast .dso-nav-bar
te zetten