Auswahlmenü @inline-dropdown
Default @inline-dropdown
<!-- Default -->
<div class="inline-dropdown"><span class="inline-dropdown__label" id="inline-dropdown-a534-label">Sortieren:</span>
<button class="inline-dropdown__control js-inline-dropdown" id="inline-dropdown-a534-control" aria-label="Sortierung wählen. Aktuell: Name A-Z" aria-expanded="false"
aria-controls="inline-dropdown-a534-list" type="button"><span class="inline-dropdown__control-inner"><span class="inline-dropdown__control-label">Name A-Z</span><span class="inline-dropdown__control-indicator"><svg class="icon icon--angle-down inline-dropdown__control-icon" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-angle-down"></use>
</svg></span></span>
</button>
<ul class="inline-dropdown__list" id="inline-dropdown-a534-list" tabindex="-1">
<li class="inline-dropdown__item">
<a class="inline-dropdown__link" href="#" tabindex="-1">Datum</a>
</li>
<li class="inline-dropdown__item">
<a class="inline-dropdown__link" href="#" tabindex="-1">Beliebtheit</a>
</li>
<li class="inline-dropdown__item">
<a class="inline-dropdown__link" href="#" tabindex="-1">Zufällig</a>
</li>
</ul>
</div>{
"label": "Sortieren:",
"control": "Name A-Z",
"list": [
{
"link": "#",
"title": "Datum"
},
{
"link": "#",
"title": "Beliebtheit"
},
{
"link": "#",
"title": "Zufällig"
}
]
}
Number @inline-dropdown--number
<!-- Number -->
<div class="inline-dropdown"><span class="inline-dropdown__label" id="inline-dropdown-9aa4-label">Anzeigen:</span>
<button class="inline-dropdown__control js-inline-dropdown" id="inline-dropdown-9aa4-control" aria-label="Sortierung wählen. Aktuell: 25 Ergebnisse" aria-expanded="false"
aria-controls="inline-dropdown-9aa4-list" type="button"><span class="inline-dropdown__control-inner"><span class="inline-dropdown__control-label">25 Ergebnisse</span><span class="inline-dropdown__control-indicator"><svg class="icon icon--angle-down inline-dropdown__control-icon" viewBox="0 0 200 200" role="presentation">
<use xlink:href="#icon-angle-down"></use>
</svg></span></span>
</button>
<ul class="inline-dropdown__list" id="inline-dropdown-9aa4-list" tabindex="-1">
<li class="inline-dropdown__item">
<a class="inline-dropdown__link" href="#" tabindex="-1">50 Ergebnisse</a>
</li>
<li class="inline-dropdown__item">
<a class="inline-dropdown__link" href="#" tabindex="-1">alle Ergebnisse</a>
</li>
</ul>
</div>{
"label": "Anzeigen:",
"control": "25 Ergebnisse",
"list": [
{
"link": "#",
"title": "50 Ergebnisse"
},
{
"link": "#",
"title": "alle Ergebnisse"
}
]
}