DSO Component Library

# Navigations: Subnavigation

WIP

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

`

    <ul class="dso-nav dso-nav-sub">
        <li class="dso-active">
            <a href="#">
            Deze locatie
          </a>
        </li>
        <li>
            <a href="#">
            Regels
          </a>
        </li>
        <li>
            <a href="#">
            Overige informatie
          </a>
        </li>
    </ul>

`
`

    <ul class="dso-nav dso-nav-{{ modifier }}">
      {{#each items }}
        <li {{#if active }}class="dso-active"{{/if}}>
          <a href="#">
            {{ label }}
          </a>
        </li>
      {{/each}}
    </ul>

`
`

    __title: Subnavigatie
    modifier: sub
    items:
      - label: Deze locatie
        active: true
      - label: Regels
      - label: Overige informatie

`

- Handle: @navs--subnavigation
- Variants (2): Tabs , Subnavigation
- Preview:
  - With layout
  - Component only
- Filesystem Path: components\05-navigation\navs\navs.hbs

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.

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

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

Check that the title element describes the document.

`<title>Navigations`

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