Ga direct naar inhoud

Dropdown button

Knop met openklapbaar menu.

  1. Voeg de class dropdown toe om gebruik te maken van de visuele weergave van een "dropdown button".

button

Visuele weergave:

HTML-voorbeeld:

<div
data-open-label="Dropdown menu"
data-close-label="Sluit dropdown menu"
data-media="(min-width: 100%)"
aria-label="Acties"
class="collapsible">

<div class="collapsing-element">
    <ul>
        <li><a href="#">Item 1</a></li>
        <li><a href="#">Huidige selectie</a></li>
        <li><a href="#">Item 3</a></li>
    </ul>
</div>
</div>

Meerdere openklapbare knoppen

Visuele weergave:

HTML-voorbeeld:

<div
data-open-label="Dropdown menu"
data-close-label="Sluit dropdown menu"
data-media="(min-width: 100%)"
aria-label="Acties"
class="collapsible">

<div class="collapsing-element">
    <ul>
        <li><a href="#">Item 1</a></li>
        <li><a href="#">Huidige selectie</a></li>
        <li><a href="#">Item 3</a></li>
    </ul>
</div>
</div>

Bijbehorende bestanden

Voor meer informatie over importeren en instellen van componenten. Zie: Componenten gebruiken en styling toevoegen

Importeer component via npm

CSS-voorbeeld:

      @use "@minvws/manon/dropdown";