Dropdown
A Dropdown is a list of links or buttons that appears when the user interacts with a trigger element. It is used to display a list of options or actions that the user can choose from.
This component is based on the Panel Module, which provides the basic structure and functionality for the dropdown, and a List inside the panel. The dropdown can be triggered by a button or any other element with the appropriate data attributes.
Modifier Classes
The dropdown .c-panel.-is-dropdown can be adjusted to different sizes by adding one of the following modifier classes: .-is-extra-small, -is-small, -is-medium, .-is-large
Show Code
html
<div class="h-flex h-flex-row h-gap-m h-pos-relative">
<div class="c-panel -is-dropdown -is-extra-small -is-visible"
style="position: relative; z-index: 0;"
aria-label="Item auswählen"
id="dropdown-menu-0"
role="menu" >
<div class="c-panel__inner ">
<ul class="c-list -linklist -fullwidth">
<li class="c-list__item p-y-8 h-flex h-flex-column">
<span class="h-type-bold">-is-extra-small</span>
</li>
<li class="c-list__item p-y-8 h-flex h-flex-column">
<span class="h-type-bold">Test List Item 2</span>
</li>
<li class="c-list__item p-y-8 h-flex h-flex-column">
<span class="h-type-bold">Test List Item 3</span>
</li>
</ul>
</div>
</div>
<div class="c-panel -is-dropdown -is-small -is-visible"
style="position: relative; z-index: 0;"
aria-label="Item auswählen"
id="dropdown-menu"
role="menu" >
<div class="c-panel__inner">
<ul class="c-list -linklist -fullwidth js-external-links">
<li class="c-list__item -is-subpages">
<a class="c-link -icon-left" href="allgemein/benutzerkonto/mitarbeiter/?tx_registration_meinemitarbeiter%5BfrontendUser%5D=122885&tx_registration_meinemitarbeiter%5Bmode%5D=data&tx_registration_meinemitarbeiter%5Baction%5D=editSubaccount&tx_registration_meinemitarbeiter%5Bcontroller%5D=FrontendUser&cHash=fa663119360eab811afcdbfc51cdad75">
<i class="fa-regular fa-info-circle" aria-hidden="true"></i>
-is-small Dropdown
</a>
</li>
<li class="c-list__item -is-subpages">
<a class="c-link -icon-left" href="allgemein/benutzerkonto/mitarbeiter/?tx_registration_meinemitarbeiter%5BfrontendUser%5D=122885&tx_registration_meinemitarbeiter%5Bmode%5D=data&tx_registration_meinemitarbeiter%5Baction%5D=editSubaccount&tx_registration_meinemitarbeiter%5Bcontroller%5D=FrontendUser&cHash=fa663119360eab811afcdbfc51cdad75">
<i class="fa-regular fa-pencil" aria-hidden="true"></i>
Daten bearbeiten
</a>
</li>
<li class="c-list__item -is-subpages">
<a class="c-link -icon-left" href="allgemein/benutzerkonto/mitarbeiter/?tx_registration_meinemitarbeiter%5BfrontendUser%5D=122885&tx_registration_meinemitarbeiter%5Bmode%5D=email&tx_registration_meinemitarbeiter%5Baction%5D=editSubaccount&tx_registration_meinemitarbeiter%5Bcontroller%5D=FrontendUser&cHash=e8f0c0cb1ac02ebe7e0b78d4159e0e00">
<i class="fa-regular fa-envelope" aria-hidden="true"></i>
E-Mail bearbeiten
</a>
</li>
<li class="c-list__item -is-subpages">
<a class="c-link -icon-left" href="allgemein/benutzerkonto/mitarbeiter/?tx_registration_meinemitarbeiter%5BfrontendUser%5D=122885&tx_registration_meinemitarbeiter%5Bmode%5D=password&tx_registration_meinemitarbeiter%5Baction%5D=editSubaccount&tx_registration_meinemitarbeiter%5Bcontroller%5D=FrontendUser&cHash=97512439e8cd147cb4a0b2ffcd7165f4">
<i class="fa fa-refresh" aria-hidden="true"></i>
Passwort zurücksetzen
</a>
</li>
<li class="c-list__item -is-subpages">
<a class="c-link -icon-left" href="allgemein/benutzerkonto/benutzer-wechseln/?tx_registration_switchaccounts%5Bswitch_to_user%5D=122885&tx_registration_switchaccounts%5Baction%5D=switchAccount&tx_registration_switchaccounts%5Bcontroller%5D=FrontendUser&cHash=9c797936f4c999f5c2c768ba525d652d">
<i class="fa-solid fa-arrows-left-right" aria-hidden="true"></i>
Zu Mitarbeiter wechseln
</a>
</li>
<li class="c-list__item -is-subpages">
<a class="c-link -icon-left" href="allgemein/benutzerkonto/mitarbeiter/?tx_registration_meinemitarbeiter%5Buser%5D=122885&tx_registration_meinemitarbeiter%5Busertype%5D=2&tx_registration_meinemitarbeiter%5Baction%5D=switchUsertypeForSubaccountUser&tx_registration_meinemitarbeiter%5Bcontroller%5D=FrontendUser&cHash=bbcf5b297615f7da8c486c8fbd5ccb6c">
<i class="fa-regular fa-user-police" aria-hidden="true"></i>
Zu Apotheken-Admin<br>ändern
</a>
</li>
<li class="c-list__item -is-subpages">
<a class="c-link -error -icon-left" href="allgemein/benutzerkonto/mitarbeiter/?tx_registration_meinemitarbeiter%5Buser%5D=122885&tx_registration_meinemitarbeiter%5Baction%5D=confirmDeleteSubaccount&tx_registration_meinemitarbeiter%5Bcontroller%5D=FrontendUser&cHash=31ea98639960c577f91e87a4a1d426c3">
<i class="fa-regular fa-trash" aria-hidden="true"></i>
Mitarbeiter löschen
</a>
</li>
</ul>
</div>
</div>
<div class="c-panel -is-dropdown -is-visible"
style="position: relative; z-index: 0;"
aria-label="Item auswählen"
id="dropdown-menu-3"
role="menu" >
<div class="c-panel__inner">
<ul class="c-list -linklist -fullwidth">
<li class="c-list__item p-y-8 h-flex h-flex-column">
<span class="h-type-bold">Default Size / -is-medium</span>
<span class="h-type-small h-color-gray">Optional Second Line</span>
</li>
<li class="c-list__item p-y-8 h-flex h-flex-column">
<span class="h-type-bold">Test List Item 2</span>
<span class="h-type-small h-color-gray">Optional Second Line</span>
</li>
<li class="c-list__item p-y-8 h-flex h-flex-column">
<span class="h-type-bold">Test List Item 3</span>
<span class="h-type-small h-color-gray">Optional Second Line</span>
</li>
<li class="c-list__item p-y-8 h-flex h-flex-column">
<span class="h-type-bold">Test List Item 4</span>
<span class="h-type-small h-color-gray">Optional Second Line</span>
</li>
<li class="c-list__item p-y-8 h-flex h-flex-column">
<span class="h-type-bold">Test List Item 5</span>
<span class="h-type-small h-color-gray">Optional Second Line</span>
</li>
<li class="c-list__item p-y-8 h-flex h-flex-column">
<span class="h-type-bold">Test List Item 6</span>
<span class="h-type-small h-color-gray">Optional Second Line</span>
</li>
</ul>
</div>
</div>
</div>Scrollable Dropdown Content
.c-panel.-is-dropdown[.-is-large] + > .c-panel__inner.-is-scrollable
Show Code
html
<div class="h-flex h-flex-row h-gap-m h-pos-relative">
<div class="c-panel -is-dropdown -is-large -is-visible"
style="position: relative; z-index: 0;"
aria-label="Item auswählen"
id="scrollable-dropdown-menu-3"
role="menu" >
<div class="c-panel__inner -is-scrollable">
<ul class="c-list -linklist -fullwidth">
<li class="c-list__item p-y-8 h-flex h-flex-column">
<span class="h-type-bold">.-is-large > .c-panel__inner.-is-scrollable</span>
<span class="h-type-small h-color-gray">Optional Second Line</span>
</li>
<li class="c-list__item p-y-8 h-flex h-flex-column">
<span class="h-type-bold">Test List Item 2</span>
<span class="h-type-small h-color-gray">Optional Second Line</span>
</li>
<li class="c-list__item p-y-8 h-flex h-flex-column">
<span class="h-type-bold">Test List Item 3</span>
<span class="h-type-small h-color-gray">Optional Second Line</span>
</li>
<li class="c-list__item p-y-8 h-flex h-flex-column">
<span class="h-type-bold">Test List Item 4</span>
<span class="h-type-small h-color-gray">Optional Second Line</span>
</li>
<li class="c-list__item p-y-8 h-flex h-flex-column">
<span class="h-type-bold">Test List Item 5</span>
<span class="h-type-small h-color-gray">Optional Second Line</span>
</li>
<li class="c-list__item p-y-8 h-flex h-flex-column">
<span class="h-type-bold">Test List Item 6</span>
<span class="h-type-small h-color-gray">Optional Second Line</span>
</li>
<li class="c-list__item p-y-8 h-flex h-flex-column">
<span class="h-type-bold">Test List Item 7</span>
<span class="h-type-small h-color-gray">Optional Second Line</span>
</li>
<li class="c-list__item p-y-8 h-flex h-flex-column">
<span class="h-type-bold">Test List Item 8</span>
<span class="h-type-small h-color-gray">Optional Second Line</span>
</li>
<li class="c-list__item p-y-8 h-flex h-flex-column">
<span class="h-type-bold">Test List Item 9</span>
<span class="h-type-small h-color-gray">Optional Second Line</span>
</li>
</ul>
</div>
</div>
</div>Add Close Button
.c-panel.-is-dropdown.-has-close-btn
// TODO: Add example