<div style="height: 200px">
<div class="c-dropdown">
<div class="c-dropdown__trigger">
<button
slot="trigger"
class="c-button"
>
<span class="c-button__label">Dropdown menu</span>
<span
class="c-button__chevron c-icon c-icon--extra-small"
>
<!-- SVG element -->
</span>
</button>
</div>
<div class="c-dropdown__content">
<div class="c-menu">
<div class="c-menu__item">
<a
href="#"
class="c-menu__link"
>
<div class="c-menu__icon c-icon c-icon--small">
<!-- SVG element -->
</div>
<div class="c-menu__text">
<div class="c-menu__label">Menu Item</div>
</div>
<div class="c-menu__shortkey">
<kbd class="c-shortkey">⌘A</kbd>
</div>
</a>
</div>
<div class="c-menu__item">
<a
href="#"
class="c-menu__link"
>
<div class="c-menu__icon c-icon c-icon--small">
<!-- SVG element -->
</div>
<div class="c-menu__text">
<div class="c-menu__label">Menu Item</div>
</div>
<div class="c-menu__shortkey">
<kbd class="c-shortkey">⌘B</kbd>
</div>
</a>
</div>
<div class="c-menu__divider"></div>
<div class="c-menu__item">
<a
href="#"
class="c-menu__link c-menu__link--active"
>
<div class="c-menu__icon c-icon c-icon--small">
<!-- SVG element -->
</div>
<div class="c-menu__text">
<div class="c-menu__label">Menu Item</div>
</div>
<div
class="c-menu__chevron c-icon c-icon--extra-small"
>
<!-- SVG element -->
</div>
</a>
<div class="c-dropdown">
<div class="c-dropdown__content">
<div class="c-menu">
<div class="c-menu__item">
<a
href="#"
class="c-menu__link"
>
<div class="c-menu__text">
<div class="c-menu__label">
Child menu item
</div>
</div>
</a>
</div>
<div class="c-menu__item">
<a
href="#"
class="c-menu__link c-menu__link--active"
>
<div class="c-menu__text">
<div class="c-menu__label">
Child menu item
</div>
</div>
</a>
</div>
<div class="c-menu__item">
<a
href="#"
class="c-menu__link"
>
<div class="c-menu__text">
<div class="c-menu__label">
Child menu item
</div>
</div>
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>