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">
<li class="c-list__item p-y-8 h-flex h-flex-column">
<span class="h-type-bold">-is-small</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 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