DSO Toolkit homepage

Dropdown Menu (CSS Component)

Component preview opent in nieuw tabblad

Implementatie

Het openen en sluiten van de dropdown button moet worden ondersteund met muis-, touch- en toetsenbordbediening. De scripting zal zelf geïmplementeerd moeten worden, waarbij het te programmeren gedrag op de diverse relevante toetsen gelijk moet zijn aan de native browser dropdown/select werkvorm (en het Web Component). Inspiratie: Bootstrap dropdown

  • event.code ArrowUp : omhoog, vorige ‘option’, zelfde als tab
  • event.code ArrowDown : omlaag, volgende ‘option’, zelfde als shift-tab
  • event.code Escape : sluit dropdown, geen keuze maken
  • event.code Space : maak keuze

Voorschriften/algemeen

  • .dso-dropdown-menu is de root van het component, dat bestaat uit een button en het daadwerkelijke menu, de .dso-dropdown-options;
  • .dso-dropdown-options wordt getoond wanneer .dso-dropdown-menu de class dso-open heeft;
  • button heeft attribute aria-haspopup="true" om aan te duiden dat deze een menu bedient, en moet een id hebben waarnaar verwezen wordt vanuit de <ul>s in de optielijst met een aria-labelledby-attribuut
  • .dso-dropdown-menu geen class dso-open
  • button attribute aria-expanded="false"
<div class="dso-dropdown-menu">
  <button type="button" aria-haspopup="true" aria-expanded="false" class="dso-tertiary">
  <div class="dso-dropdown-options">
</div>
  • div.dropdown heeft class dso-open
  • button attribute aria-expanded="true"
<div class="dso-dropdown-menu dso-open">
  <button type="button" aria-haspopup="true" aria-expanded="true" class="dso-tertiary">
  <div class="dso-dropdown-options">
</div>

Note: de button mag class dso-tertiary, dso-secondary of btn-primary hebben, afhankelijk van de toepassing. Ook de oude bootstrap classes btn-default, btn-link worden nog ondersteund. 

<!-- Dropdown Link -->
<div class="dso-dropdown-menu">
    <button type="button" id="actie" aria-haspopup="true" aria-expanded="false" class="btn btn-link"><span>Actie</span></button>

</div>
<!-- Dropdown Link Open -->
<div class="dso-dropdown-menu dso-open">
    <button type="button" id="dropdown-link-open" aria-haspopup="true" aria-expanded="true" 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-open">

            <li>
                <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-open">

            <li>
                <a href="#">master</a>
            </li>

        </ul>

        <h2 class="dso-group-label">Branch releases</h2>

        <ul aria-labelledby="dropdown-link-open">

            <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>
<!-- Dropdown Link Open Selectable -->
<div class="dso-dropdown-menu dso-open dso-checkable">
    <button type="button" id="dropdown-link-open-selectable" aria-haspopup="true" aria-expanded="true" 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-open-selectable">

            <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-open-selectable">

            <li>
                <a href="#">master</a>
            </li>

        </ul>

        <h2 class="dso-group-label">Branch releases</h2>

        <ul aria-labelledby="dropdown-link-open-selectable">

            <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>
<!-- Dropdown Default Button -->
<div class="dso-dropdown-menu">
    <button type="button" id="dropdown_default_button" aria-haspopup="true" aria-expanded="false" class="btn btn-default"><span>Actie</span></button>

</div>
<!-- Dropdown Default Button Open -->
<div class="dso-dropdown-menu dso-open">
    <button type="button" id="dropdown_default_button_open" aria-haspopup="true" aria-expanded="true" 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">

            <li>
                <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">

            <li>
                <a href="#">master</a>
            </li>

        </ul>

        <h2 class="dso-group-label">Branch releases</h2>

        <ul aria-labelledby="dropdown_default_button_open">

            <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>
<!-- Dropdown Default Button Open Checkable -->
<div class="dso-dropdown-menu dso-open dso-checkable">
    <button type="button" id="dropdown_default_button_open_checkable" aria-haspopup="true" aria-expanded="true" 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>

</div>
<!-- Dropdown Primary Button -->
<div class="dso-dropdown-menu">
    <button type="button" id="dropdown_primary_button" aria-haspopup="true" aria-expanded="false" class="btn btn-primary"><span>Actie</span></button>

</div>
<!-- Dropdown Primary Button Open -->
<div class="dso-dropdown-menu dso-open">
    <button type="button" id="dropdown_primary_button_open" aria-haspopup="true" aria-expanded="true" 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">

            <li>
                <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">

            <li>
                <a href="#">master</a>
            </li>

        </ul>

        <h2 class="dso-group-label">Branch releases</h2>

        <ul aria-labelledby="dropdown_primary_button_open">

            <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>
<!-- Dropdown Primary Button Open Checkable -->
<div class="dso-dropdown-menu dso-open dso-checkable">
    <button type="button" id="dropdown_primary_button_open_checkable" aria-haspopup="true" aria-expanded="true" 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>

</div>
<!-- Dropdown Link Button Align Right -->
<div class="dso-dropdown-menu dso-open dso-dropdown-align-right dso-checkable">
    <button type="button" id="dropdown_link_button_align_right" aria-haspopup="true" aria-expanded="true" 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>

</div>
<!-- Dropdown Default Button Align Right -->
<div class="dso-dropdown-menu dso-open dso-dropdown-align-right dso-checkable">
    <button type="button" id="dropdown_default_button_align_right" aria-haspopup="true" aria-expanded="true" 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>

</div>
<!-- Dropdown Primary Button Align Right -->
<div class="dso-dropdown-menu dso-open dso-dropdown-align-right dso-checkable">
    <button type="button" id="dropdown_primary_button_align_right" aria-haspopup="true" aria-expanded="true" 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>

</div>
<div {{ className('dso-dropdown-menu', [open, 'dso-open'], [align, 'dso-dropdown-align-' + align], modifiers) }}>
  {% render '@button', {type: 'button', modifier: modifier, label: label, id: id, icon: icon, iconAfter: iconAfter, ariaHasPopup: ariaHasPopup, ariaExpanded: not not open} %}
  {% if open %}
    <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>
  {% endif %}
</div>
/* Dropdown Link */
id: actie
modifier: link
ariaHasPopup: true
open: false
label: Actie
/* Dropdown Link Open */
id: dropdown-link-open
modifier: link
ariaHasPopup: true
open: true
label: Actie
groups:
  - label: Versies
    items:
      - label: 10.6.0
      - 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'
/* Dropdown Link Open Selectable */
id: dropdown-link-open-selectable
modifier: link
ariaHasPopup: true
open: true
label: Actie
modifiers: dso-checkable
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'
/* Dropdown Default Button */
id: dropdown_default_button
modifier: default
ariaHasPopup: true
open: false
label: Actie
/* Dropdown Default Button Open */
id: dropdown_default_button_open
modifier: default
ariaHasPopup: true
open: true
label: Actie
groups:
  - label: Versies
    items:
      - label: 10.6.0
      - 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'
/* Dropdown Default Button Open Checkable */
id: dropdown_default_button_open_checkable
modifier: default
ariaHasPopup: true
open: true
label: Actie
modifiers: dso-checkable
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'
/* Dropdown Primary Button */
id: dropdown_primary_button
modifier: primary
ariaHasPopup: true
open: false
label: Actie
/* Dropdown Primary Button Open */
id: dropdown_primary_button_open
modifier: primary
ariaHasPopup: true
open: true
label: Actie
groups:
  - label: Versies
    items:
      - label: 10.6.0
      - 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'
/* Dropdown Primary Button Open Checkable */
id: dropdown_primary_button_open_checkable
modifier: primary
ariaHasPopup: true
open: true
label: Actie
modifiers: dso-checkable
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'
/* Dropdown Link Button Align Right */
id: dropdown_link_button_align_right
modifier: link
ariaHasPopup: true
open: true
label: Actie
align: right
modifiers: dso-checkable
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'
/* Dropdown Default Button Align Right */
id: dropdown_default_button_align_right
modifier: default
ariaHasPopup: true
open: true
label: Actie
align: right
modifiers: dso-checkable
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'
/* Dropdown Primary Button Align Right */
id: dropdown_primary_button_align_right
modifier: primary
ariaHasPopup: true
open: true
label: Actie
align: right
modifiers: dso-checkable
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'