<dso-dropdown-menu>
<button type="button" id="actie" aria-haspopup="true" aria-expanded="false" slot="toggle" class="btn btn-link"><span>Actie</span></button>
<div class="dso-dropdown-options">
<h2 class="dso-group-label">Versies</h2>
<ul aria-labelledby="actie">
<li class="dso-checked">
<a href="#">10.6.0</a>
</li>
<li>
<a href="#">10.5.0</a>
</li>
<li>
<a href="#">10.4.0</a>
</li>
</ul>
<ul aria-labelledby="actie">
<li>
<a href="#">master</a>
</li>
</ul>
<h2 class="dso-group-label">Branch releases</h2>
<ul aria-labelledby="actie">
<li>
<a href="#">#500-Margins-Testbuilds</a>
</li>
<li>
<a href="#">#611-Pager-component-uitbreiden</a>
</li>
<li>
<a href="#">#663-Dropdown-button-toegankelijk-maken</a>
</li>
</ul>
</div>
</dso-dropdown-menu>
<dso-dropdown-menu checkable>
<button type="button" id="dropdown_default_button_open_checkable" aria-haspopup="true" aria-expanded="false" slot="toggle" class="btn btn-default"><span>Actie</span></button>
<div class="dso-dropdown-options">
<h2 class="dso-group-label">Versies</h2>
<ul aria-labelledby="dropdown_default_button_open_checkable">
<li class="dso-checked">
<a href="#">10.6.0</a>
</li>
<li>
<a href="#">10.5.0</a>
</li>
<li>
<a href="#">10.4.0</a>
</li>
</ul>
<ul aria-labelledby="dropdown_default_button_open_checkable">
<li>
<a href="#">master</a>
</li>
</ul>
<h2 class="dso-group-label">Branch releases</h2>
<ul aria-labelledby="dropdown_default_button_open_checkable">
<li>
<a href="#">#500-Margins-Testbuilds</a>
</li>
<li>
<a href="#">#611-Pager-component-uitbreiden</a>
</li>
<li>
<a href="#">#663-Dropdown-button-toegankelijk-maken</a>
</li>
</ul>
</div>
</dso-dropdown-menu>
<dso-dropdown-menu checkable>
<button type="button" id="dropdown_primary_button_open_checkable" aria-haspopup="true" aria-expanded="false" slot="toggle" class="btn btn-primary"><span>Actie</span></button>
<div class="dso-dropdown-options">
<h2 class="dso-group-label">Versies</h2>
<ul aria-labelledby="dropdown_primary_button_open_checkable">
<li class="dso-checked">
<a href="#">10.6.0</a>
</li>
<li>
<a href="#">10.5.0</a>
</li>
<li>
<a href="#">10.4.0</a>
</li>
</ul>
<ul aria-labelledby="dropdown_primary_button_open_checkable">
<li>
<a href="#">master</a>
</li>
</ul>
<h2 class="dso-group-label">Branch releases</h2>
<ul aria-labelledby="dropdown_primary_button_open_checkable">
<li>
<a href="#">#500-Margins-Testbuilds</a>
</li>
<li>
<a href="#">#611-Pager-component-uitbreiden</a>
</li>
<li>
<a href="#">#663-Dropdown-button-toegankelijk-maken</a>
</li>
</ul>
</div>
</dso-dropdown-menu>
<dso-dropdown-menu dropdown-align="right" checkable>
<button type="button" id="dropdown_link_button_align_right" aria-haspopup="true" aria-expanded="false" slot="toggle" class="btn btn-link"><span>Actie</span></button>
<div class="dso-dropdown-options">
<h2 class="dso-group-label">Versies</h2>
<ul aria-labelledby="dropdown_link_button_align_right">
<li class="dso-checked">
<a href="#">10.6.0</a>
</li>
<li>
<a href="#">10.5.0</a>
</li>
<li>
<a href="#">10.4.0</a>
</li>
</ul>
<ul aria-labelledby="dropdown_link_button_align_right">
<li>
<a href="#">master</a>
</li>
</ul>
<h2 class="dso-group-label">Branch releases</h2>
<ul aria-labelledby="dropdown_link_button_align_right">
<li>
<a href="#">#500-Margins-Testbuilds</a>
</li>
<li>
<a href="#">#611-Pager-component-uitbreiden</a>
</li>
<li>
<a href="#">#663-Dropdown-button-toegankelijk-maken</a>
</li>
</ul>
</div>
</dso-dropdown-menu>
<dso-dropdown-menu dropdown-align="right" checkable>
<button type="button" id="dropdown_default_button_align_right" aria-haspopup="true" aria-expanded="false" slot="toggle" class="btn btn-default"><span>Actie</span></button>
<div class="dso-dropdown-options">
<h2 class="dso-group-label">Versies</h2>
<ul aria-labelledby="dropdown_default_button_align_right">
<li class="dso-checked">
<a href="#">10.6.0</a>
</li>
<li>
<a href="#">10.5.0</a>
</li>
<li>
<a href="#">10.4.0</a>
</li>
</ul>
<ul aria-labelledby="dropdown_default_button_align_right">
<li>
<a href="#">master</a>
</li>
</ul>
<h2 class="dso-group-label">Branch releases</h2>
<ul aria-labelledby="dropdown_default_button_align_right">
<li>
<a href="#">#500-Margins-Testbuilds</a>
</li>
<li>
<a href="#">#611-Pager-component-uitbreiden</a>
</li>
<li>
<a href="#">#663-Dropdown-button-toegankelijk-maken</a>
</li>
</ul>
</div>
</dso-dropdown-menu>
<dso-dropdown-menu dropdown-align="right" checkable>
<button type="button" id="dropdown_primary_button_align_right" aria-haspopup="true" aria-expanded="false" slot="toggle" class="btn btn-primary"><span>Actie</span></button>
<div class="dso-dropdown-options">
<h2 class="dso-group-label">Versies</h2>
<ul aria-labelledby="dropdown_primary_button_align_right">
<li class="dso-checked">
<a href="#">10.6.0</a>
</li>
<li>
<a href="#">10.5.0</a>
</li>
<li>
<a href="#">10.4.0</a>
</li>
</ul>
<ul aria-labelledby="dropdown_primary_button_align_right">
<li>
<a href="#">master</a>
</li>
</ul>
<h2 class="dso-group-label">Branch releases</h2>
<ul aria-labelledby="dropdown_primary_button_align_right">
<li>
<a href="#">#500-Margins-Testbuilds</a>
</li>
<li>
<a href="#">#611-Pager-component-uitbreiden</a>
</li>
<li>
<a href="#">#663-Dropdown-button-toegankelijk-maken</a>
</li>
</ul>
</div>
</dso-dropdown-menu>
<button type="button" id="actie" aria-haspopup="true" aria-expanded="false" slot="toggle" class="btn btn-link">
<span>Actie</span>
</button>
<div hidden="">
<div class="dso-dropdown-options">
<h2 class="dso-group-label">Versies</h2>
<ul aria-labelledby="actie">
<li class="dso-checked"><a href="#">10.6.0</a></li>
<li><a href="#">10.5.0</a></li>
<li><a href="#">10.4.0</a></li>
</ul>
<ul aria-labelledby="actie">
<li><a href="#">master</a></li>
</ul>
<h2 class="dso-group-label">Branch releases</h2>
<ul aria-labelledby="actie">
<li><a href="#">#500-Margins-Testbuilds</a></li>
<li><a href="#">#611-Pager-component-uitbreiden</a></li>
<li><a href="#">#663-Dropdown-button-toegankelijk-maken</a></li>
</ul>
</div>
</div>
<button
type="button"
id="dropdown_default_button_open_checkable"
aria-haspopup="true"
aria-expanded="false"
slot="toggle"
class="btn btn-default"
>
<span>Actie</span>
</button>
<div hidden="">
<div class="dso-dropdown-options">
<h2 class="dso-group-label">Versies</h2>
<ul aria-labelledby="dropdown_default_button_open_checkable">
<li class="dso-checked"><a href="#">10.6.0</a></li>
<li><a href="#">10.5.0</a></li>
<li><a href="#">10.4.0</a></li>
</ul>
<ul aria-labelledby="dropdown_default_button_open_checkable">
<li><a href="#">master</a></li>
</ul>
<h2 class="dso-group-label">Branch releases</h2>
<ul aria-labelledby="dropdown_default_button_open_checkable">
<li><a href="#">#500-Margins-Testbuilds</a></li>
<li><a href="#">#611-Pager-component-uitbreiden</a></li>
<li><a href="#">#663-Dropdown-button-toegankelijk-maken</a></li>
</ul>
</div>
</div>
<button
type="button"
id="dropdown_primary_button_open_checkable"
aria-haspopup="true"
aria-expanded="false"
slot="toggle"
class="btn btn-primary"
>
<span>Actie</span>
</button>
<div hidden="">
<div class="dso-dropdown-options">
<h2 class="dso-group-label">Versies</h2>
<ul aria-labelledby="dropdown_primary_button_open_checkable">
<li class="dso-checked"><a href="#">10.6.0</a></li>
<li><a href="#">10.5.0</a></li>
<li><a href="#">10.4.0</a></li>
</ul>
<ul aria-labelledby="dropdown_primary_button_open_checkable">
<li><a href="#">master</a></li>
</ul>
<h2 class="dso-group-label">Branch releases</h2>
<ul aria-labelledby="dropdown_primary_button_open_checkable">
<li><a href="#">#500-Margins-Testbuilds</a></li>
<li><a href="#">#611-Pager-component-uitbreiden</a></li>
<li><a href="#">#663-Dropdown-button-toegankelijk-maken</a></li>
</ul>
</div>
</div>
<button
type="button"
id="dropdown_link_button_align_right"
aria-haspopup="true"
aria-expanded="false"
slot="toggle"
class="btn btn-link"
>
<span>Actie</span>
</button>
<div hidden="">
<div class="dso-dropdown-options">
<h2 class="dso-group-label">Versies</h2>
<ul aria-labelledby="dropdown_link_button_align_right">
<li class="dso-checked"><a href="#">10.6.0</a></li>
<li><a href="#">10.5.0</a></li>
<li><a href="#">10.4.0</a></li>
</ul>
<ul aria-labelledby="dropdown_link_button_align_right">
<li><a href="#">master</a></li>
</ul>
<h2 class="dso-group-label">Branch releases</h2>
<ul aria-labelledby="dropdown_link_button_align_right">
<li><a href="#">#500-Margins-Testbuilds</a></li>
<li><a href="#">#611-Pager-component-uitbreiden</a></li>
<li><a href="#">#663-Dropdown-button-toegankelijk-maken</a></li>
</ul>
</div>
</div>
<button
type="button"
id="dropdown_default_button_align_right"
aria-haspopup="true"
aria-expanded="false"
slot="toggle"
class="btn btn-default"
>
<span>Actie</span>
</button>
<div hidden="">
<div class="dso-dropdown-options">
<h2 class="dso-group-label">Versies</h2>
<ul aria-labelledby="dropdown_default_button_align_right">
<li class="dso-checked"><a href="#">10.6.0</a></li>
<li><a href="#">10.5.0</a></li>
<li><a href="#">10.4.0</a></li>
</ul>
<ul aria-labelledby="dropdown_default_button_align_right">
<li><a href="#">master</a></li>
</ul>
<h2 class="dso-group-label">Branch releases</h2>
<ul aria-labelledby="dropdown_default_button_align_right">
<li><a href="#">#500-Margins-Testbuilds</a></li>
<li><a href="#">#611-Pager-component-uitbreiden</a></li>
<li><a href="#">#663-Dropdown-button-toegankelijk-maken</a></li>
</ul>
</div>
</div>
<button
type="button"
id="dropdown_primary_button_align_right"
aria-haspopup="true"
aria-expanded="false"
slot="toggle"
class="btn btn-primary"
>
<span>Actie</span>
</button>
<div hidden="">
<div class="dso-dropdown-options">
<h2 class="dso-group-label">Versies</h2>
<ul aria-labelledby="dropdown_primary_button_align_right">
<li class="dso-checked"><a href="#">10.6.0</a></li>
<li><a href="#">10.5.0</a></li>
<li><a href="#">10.4.0</a></li>
</ul>
<ul aria-labelledby="dropdown_primary_button_align_right">
<li><a href="#">master</a></li>
</ul>
<h2 class="dso-group-label">Branch releases</h2>
<ul aria-labelledby="dropdown_primary_button_align_right">
<li><a href="#">#500-Margins-Testbuilds</a></li>
<li><a href="#">#611-Pager-component-uitbreiden</a></li>
<li><a href="#">#663-Dropdown-button-toegankelijk-maken</a></li>
</ul>
</div>
</div>
<dso-dropdown-menu {{ attributes([align, 'dropdown-align', align], [isCheckable, 'checkable']) }}>
{% render '@button', {type: 'button', modifier: modifier, label: label, id: id, icon: icon, iconAfter: iconAfter, ariaHasPopup: ariaHasPopup, ariaExpanded: not not open, slot: 'toggle'} %}
<div class="dso-dropdown-options">
{% for group in groups %}
{% if group.label %}
<h2 class="dso-group-label">{{ group.label }}</h2>
{% endif %}
<ul aria-labelledby="{{ id }}">
{% for item in group.items %}
<li {{ className([item.checked, 'dso-checked']) }}>
<a href="#">{{ item.label }}</a>
</li>
{% endfor %}
</ul>
{% endfor %}
</div>
</dso-dropdown-menu>
id: actie
modifier: link
ariaHasPopup: true
label: Actie
groups:
- label: Versies
items:
- label: 10.6.0
checked: true
- label: 10.5.0
- label: 10.4.0
- items:
- label: master
- label: Branch releases
items:
- label: '#500-Margins-Testbuilds'
- label: '#611-Pager-component-uitbreiden'
- label: '#663-Dropdown-button-toegankelijk-maken'
id: dropdown_default_button_open_checkable
modifier: default
ariaHasPopup: true
label: Actie
groups:
- label: Versies
items:
- label: 10.6.0
checked: true
- label: 10.5.0
- label: 10.4.0
- items:
- label: master
- label: Branch releases
items:
- label: '#500-Margins-Testbuilds'
- label: '#611-Pager-component-uitbreiden'
- label: '#663-Dropdown-button-toegankelijk-maken'
modifiers: dso-checkable
isCheckable: true
id: dropdown_primary_button_open_checkable
modifier: primary
ariaHasPopup: true
label: Actie
groups:
- label: Versies
items:
- label: 10.6.0
checked: true
- label: 10.5.0
- label: 10.4.0
- items:
- label: master
- label: Branch releases
items:
- label: '#500-Margins-Testbuilds'
- label: '#611-Pager-component-uitbreiden'
- label: '#663-Dropdown-button-toegankelijk-maken'
modifiers: dso-checkable
isCheckable: true
id: dropdown_link_button_align_right
modifier: link
ariaHasPopup: true
label: Actie
groups:
- label: Versies
items:
- label: 10.6.0
checked: true
- label: 10.5.0
- label: 10.4.0
- items:
- label: master
- label: Branch releases
items:
- label: '#500-Margins-Testbuilds'
- label: '#611-Pager-component-uitbreiden'
- label: '#663-Dropdown-button-toegankelijk-maken'
align: right
modifiers: dso-checkable
isCheckable: true
id: dropdown_default_button_align_right
modifier: default
ariaHasPopup: true
label: Actie
groups:
- label: Versies
items:
- label: 10.6.0
checked: true
- label: 10.5.0
- label: 10.4.0
- items:
- label: master
- label: Branch releases
items:
- label: '#500-Margins-Testbuilds'
- label: '#611-Pager-component-uitbreiden'
- label: '#663-Dropdown-button-toegankelijk-maken'
align: right
modifiers: dso-checkable
isCheckable: true
id: dropdown_primary_button_align_right
modifier: primary
ariaHasPopup: true
label: Actie
groups:
- label: Versies
items:
- label: 10.6.0
checked: true
- label: 10.5.0
- label: 10.4.0
- items:
- label: master
- label: Branch releases
items:
- label: '#500-Margins-Testbuilds'
- label: '#611-Pager-component-uitbreiden'
- label: '#663-Dropdown-button-toegankelijk-maken'
align: right
modifiers: dso-checkable
isCheckable: true