DSO Toolkit | Component Library

Menu: Default 

<nav class="dso-navbar">
    <div class="dso-navbar-header">
        <button type="button" class="dso-navbar-toggle">
            <svg class="di di-bars">
                <use href="../../dso-icons.svg#bars" />
            </svg> <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="#">
                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{{#if open}} dso-open{{/if}}">
  <div class="dso-navbar-header">
    <button type="button" class="dso-navbar-toggle">
      {{> '@icon' icon='bars' }}
      <span class="sr-only">Ga naar menu</span>
    </button>
  </div>
  {{> '@navs' }}
</nav>
 
__title: 'Example: open/close'
__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

Openen van het hamburger menu gaat door .dso-open naast .dso-nav-bar te zetten