DSO Toolkit homepage

Dropdown Menu (Web Component)

Component preview opent in nieuw tabblad

Voorschriften/algemeen

  • <dso-dropdown-menu> is de root van het component, dat bestaat uit een button en het daadwerkelijke menu, de .dso-dropdown-options;
  • button heeft attribute slot="toggle", zodat het Web Component ‘weet’ dat dit de bedieningsknop is;

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

<!-- Dropdown Link -->
<dso-dropdown-menu>
    <button type="button" id="actie" aria-haspopup="menu" aria-expanded="false" slot="toggle" class="dso-tertiary"><span>Actie</span></button>

    <div class="dso-dropdown-options">

        <h2 class="dso-group-label">Versies</h2>

        <ul>

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

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

        </ul>

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

        <ul>

            <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>
<!-- Dropdown Default Button Open Checkable -->
<dso-dropdown-menu checkable>
    <button type="button" id="dropdown_default_button_open_checkable" aria-haspopup="menu" aria-expanded="false" slot="toggle" class="dso-secondary"><span>Actie</span></button>

    <div class="dso-dropdown-options">

        <h2 class="dso-group-label">Versies</h2>

        <ul>

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

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

        </ul>

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

        <ul>

            <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>
<!-- Dropdown Primary Button Open Checkable -->
<dso-dropdown-menu checkable>
    <button type="button" id="dropdown_primary_button_open_checkable" aria-haspopup="menu" aria-expanded="false" slot="toggle" class="dso-primary"><span>Actie</span></button>

    <div class="dso-dropdown-options">

        <h2 class="dso-group-label">Versies</h2>

        <ul>

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

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

        </ul>

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

        <ul>

            <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>
<!-- Dropdown Link Button Align Right -->
<dso-dropdown-menu dropdown-align="right" checkable>
    <button type="button" id="dropdown_link_button_align_right" aria-haspopup="menu" aria-expanded="false" slot="toggle" class="dso-tertiary"><span>Actie</span></button>

    <div class="dso-dropdown-options">

        <h2 class="dso-group-label">Versies</h2>

        <ul>

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

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

        </ul>

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

        <ul>

            <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>
<!-- Dropdown Default Button Align Right -->
<dso-dropdown-menu dropdown-align="right" checkable>
    <button type="button" id="dropdown_default_button_align_right" aria-haspopup="menu" aria-expanded="false" slot="toggle" class="dso-secondary"><span>Actie</span></button>

    <div class="dso-dropdown-options">

        <h2 class="dso-group-label">Versies</h2>

        <ul>

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

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

        </ul>

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

        <ul>

            <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>
<!-- Dropdown Primary Button Align Right -->
<dso-dropdown-menu dropdown-align="right" checkable>
    <button type="button" id="dropdown_primary_button_align_right" aria-haspopup="menu" aria-expanded="false" slot="toggle" class="dso-primary"><span>Actie</span></button>

    <div class="dso-dropdown-options">

        <h2 class="dso-group-label">Versies</h2>

        <ul>

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

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

        </ul>

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

        <ul>

            <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 {{ 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>
        {% for item in group.items %}
          <li {{ className([item.checked, 'dso-checked']) }}>
            <a href="#">{{ item.label }}</a>
          </li>
        {% endfor %}
      </ul>
    {% endfor %}
  </div>
</dso-dropdown-menu>
/* Dropdown Link */
id: actie
modifier: dso-tertiary
ariaHasPopup: menu
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'
/* Dropdown Default Button Open Checkable */
id: dropdown_default_button_open_checkable
modifier: dso-secondary
ariaHasPopup: menu
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
/* Dropdown Primary Button Open Checkable */
id: dropdown_primary_button_open_checkable
modifier: dso-primary
ariaHasPopup: menu
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
/* Dropdown Link Button Align Right */
id: dropdown_link_button_align_right
modifier: dso-tertiary
ariaHasPopup: menu
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
/* Dropdown Default Button Align Right */
id: dropdown_default_button_align_right
modifier: dso-secondary
ariaHasPopup: menu
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
/* Dropdown Primary Button Align Right */
id: dropdown_primary_button_align_right
modifier: dso-primary
ariaHasPopup: menu
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