DSO Component Library

# Menu

Ready

- HTML
- View
- Context
- Info
- Notes
- WCAG

`

    <!-- 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

`

- Handle: @menu
- Variants (2): Default , Open Menu
- Preview:
  - With layout
  - Component only
- Filesystem Path: components\05-navigation\menu\menu.hbs
- References (2): @icon, @navs
- Referenced by (2): @full-width, @header

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>`