DSO Component Library

Dropdown Button 

<div class="dropdown">
    <button class="btn btn-primary dropdown-toggle" type="button" id="actie" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Actie
    <span class="caret"></span>
  </button>
    <ul class="dropdown-menu" aria-labelledby="actie">
        <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">
  <button class="btn btn-primary dropdown-toggle" type="button" id="{{ id }}" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    {{ label }}
    <span class="caret"></span>
  </button>
  <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>
</div>
 
id: actie
label: Actie
items:
  - - Actie
    - Andere actie
    - Nog iets anders hier
  - - Gescheiden link
  • Handle: @dropdown-button
  • Preview:
  • 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 class="btn btn-primary dropdown-toggle" type="button" id="actie" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Actie <span class="caret"></span> </button>

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

Check that the title element describes the document.

<title>Default

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 class="btn btn-primary dropdown-toggle" type="button" id="actie" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Actie <span class="caret"></span> </button>