DSO Component Library

Menu 

<!-- Default -->
<nav class="dso-navbar dso-menu">
    <div class="dso-navbar-header">
        <button type="button" class="dso-navbar-toggle" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
      <span class="fa fa-bars" aria-hidden="true"></span>
      <span class="sr-only">Ga naar menu</span>
    </button>
    </div>
    <div class="dso-navbar-collapse dso-collapse">
        <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>

    </div>
</nav>


<!-- Open Menu -->
<nav class="dso-navbar dso-menu">
    <div class="dso-navbar-header">
        <button type="button" class="dso-navbar-toggle" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
      <span class="fa fa-bars" aria-hidden="true"></span>
      <span class="sr-only">Ga naar menu</span>
    </button>
    </div>
    <div class="dso-navbar-collapse">
        <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>

    </div>
</nav>


<nav class="dso-navbar dso-menu">
  <div class="dso-navbar-header">
    <button type="button" class="dso-navbar-toggle" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
      {{> '@icon' icon='fa fa-bars' }}
      <span class="sr-only">Ga naar menu</span>
    </button>
  </div>
  <div class="dso-navbar-collapse{{#if collapsed}} dso-collapse{{/if}}">
    {{render '@navs' modifier="main" }}
  </div>
</nav>
 
/* Default */
__title: Menu ingeklapt
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 Menu */
__title: Menu uitgeklapt
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

There are no notes for this item.

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.

<span class="sr-only">Ga naar menu</span>

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.

<button type="button" class="dso-navbar-toggle" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"> <span class="fa fa-bars" aria-hidden="true"></span> <span class="sr-only">Ga naar menu</span> </button>