DSO Component Library

# Dropdown Button: Dropdown Open

Ready

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

`

    <div class="dropdown open">
        <button type="button" class="btn btn-default dropdown-toggle" id="actie_open" aria-haspopup="true" aria-expanded="true">
        Actie
      </button>
        <ul class="dropdown-menu" aria-labelledby="actie_open">
            <li>
                <a href="#">Actie</a>
            </li>
            <li>
                <a href="#">Andere actie</a>
            </li>
            <li>
                <a href="#">Nog iets anders hier</a>
            </li>
            <li role="separator" class="divider"></li>
            <li>
                <a href="#">Gescheiden link</a>
            </li>
        </ul>
    </div>

`
`

    <div class="dropdown{{#if open }} open{{/if}}">
      <button type="button" class="btn btn-default dropdown-toggle" id="{{ id }}" aria-haspopup="true" aria-expanded="{{#if open }}true{{else}}false{{/if}}">
        {{ label }}
      </button>
      {{#if open }}
        <ul class="dropdown-menu" aria-labelledby="{{ id }}">
          {{#each items }}
            {{#unless @first }}
              <li role="separator" class="divider"></li>
            {{/unless}}
            {{#each this }}
              <li>
                <a href="#">{{ this }}</a>
              </li>
            {{/each}}
          {{/each}}
        </ul>
      {{/if}}
    </div>

`
`

    id: actie_open
    open: true
    label: Actie
    items:
      - - Actie
        - Andere actie
        - Nog iets anders hier
      - - Gescheiden link

`

- Handle: @dropdown-button--dropdown-open
- Variants (2): Dropdown , Dropdown Open
- Preview:
  - With layout
  - Component only
- Filesystem Path: components\03-forms\10-misc\dropdown-button\dropdown-button.hbs

Toont een dropdown met daarin een gevulde uitklapper. Gebaseerd op de Bootstrap “Dropdowns” component

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

`<button type="button" class="btn btn-default dropdown-toggle" id="actie" aria-haspopup="true" aria-expanded="false"> Actie </button>`

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

Check that the title element describes the document.

`<title>Dropdown Button`

### 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="#">Actie</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="btn btn-default dropdown-toggle" id="actie" aria-haspopup="true" aria-expanded="false"> Actie </button>`