2.8 #Components.dropdown Dropdown
Basic dropdown. If you would like to apply validation styles and messages, check out the Form Control component.
Browser support: IE9+, Safari6+, Firefox30+, Chrome30+
Default styling
.sb-dropdown--open
open dropdown
Markup
<div class="sb-form-control">
<label class="sb-label" for="dropdown-id-[modifier class]">Choose an option</label>
<div class="sb-dropdown [modifier class]" id="dropdown-id-[modifier class]" data-kss-animation-cb="sb-dropdown--open">
<div class="sb-dropdown__button sb-form-control__input sb-form-control__input--icon-right">
<button class="sb-input" aria-label="Choose an option" aria-expanded="false">
Choice 1
</button>
<svg class="sb-icon" viewBox="-5 -5 16 16"><path d="M0 0l3.5 4L7 0H0"></svg>
</div>
<ul class="sb-dropdown__menu" role="listbox">
<li class="sb-dropdown__menu-item" tabindex="0" role="option">Choice 1</li>
<li class="sb-dropdown__menu-item" tabindex="0" role="option">Choice 2</li>
<li class="sb-dropdown__menu-item" tabindex="0" role="option">Choice 3</li>
</ul>
</div>
</div>
Source: components/_dropdown.scss, line 1