Button Dropdown
The button-dropdown component, prefixed by gds-button-dropdown
, is used for dropdown menus. To expand the dropdown menu, add the gds-button-dropdown--active
class to gds-button-dropdown
. Use the modifier gds-button-dropdown--sm
for a smaller dropdown menu.
<div class="gds-button-dropdown" data-gds-dropdown>
<button type="button" class="gds-button-dropdown__button gds-button--primary" data-gds-dropdown-button>Dropdown Menu</button>
<ul class="gds-button-dropdown__menu">
<li class="gds-button-dropdown__menu-item"><a class="gds-button-dropdown__menu-link">Link</a></li>
<li class="gds-button-dropdown__menu-item"><a class="gds-button-dropdown__menu-link">Link</a></li>
<li class="gds-button-dropdown__menu-item"><a class="gds-button-dropdown__menu-link">Link</a></li>
<li class="gds-button-dropdown__menu-item"><a class="gds-button-dropdown__menu-link">Link</a></li>
<li class="gds-button-dropdown__divider"></li>
<li class="gds-button-dropdown__menu-item"><a class="gds-button-dropdown__menu-link">Link</a></li>
<li class="gds-button-dropdown__menu-item"><a class="gds-button-dropdown__menu-link">Link</a></li>
</ul>
</div>
Optional classes:
gds-button-dropdown--secondary
gds-button-dropdown--tertiary
gds-button-dropdown--xs
gds-button-dropdown--sm
gds-button-dropdown--lg
gds-button-dropdown__button--dark
gds-button-dropdown__button--dark-primary
gds-button-dropdown__button--dark-secondary
gds-button-dropdown__button--dark-tertiary
gds-button-dropdown__menu--dark
gds-button-dropdown__button--no-rotate