Dropdowns

Dropdowns are used to present individuals with a wide range of options and actions they can take. Dropdowns components exist as an <a> <button> or a <select>

<div class="drop-menu">
  <div class="dropdown">
    <select class="dropdown__trigger" disabled>
        <option value="Value1">Dropdown Option</option>
        <option value="Value2">Dropdown Option</option>
        <option value="Value3">Dropdown Option</option>
    </select>
  </div>
</div>

Description

Use the disabled pattern to block usage of a dropdown text element.

Dropdown Text - Direction

<div class="drop-menu">
  <button type="button"
          aria-haspopup="true"
          class="dropdown"
          ut-dropdown-menu-link>
          <span class="dropdown__trigger">Dropdown Button</span>
  </button>

  <ul class="dropdown-options dropdown-options--above">
    <li class="dropdown-item current">
      <a class="dropdown__link" href="#" tabindex="0">Dropdown Item</a>
    </li>
  </ul>
</div>

Description

This example shows the dropdown appearing above the element. This is commonly used in the bulk selector pattern. There is also a left-aligned dropdown. Just use the class dropdown-options--left.

Dropdown Text - Expanded

<div class="drop-menu" style="margin-bottom: 100px">
  <button type="button"
          aria-haspopup="true"
          class="dropdown open"
          ut-dropdown-menu-link>
          <span class="dropdown__trigger">Dropdown Button</span>
  </button>

  <ul class="dropdown-options">
    <li class="dropdown-item current">
      <button type="button" class="dropdown__link">
      Dropdown Item #1
        <span class="dropdown__subtext">Supplemental text</span>
      </button>
    </li>

    <li class="dropdown-item">
      <hr class="dropdown__rule"/>
      <div class="dropdown__subheader">
        Dropdown subheader
      </div>
    </li>
    <li class="dropdown-item">
      <a class="dropdown__link" href="#" tabindex="0">
      Dropdown Item #2
      <span class="dropdown__subtext">Supplemental text</span>
      </a>
    </li>
  </ul>
</div>

Description

When a dropdown item requires more information you can use the expanded dropdown pattern to add a label and description to the items in the dropdown.

Dropdown Button

<div class="drop-menu">
  <button type="button"
          aria-haspopup="true"
          class="dropdown dropdown--alt"
          ut-dropdown-menu-link>
          <span class="dropdown__trigger">Dropdown Button</span>
  </button>



  <ul class="dropdown-options">
    <li class="dropdown-item current">
      <a class="dropdown__link" href="#" tabindex="0">Dropdown Item</a>
    </li>
  </ul>
</div>

Description

This style uses our button pattern and usually appears next to other buttons. The dropdown button uses the secondary action pattern.

Dropdown Button - Disabled

<div class="drop-menu">
  <button type="button"
          aria-haspopup="true"
          class="dropdown dropdown--alt"
          disabled
          ut-dropdown-menu-link>
          <span class="dropdown__trigger">Dropdown Button</span>
  </button>

  <ul class="dropdown-options">
    <li class="dropdown-item current">
      <a class="dropdown__link" href="#" tabindex="0">Dropdown Item</a>
    </li>
  </ul>
</div>

Description

Our default disabled style for dropdown buttons.

Dropdown Button - Intent

<div class="drop-menu">
  <button class="btn--primary">
    <span class="dropdown__trigger--white">Primary Dropdown Button</span>
  </button>
</div>

<div class="m-2x"></div>

<div class="drop-menu">
  <button class="btn--tertiary">
    <span class="dropdown__trigger">Tertiary Dropdown Button</span>
  </button>
</div>

Description

To use brand colors, replace the dropdown and dropdown--alt classes with either btn--primary, btn--tertiary.

The default color for dropdown__trigger is dark. To change the caret or “more” icon to light for use on darker backgrounds, use dropdown__trigger--white.

Dropdown - More

<div class="drop-menu">
  <button type="button"
          aria-haspopup="true"
          class="dropdown dropdown--more"
          aria-label="More options"
          ut-dropdown-menu-link>
          <span class="dropdown__trigger">&nbsp;</span>
  </button>

  <ul class="dropdown-options">
    <li class="dropdown-item current">
      <a class="dropdown__link" href="#" tabindex="0">Dropdown Item</a>
    </li>
  </ul>
</div>

Description

The three dots icon is used to infer that more actions can be found in this dropdown.

Do

Don't

Accessibility

- Receives `:focus`