2.8 #Components.dropdown Dropdown

Toggle example guides Toggle HTML markup

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