DSO Component Library

Menu: 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>
 
__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

WARNING: WCAG2AA.Principle1.Guideline1_4.1_4_3.G18.BgImage

This element's text is placed on a background image. Ensure the contrast ratio between the text and all covered parts of the image are at least 4.5:1.

<label for="state-switch">Open/sluit</label>

NOTICE: WCAG2AA.Principle2.Guideline2_4.2_4_2.H25.2

Check that the title element describes the document.

<title>Menu

NOTICE: WCAG2AA.Principle2.Guideline2_4.2_4_4.H77,H78,H79,H80,H81

Check that the link text combined with programmatically determined link context identifies the purpose of the link.

<a href="#"> Home </a>

NOTICE: WCAG2AA.Principle3.Guideline3_2.3_2_1.G107

Check that a change of context does not occur when this input field receives focus.

<input type="checkbox" id="state-switch">