Dropdown

Component status
Verified
Last releasedOctober 8, 2019
Current version@spectrum-css/dropdown@2.0.0

Variants#


Standard#
Verified

Closed

Open

  • Ballard
  • Fremont
  • Greenwood
  • United States of America

With Thumbnails

  • Ballard
  • Fremont
  • Greenwood
  • United States of America

Disabled

Closed

Open

  • Ballard
  • Fremont
  • Greenwood
  • United States of America

Disabled

<h4>Closed</h4>
<div class="spectrum-Dropdown" style="width: 240px;">
  <button class="spectrum-FieldButton spectrum-Dropdown-trigger" aria-haspopup="listbox">
    <span class="spectrum-Dropdown-label is-placeholder">Select a Country with a very long label, too long in fact</span>
    <svg class="spectrum-Icon spectrum-UIIcon-ChevronDownMedium spectrum-Dropdown-icon" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-ChevronDownMedium" />
    </svg>
  </button>
</div>

<h4>Open</h4>
<div class="spectrum-Dropdown is-open" style="width: 240px;">
  <button class="spectrum-FieldButton spectrum-Dropdown-trigger is-selected" aria-haspopup="listbox">
    <span class="spectrum-Dropdown-label">Ballard</span>
    <svg class="spectrum-Icon spectrum-UIIcon-ChevronDownMedium spectrum-Dropdown-icon" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-ChevronDownMedium" />
    </svg>
  </button>
  <div class="spectrum-Popover spectrum-Popover--bottom spectrum-Dropdown-popover is-open" style="width: 100%">
    <ul class="spectrum-Menu" role="listbox">
      <li class="spectrum-Menu-item is-selected" role="option" aria-selected="true" tabindex="0">
        <span class="spectrum-Menu-itemLabel">Ballard</span>
        <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkMedium spectrum-Menu-checkmark spectrum-Menu-itemIcon" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-CheckmarkMedium" />
        </svg>
      </li>
      <li class="spectrum-Menu-item" role="option" tabindex="0">
        <span class="spectrum-Menu-itemLabel">Fremont</span>
        <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkMedium spectrum-Menu-checkmark spectrum-Menu-itemIcon" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-CheckmarkMedium" />
        </svg>
      </li>
      <li class="spectrum-Menu-item" role="option" tabindex="0">
        <span class="spectrum-Menu-itemLabel">Greenwood</span>
        <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkMedium spectrum-Menu-checkmark spectrum-Menu-itemIcon" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-CheckmarkMedium" />
        </svg>
      </li>
      <li class="spectrum-Menu-divider" role="separator"></li>
      <li class="spectrum-Menu-item is-disabled" role="option" aria-disabled="true">
        <span class="spectrum-Menu-itemLabel">United States of America</span>
        <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkMedium spectrum-Menu-checkmark spectrum-Menu-itemIcon" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-CheckmarkMedium" />
        </svg>
      </li>
    </ul>
  </div>
</div>

<div class="dummy-spacing"></div>

<h4>With Thumbnails</h4>
<div class="spectrum-Dropdown is-open" style="width: 240px;">
  <button class="spectrum-FieldButton spectrum-Dropdown-trigger is-selected" aria-haspopup="listbox">
    <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Image">
      <use xlink:href="#spectrum-icon-18-Image" />
    </svg>
    <span class="spectrum-Dropdown-label">Ballard</span>
    <svg class="spectrum-Icon spectrum-UIIcon-ChevronDownMedium spectrum-Dropdown-icon" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-ChevronDownMedium" />
    </svg>
  </button>
  <div class="spectrum-Popover spectrum-Popover--bottom spectrum-Dropdown-popover is-open" style="width: 100%">
    <ul class="spectrum-Menu" role="listbox">
      <li class="spectrum-Menu-item is-selected" role="option" aria-selected="true" tabindex="0">
        <svg class="spectrum-Icon spectrum-Icon--sizeS spectrum-Menu-itemIcon" focusable="false" aria-hidden="true" aria-label="Image">
          <use xlink:href="#spectrum-icon-18-Image" />
        </svg>
        <span class="spectrum-Menu-itemLabel">Ballard</span>
        <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkMedium spectrum-Menu-checkmark spectrum-Menu-itemIcon" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-CheckmarkMedium" />
        </svg>
      </li>
      <li class="spectrum-Menu-item" role="option" tabindex="0">
        <svg class="spectrum-Icon spectrum-Icon--sizeS spectrum-Menu-itemIcon" focusable="false" aria-hidden="true" aria-label="Image">
          <use xlink:href="#spectrum-icon-18-Image" />
        </svg>
        <span class="spectrum-Menu-itemLabel">Fremont</span>
        <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkMedium spectrum-Menu-checkmark spectrum-Menu-itemIcon" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-CheckmarkMedium" />
        </svg>
      </li>
      <li class="spectrum-Menu-item" role="option" tabindex="0">
        <svg class="spectrum-Icon spectrum-Icon--sizeS spectrum-Menu-itemIcon" focusable="false" aria-hidden="true" aria-label="Image">
          <use xlink:href="#spectrum-icon-18-Image" />
        </svg>
        <span class="spectrum-Menu-itemLabel">Greenwood</span>
        <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkMedium spectrum-Menu-checkmark spectrum-Menu-itemIcon" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-CheckmarkMedium" />
        </svg>
      </li>
      <li class="spectrum-Menu-divider" role="separator"></li>
      <li class="spectrum-Menu-item is-disabled" role="option" aria-disabled="true">
        <svg class="spectrum-Icon spectrum-Icon--sizeS spectrum-Menu-itemIcon" focusable="false" aria-hidden="true" aria-label="Image">
          <use xlink:href="#spectrum-icon-18-Image" />
        </svg>
        <span class="spectrum-Menu-itemLabel">United States of America</span>
        <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkMedium spectrum-Menu-checkmark spectrum-Menu-itemIcon" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-CheckmarkMedium" />
        </svg>
      </li>
    </ul>
  </div>
</div>

<div class="dummy-spacing"></div>

<h4>Disabled</h4>
<div class="spectrum-Dropdown is-disabled" style="width: 240px;">
  <button class="spectrum-FieldButton spectrum-Dropdown-trigger" disabled aria-haspopup="listbox">
    <span class="spectrum-Dropdown-label is-placeholder">Select a Country</span>
    <svg class="spectrum-Icon spectrum-UIIcon-ChevronDownMedium spectrum-Dropdown-icon" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-ChevronDownMedium" />
    </svg>
  </button>
</div>

<h4>Closed</h4>
<div class="spectrum-Dropdown is-invalid" style="width: 240px;">
  <button class="spectrum-FieldButton spectrum-Dropdown-trigger is-invalid" aria-haspopup="listbox">
    <span class="spectrum-Dropdown-label is-placeholder">Select a Country</span>
    <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Folder">
      <use xlink:href="#spectrum-icon-18-Alert" />
    </svg>
    <svg class="spectrum-Icon spectrum-UIIcon-ChevronDownMedium spectrum-Dropdown-icon" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-ChevronDownMedium" />
    </svg>
  </button>
</div>

<h4>Open</h4>
<div class="spectrum-Dropdown is-open is-invalid" style="width: 240px;">
  <button class="spectrum-FieldButton spectrum-Dropdown-trigger is-invalid is-selected" aria-haspopup="listbox">
    <span class="spectrum-Dropdown-label">Ballard</span>
    <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Folder">
      <use xlink:href="#spectrum-icon-18-Alert" />
    </svg>
    <svg class="spectrum-Icon spectrum-UIIcon-ChevronDownMedium spectrum-Dropdown-icon" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-ChevronDownMedium" />
    </svg>
  </button>
  <div class="spectrum-Popover spectrum-Popover--bottom spectrum-Dropdown-popover is-open" style="width: 100%">
    <ul class="spectrum-Menu" role="listbox">
      <li class="spectrum-Menu-item is-selected" role="option" aria-selected="true" tabindex="0">
        <span class="spectrum-Menu-itemLabel">Ballard</span>
        <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkMedium spectrum-Menu-checkmark spectrum-Menu-itemIcon" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-CheckmarkMedium" />
        </svg>
      </li>
      <li class="spectrum-Menu-item" role="option" tabindex="0">
        <span class="spectrum-Menu-itemLabel">Fremont</span>
        <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkMedium spectrum-Menu-checkmark spectrum-Menu-itemIcon" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-CheckmarkMedium" />
        </svg>
      </li>
      <li class="spectrum-Menu-item" role="option" tabindex="0">
        <span class="spectrum-Menu-itemLabel">Greenwood</span>
        <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkMedium spectrum-Menu-checkmark spectrum-Menu-itemIcon" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-CheckmarkMedium" />
        </svg>
      </li>
      <li class="spectrum-Menu-divider" role="separator"></li>
      <li class="spectrum-Menu-item is-disabled" role="option" aria-disabled="true">
        <span class="spectrum-Menu-itemLabel">United States of America</span>
        <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkMedium spectrum-Menu-checkmark spectrum-Menu-itemIcon" focusable="false" aria-hidden="true">
          <use xlink:href="#spectrum-css-icon-CheckmarkMedium" />
        </svg>
      </li>
    </ul>
  </div>
</div>

<div class="dummy-spacing"></div>

<h4>Disabled</h4>
<div class="spectrum-Dropdown is-invalid is-disabled" style="width: 240px;">
  <button class="spectrum-FieldButton spectrum-Dropdown-trigger is-invalid" disabled aria-haspopup="listbox">
    <span class="spectrum-Dropdown-label is-placeholder">Select a Country</span>
    <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Folder">
      <use xlink:href="#spectrum-icon-18-Alert" />
    </svg>
    <svg class="spectrum-Icon spectrum-UIIcon-ChevronDownMedium spectrum-Dropdown-icon" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-ChevronDownMedium" />
    </svg>
  </button>
</div>
Show markup

Quiet#
Verified

Closed

Open

  • Ballard
  • Fremont
  • Greenwood
  • United States of America

With Thumbnails

  • Ballard
  • Fremont
  • Greenwood
  • United States of America

Disabled

Closed

Open

  • Ballard
  • Fremont
  • Greenwood
  • United States of America

Disabled

<h4>Closed</h4>
<div class="spectrum-Dropdown spectrum-Dropdown--quiet">
  <button class="spectrum-FieldButton spectrum-FieldButton--quiet spectrum-Dropdown-trigger" aria-haspopup="listbox">
    <span class="spectrum-Dropdown-label is-placeholder">Select a Country</span>
    <svg class="spectrum-Icon spectrum-UIIcon-ChevronDownMedium spectrum-Dropdown-icon" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-ChevronDownMedium" />
    </svg>
  </button>
</div>

<h4>Open</h4>
<div class="spectrum-Dropdown spectrum-Dropdown--quiet is-open">
  <button class="spectrum-FieldButton spectrum-FieldButton--quiet spectrum-Dropdown-trigger is-selected" aria-haspopup="listbox">
    <span class="spectrum-Dropdown-label">Ballard</span>
    <svg class="spectrum-Icon spectrum-UIIcon-ChevronDownMedium spectrum-Dropdown-icon" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-ChevronDownMedium" />
    </svg>
  </button>
</div>
<div class="spectrum-Popover spectrum-Popover--bottom spectrum-Dropdown-popover spectrum-Dropdown-popover--quiet is-open" style="display: block;">
  <ul class="spectrum-Menu" role="listbox">
    <li class="spectrum-Menu-item is-selected" role="option" aria-selected="true" tabindex="0">
      <span class="spectrum-Menu-itemLabel">Ballard</span>
      <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkMedium spectrum-Menu-checkmark spectrum-Menu-itemIcon" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-CheckmarkMedium" />
      </svg>
    </li>
    <li class="spectrum-Menu-item" role="option" tabindex="0">
      <span class="spectrum-Menu-itemLabel">Fremont</span>
      <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkMedium spectrum-Menu-checkmark spectrum-Menu-itemIcon" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-CheckmarkMedium" />
      </svg>
    </li>
    <li class="spectrum-Menu-item" role="option" tabindex="0">
      <span class="spectrum-Menu-itemLabel">Greenwood</span>
      <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkMedium spectrum-Menu-checkmark spectrum-Menu-itemIcon" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-CheckmarkMedium" />
      </svg>
    </li>
    <li class="spectrum-Menu-divider" role="separator"></li>
    <li class="spectrum-Menu-item is-disabled" role="option" aria-disabled="true">
      <span class="spectrum-Menu-itemLabel">United States of America</span>
      <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkMedium spectrum-Menu-checkmark spectrum-Menu-itemIcon" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-CheckmarkMedium" />
      </svg>
    </li>
  </ul>
</div>

<div class="dummy-spacing"></div>

<h4>With Thumbnails</h4>
<div class="spectrum-Dropdown spectrum-Dropdown--quiet is-open">
  <button class="spectrum-FieldButton spectrum-FieldButton--quiet spectrum-Dropdown-trigger is-selected" aria-haspopup="listbox">
    <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Image">
      <use xlink:href="#spectrum-icon-18-Image" />
    </svg>
    <span class="spectrum-Dropdown-label">Ballard</span>
    <svg class="spectrum-Icon spectrum-UIIcon-ChevronDownMedium spectrum-Dropdown-icon" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-ChevronDownMedium" />
    </svg>
  </button>
</div>
<div class="spectrum-Popover spectrum-Popover--bottom spectrum-Dropdown-popover spectrum-Dropdown-popover--quiet is-open" style="display: block;">
  <ul class="spectrum-Menu" role="listbox">
    <li class="spectrum-Menu-item is-selected" role="option" aria-selected="true" tabindex="0">
      <svg class="spectrum-Icon spectrum-Icon--sizeS spectrum-Menu-itemIcon" focusable="false" aria-hidden="true" aria-label="Image">
        <use xlink:href="#spectrum-icon-18-Image" />
      </svg>
      <span class="spectrum-Menu-itemLabel">Ballard</span>
      <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkMedium spectrum-Menu-checkmark spectrum-Menu-itemIcon" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-CheckmarkMedium" />
      </svg>
    </li>
    <li class="spectrum-Menu-item" role="option" tabindex="0">
      <svg class="spectrum-Icon spectrum-Icon--sizeS spectrum-Menu-itemIcon" focusable="false" aria-hidden="true" aria-label="Image">
        <use xlink:href="#spectrum-icon-18-Image" />
      </svg>
      <span class="spectrum-Menu-itemLabel">Fremont</span>
      <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkMedium spectrum-Menu-checkmark spectrum-Menu-itemIcon" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-CheckmarkMedium" />
      </svg>
    </li>
    <li class="spectrum-Menu-item" role="option" tabindex="0">
      <svg class="spectrum-Icon spectrum-Icon--sizeS spectrum-Menu-itemIcon" focusable="false" aria-hidden="true" aria-label="Image">
        <use xlink:href="#spectrum-icon-18-Image" />
      </svg>
      <span class="spectrum-Menu-itemLabel">Greenwood</span>
      <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkMedium spectrum-Menu-checkmark spectrum-Menu-itemIcon" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-CheckmarkMedium" />
      </svg>
    </li>
    <li class="spectrum-Menu-divider" role="separator"></li>
    <li class="spectrum-Menu-item is-disabled" role="option" aria-disabled="true">
      <svg class="spectrum-Icon spectrum-Icon--sizeS spectrum-Menu-itemIcon" focusable="false" aria-hidden="true" aria-label="Image">
        <use xlink:href="#spectrum-icon-18-Image" />
      </svg>
      <span class="spectrum-Menu-itemLabel">United States of America</span>
      <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkMedium spectrum-Menu-checkmark spectrum-Menu-itemIcon" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-CheckmarkMedium" />
      </svg>
    </li>
  </ul>
</div>

<div class="dummy-spacing"></div>

<h4>Disabled</h4>
<div class="spectrum-Dropdown spectrum-Dropdown--quiet is-disabled">
  <button class="spectrum-FieldButton spectrum-FieldButton--quiet spectrum-Dropdown-trigger" disabled aria-haspopup="listbox">
    <span class="spectrum-Dropdown-label is-placeholder">Select a Country</span>
    <svg class="spectrum-Icon spectrum-UIIcon-ChevronDownMedium spectrum-Dropdown-icon" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-ChevronDownMedium" />
    </svg>
  </button>
</div>

<h4>Closed</h4>
<div class="spectrum-Dropdown spectrum-Dropdown--quiet is-invalid">
  <button class="spectrum-FieldButton spectrum-FieldButton--quiet is-invalid spectrum-Dropdown-trigger" aria-haspopup="listbox">
    <span class="spectrum-Dropdown-label is-placeholder">Select a Country</span>
    <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Folder">
      <use xlink:href="#spectrum-icon-18-Alert" />
    </svg>
    <svg class="spectrum-Icon spectrum-UIIcon-ChevronDownMedium spectrum-Dropdown-icon" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-ChevronDownMedium" />
    </svg>
  </button>
</div>

<h4>Open</h4>
<div class="spectrum-Dropdown spectrum-Dropdown--quiet is-open is-invalid">
  <button class="spectrum-FieldButton spectrum-FieldButton--quiet is-invalid spectrum-Dropdown-trigger" aria-haspopup="listbox">
    <span class="spectrum-Dropdown-label">Ballard</span>
    <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Folder">
      <use xlink:href="#spectrum-icon-18-Alert" />
    </svg>
    <svg class="spectrum-Icon spectrum-UIIcon-ChevronDownMedium spectrum-Dropdown-icon" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-ChevronDownMedium" />
    </svg>
  </button>
</div>
<div class="spectrum-Popover spectrum-Popover--bottom spectrum-Dropdown-popover spectrum-Dropdown-popover--quiet is-open" style="display: block;">
  <ul class="spectrum-Menu" role="listbox">
    <li class="spectrum-Menu-item is-selected" role="option" aria-selected="true" tabindex="0">
      <span class="spectrum-Menu-itemLabel">Ballard</span>
      <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkMedium spectrum-Menu-checkmark spectrum-Menu-itemIcon" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-CheckmarkMedium" />
      </svg>
    </li>
    <li class="spectrum-Menu-item" role="option" tabindex="0">
      <span class="spectrum-Menu-itemLabel">Fremont</span>
      <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkMedium spectrum-Menu-checkmark spectrum-Menu-itemIcon" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-CheckmarkMedium" />
      </svg>
    </li>
    <li class="spectrum-Menu-item" role="option" tabindex="0">
      <span class="spectrum-Menu-itemLabel">Greenwood</span>
      <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkMedium spectrum-Menu-checkmark spectrum-Menu-itemIcon" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-CheckmarkMedium" />
      </svg>
    </li>
    <li class="spectrum-Menu-divider" role="separator"></li>
    <li class="spectrum-Menu-item is-disabled" role="option" aria-disabled="true">
      <span class="spectrum-Menu-itemLabel">United States of America</span>
      <svg class="spectrum-Icon spectrum-UIIcon-CheckmarkMedium spectrum-Menu-checkmark spectrum-Menu-itemIcon" focusable="false" aria-hidden="true">
        <use xlink:href="#spectrum-css-icon-CheckmarkMedium" />
      </svg>
    </li>
  </ul>
</div>

<div class="dummy-spacing"></div>

<h4>Disabled</h4>
<div class="spectrum-Dropdown spectrum-Dropdown--quiet is-invalid is-disabled">
  <button class="spectrum-FieldButton spectrum-FieldButton--quiet is-invalid spectrum-Dropdown-trigger" disabled aria-haspopup="listbox">
    <span class="spectrum-Dropdown-label is-placeholder">Select a Country</span>
    <svg class="spectrum-Icon spectrum-Icon--sizeS" focusable="false" aria-hidden="true" aria-label="Folder">
      <use xlink:href="#spectrum-icon-18-Alert" />
    </svg>
    <svg class="spectrum-Icon spectrum-UIIcon-ChevronDownMedium spectrum-Dropdown-icon" focusable="false" aria-hidden="true">
      <use xlink:href="#spectrum-css-icon-ChevronDownMedium" />
    </svg>
  </button>
</div>
Show markup