2.12 #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 viewBox="0 0 11 6" class="sb-icon sb-icon--s sb-icon--arrow-dropdown">
         <path d="M5.5 6.793l4.146-4.147a.5.5 0 0 1 .708.708l-4.5 4.5a.5.5 0 0 1-.708 0l-4.5-4.5a.5.5 0 0 1 .708-.708L5.5 6.793z" id="a"/>
       </svg>
     </div>
     <ul class="sb-dropdown__menu" role="listbox">
       <li class="sb-dropdown__menu-item sb-text--milo" tabindex="0" role="option">Choice 1</li>
       <li class="sb-dropdown__menu-item sb-text--milo" tabindex="0" role="option">Choice 2</li>
       <li class="sb-dropdown__menu-item sb-text--milo" tabindex="0" role="option">Choice 3</li>
     </ul>
   </div>
 </div>
Source: components/_dropdown.scss, line 1