Toevoeging van de class class .dso-open op de .dso-navbar opent het mobiele navigatiemenu. Dit dient scriptend te gebeuren.
.dso-open
.dso-navbar
<header> <div class="dso-logo-bar"> <img src="../../images/omgevingsloket.png" alt="Omgevingsloket" class="logo" /> <div class="dso-tools-bar"> <div class="dso-login"> <a href="" class="dso-tertiary"><dso-icon icon="user"></dso-icon><span>Inloggen</span></a> </div> </div> </div> <nav class="dso-navbar"> <div class="dso-navbar-header"> <button type="button" class="dso-navbar-toggle dso-secondary" 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> <a href="#"> Home </a> </li> <li> <a href="#"> Vergunningcheck </a> </li> <li> <a href="#"> Aanvragen </a> </li> <li class="dso-active"> <a href="#" aria-current="page"> Regels op de kaart </a> </li> <li> <a href="#"> Mijn Omgevingsloket </a> </li> </ul> </nav> <nav aria-label="U bevindt zich hier:"> <ol class="breadcrumb" itemscope itemtype="https://schema.org/BreadcrumbList"> <li itemscope="" itemprop="itemListElement" itemtype="https://schema.org/ListItem"> <a itemprop="item" href="#"> <span itemprop="name">Home</span> </a> <meta itemprop="position" content="1" /> </li> <li class="active" aria-current="page" itemscope="" itemprop="itemListElement" itemtype="https://schema.org/ListItem"> <span itemprop="name">Checken</span> <meta itemprop="position" content="2" /> </li> </ol> </nav> </header>
<header> <div class="dso-logo-bar"> <img src="../../images/omgevingsloket.png" alt="Omgevingsloket" class="logo" /> <div class="dso-tools-bar"> <div class="dso-login"> {% render '@anchor', {label:'Inloggen', modifier:'dso-tertiary', icon:'user'} -%} </div> </div> </div> {% render '@navigations', menu -%} {% render '@breadcrumbs', breadcrumbs -%} </header>
menu: modifier: main items: - label: Home - label: Vergunningcheck - label: Aanvragen - label: Regels op de kaart active: true - label: Mijn Omgevingsloket collapsed: false breadcrumbs: crumbs: - label: Home url: '#' - label: Checken url: '#'