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>
 
<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>
 
button-label: Actie
modifier: btn-default
dropdown-label: Toggle Dropdown
items:
  - - Actie
    - Andere actie
    - Nog iets anders hier
  - - Gescheiden link

There are no notes for this item.