Dropdown Menus

Multi-Select Dropdown Menus


<ul class="o-list-menu">
  <li class="o-list-menu__item c-dropdown__button"><a>Filter by Program</a>
    <ul class="o-list-menu c-dropdown">
      <li class="o-list-menu__item o-list-menu__item--selected"><a>Sundance Film Festival</a></li>
      <li class="o-list-menu__item"><a>Feature Film</a></li>
      <li class="o-list-menu__item o-list-menu__item--selected"><a>Documentary Film</a></li>
      <li class="o-list-menu__item"><a>Theatre</a></li>
    </ul>
  </li>
</ul>
<ul class="o-list-menu">
  <li class="o-list-menu__item c-dropdown__button"><a>Filter by Event Type</a>
    <ul class="o-list-menu c-dropdown">
      <li class="o-list-menu__item o-list-menu__item--selected"><a>Screening</a></li>
      <li class="o-list-menu__item"><a>Party</a></li>
      <li class="o-list-menu__item o-list-menu__item--selected"><a>Reception</a></li>
      <li class="o-list-menu__item"><a>Workshop</a></li>
    </ul>
  </li>
</ul>

Bordered Multi-select Dropdown Menu (Used In Forms)


<ul class="o-list-menu">
  <li class="o-list-menu__item c-dropdown__button c-dropdown__button--border"><a>Filter by Program</a>
    <ul class="o-list-menu c-dropdown">
      <li class="o-list-menu__item o-list-menu__item--selected"><a>Sundance Film Festival</a></li>
      <li class="o-list-menu__item"><a>Feature Film</a></li>
      <li class="o-list-menu__item o-list-menu__item--selected"><a>Documentary Film</a></li>
      <li class="o-list-menu__item"><a>Theatre</a></li>
    </ul>
  </li>
</ul>

Bordered Single-select Dropdown Menu

        
          <ul class="o-list-menu">
            <li class="o-list-menu__item c-dropdown__button c-dropdown__button--border"><a>Filter by Program</a>
              <ul class="o-list-menu c-dropdown">
                <li class="o-list-menu__item o-list-menu__item--selected"><a>Sundance Film Festival</a></li>
                <li class="o-list-menu__item"><a>Feature Film</a></li>
                <li class="o-list-menu__item o-list-menu__item--selected"><a>Documentary Film</a></li>
                <li class="o-list-menu__item"><a>Theatre</a></li>
              </ul>
            </li>
          </ul>
        
      

Bordered Single-select Dropdown Menu (Used In Forms)


<div class="o-form__dropdown-container">
  <select name="favoritefilm" id="favoritefilm">
    <option>Whiplash</option>
    <option>Fruitvale Station</option>
    <option>Swiss Army Man</option>
  </select>
  <label for="favoritefood">Favorite Sundance Film</label>
</div>