DSO Component Library

Split Button Dropdown 

<!-- Default -->
<div class="btn-group ">
    <button type="button" class="btn btn-default">Actie</button>
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="caret"></span>
    <span class="sr-only">Toggle Dropdown</span>
  </button>
    <ul class="dropdown-menu">
        <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>


<!-- Buttongrouplarge -->
<div class="btn-group btn-group-lg">
    <button type="button" class="btn btn-default">Actie</button>
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="caret"></span>
    <span class="sr-only">Toggle Dropdown</span>
  </button>
    <ul class="dropdown-menu">
        <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>


<!-- Buttongroupsmall -->
<div class="btn-group btn-group-sm">
    <button type="button" class="btn btn-default">Actie</button>
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="caret"></span>
    <span class="sr-only">Toggle Dropdown</span>
  </button>
    <ul class="dropdown-menu">
        <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>


<!-- Buttongroupextrasmall -->
<div class="btn-group btn-group-xs">
    <button type="button" class="btn btn-default">Actie</button>
    <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="caret"></span>
    <span class="sr-only">Toggle Dropdown</span>
  </button>
    <ul class="dropdown-menu">
        <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="btn-group {{ sizing }}">
  <button type="button" class="btn {{ modifier }}">{{ button-label }}</button>
  <button type="button" class="btn {{ modifier }} dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <span class="caret"></span>
    <span class="sr-only">{{ dropdown-label }}</span>
  </button>
  <ul class="dropdown-menu">
    {{#each items }}
      {{#unless @first }}
        <li role="separator" class="divider"></li>
      {{/unless}}
      {{#each this }}
        <li>
          <a href="#">{{ this }}</a>
        </li>
      {{/each}}
    {{/each}}
  </ul>
</div>
 
/* Default */
button-label: Actie
modifier: btn-default
dropdown-label: Toggle Dropdown
items:
  - - Actie
    - Andere actie
    - Nog iets anders hier
  - - Gescheiden link



/* Buttongrouplarge */
button-label: Actie
modifier: btn-default
dropdown-label: Toggle Dropdown
items:
  - - Actie
    - Andere actie
    - Nog iets anders hier
  - - Gescheiden link
sizing: btn-group-lg



/* Buttongroupsmall */
button-label: Actie
modifier: btn-default
dropdown-label: Toggle Dropdown
items:
  - - Actie
    - Andere actie
    - Nog iets anders hier
  - - Gescheiden link
sizing: btn-group-sm



/* Buttongroupextrasmall */
button-label: Actie
modifier: btn-default
dropdown-label: Toggle Dropdown
items:
  - - Actie
    - Andere actie
    - Nog iets anders hier
  - - Gescheiden link
sizing: btn-group-xs

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.

<button type="button" class="btn btn-default">Actie</button>

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

Check that the title element describes the document.

<title>Split Button Dropdown

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">Actie</button>