Dropdown

Vanilla JS
Code:
<!--
  Copyright IBM Corp. 2016, 2018

  This source code is licensed under the Apache-2.0 license found in the
  LICENSE file in the root directory of this source tree.
-->

<div class="bx--form-item">
  <div class="bx--dropdown__wrapper ">
    <label for="dropdown-id" class="bx--label">Dropdown label</label>
    <div class="bx--form__helper-text">Optional helper text.</div>
    <ul data-dropdown data-value id="dropdown-id"
      class="bx--dropdown   "
      tabindex="0">
      <li class="bx--dropdown-text">
         Dropdown option       </li>
      <li class="bx--dropdown__arrow-container">
        <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--dropdown__arrow" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M8 11L3 6l.7-.7L8 9.6l4.3-4.3.7.7z"></path></svg>
      </li>
      <li>
        <ul class="bx--dropdown-list">
          <li data-option data-value="all" class="bx--dropdown-item">
            <a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1">Option 1</a>
          </li>
          <li data-option data-value="cloudFoundry" class="bx--dropdown-item">
            <a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1">Option 2</a>
          </li>
          <li data-option data-value="staging" class="bx--dropdown-item">
            <a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1">Option 3</a>
          </li>
          <li data-option data-value="dea" class="bx--dropdown-item">
            <a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1">Option 4</a>
          </li>
          <li data-option data-value="router" class="bx--dropdown-item">
            <a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1">Option 5</a>
          </li>
          <li data-option data-value="loremipsum" class="bx--dropdown-item">
            <a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1">An example option that is really long to show what should be done to handle long text</a>
          </li>
        </ul>
      </li>
    </ul>
  </div>
</div>

<div class="bx--form-item">
  <div class="bx--dropdown__wrapper ">
    <label for="dropdown-id-longer-helper-text" class="bx--label">Dropdown label</label>
    <div class="bx--form__helper-text">Optional helper text here; if message is more than one line text
      should wrap (~100 character count maximum)</div>
    <ul data-dropdown data-value id="dropdown-id-longer-helper-text"
      class="bx--dropdown   "
      tabindex="0">
      <li class="bx--dropdown-text">
         Dropdown option       </li>
      <li class="bx--dropdown__arrow-container">
        <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--dropdown__arrow" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M8 11L3 6l.7-.7L8 9.6l4.3-4.3.7.7z"></path></svg>
      </li>
      <li>
        <ul class="bx--dropdown-list">
          <li data-option data-value="all" class="bx--dropdown-item">
            <a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1">Option 1</a>
          </li>
          <li data-option data-value="cloudFoundry" class="bx--dropdown-item">
            <a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1">Option 2</a>
          </li>
          <li data-option data-value="staging" class="bx--dropdown-item">
            <a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1">Option 3</a>
          </li>
          <li data-option data-value="dea" class="bx--dropdown-item">
            <a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1">Option 4</a>
          </li>
          <li data-option data-value="router" class="bx--dropdown-item">
            <a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1">Option 5</a>
          </li>
          <li data-option data-value="loremipsum" class="bx--dropdown-item">
            <a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1">An example option that is really long to show what should be done to handle long text</a>
          </li>
        </ul>
      </li>
    </ul>
  </div>
</div>

<div class="bx--form-item">
  <div class="bx--dropdown__wrapper ">
    <label for="dropdown-id-disabled" class="bx--label bx--label--disabled">Dropdown
      label</label>
    <div class="bx--form__helper-text bx--form__helper-text--disabled">Optional helper text
      here; if message is more than one line text
      should wrap (~100 character count maximum)</div>
    <ul data-dropdown data-value id="dropdown-id-disabled"
      class="bx--dropdown bx--dropdown--disabled"
      tabindex="0">
      <li class="bx--dropdown-text">
         Dropdown option       </li>
      <li class="bx--dropdown__arrow-container">
        <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--dropdown__arrow" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M8 11L3 6l.7-.7L8 9.6l4.3-4.3.7.7z"></path></svg>
      </li>
      <li>
        <ul class="bx--dropdown-list">
          <li data-option data-value="all" class="bx--dropdown-item">
            <a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1">Option 1</a>
          </li>
          <li data-option data-value="cloudFoundry" class="bx--dropdown-item">
            <a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1">Option 2</a>
          </li>
          <li data-option data-value="staging" class="bx--dropdown-item">
            <a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1">Option 3</a>
          </li>
          <li data-option data-value="dea" class="bx--dropdown-item">
            <a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1">Option 4</a>
          </li>
          <li data-option data-value="router" class="bx--dropdown-item">
            <a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1">Option 5</a>
          </li>
          <li data-option data-value="loremipsum" class="bx--dropdown-item">
            <a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1">An example option that is really long to show what should be done to handle long text</a>
          </li>
        </ul>
      </li>
    </ul>
  </div>
</div>

<div class="bx--form-item">
  <div
    class="bx--dropdown__wrapper ">
    <label for="dropdown-id-invalid" class="bx--label">Dropdown
      label</label>
    <div class="bx--form__helper-text">Optional helper text
      here; if message is more than one line text
      should wrap (~100 character count maximum)</div>
    <ul data-dropdown data-value id="dropdown-id-invalid"
      class="bx--dropdown bx--dropdown--invalid  "
      tabindex="0" data-invalid>
      <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--dropdown__invalid-icon" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M8 1C4.2 1 1 4.2 1 8s3.2 7 7 7 7-3.1 7-7-3.1-7-7-7zm-.5 3h1v5h-1V4zm.5 8.2c-.4 0-.8-.4-.8-.8s.3-.8.8-.8c.4 0 .8.4.8.8s-.4.8-.8.8z"></path><path d="M7.5 4h1v5h-1V4zm.5 8.2c-.4 0-.8-.4-.8-.8s.3-.8.8-.8c.4 0 .8.4.8.8s-.4.8-.8.8z" data-icon-path="inner-path" opacity="0"></path></svg>
      <li class="bx--dropdown-text">
         Dropdown option       </li>
      <li class="bx--dropdown__arrow-container">
        <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--dropdown__arrow" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M8 11L3 6l.7-.7L8 9.6l4.3-4.3.7.7z"></path></svg>
      </li>
      <li>
        <ul class="bx--dropdown-list">
          <li data-option data-value="all" class="bx--dropdown-item">
            <a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1">Option 1</a>
          </li>
          <li data-option data-value="cloudFoundry" class="bx--dropdown-item">
            <a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1">Option 2</a>
          </li>
          <li data-option data-value="staging" class="bx--dropdown-item">
            <a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1">Option 3</a>
          </li>
          <li data-option data-value="dea" class="bx--dropdown-item">
            <a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1">Option 4</a>
          </li>
          <li data-option data-value="router" class="bx--dropdown-item">
            <a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1">Option 5</a>
          </li>
          <li data-option data-value="loremipsum" class="bx--dropdown-item">
            <a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1">An example option that is really long to show what should be done to handle long text</a>
          </li>
        </ul>
      </li>
    </ul>
  </div>
  <div class="bx--form-requirement">
    This is not a validation message
  </div>
</div>

Dropdown (Up)

Vanilla JS
Code:
<!--
  Copyright IBM Corp. 2016, 2018

  This source code is licensed under the Apache-2.0 license found in the
  LICENSE file in the root directory of this source tree.
-->

<div class="bx--form-item">
  <div class="bx--dropdown__wrapper ">
    <label for="dropdown-id" class="bx--label">Dropdown label</label>
    <div class="bx--form__helper-text">Optional helper text.</div>
    <ul data-dropdown data-value id="dropdown-id"
      class="bx--dropdown bx--dropdown--up  "
      tabindex="0">
      <li class="bx--dropdown-text">
         Dropdown option       </li>
      <li class="bx--dropdown__arrow-container">
        <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--dropdown__arrow" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M8 11L3 6l.7-.7L8 9.6l4.3-4.3.7.7z"></path></svg>
      </li>
      <li>
        <ul class="bx--dropdown-list">
          <li data-option data-value="all" class="bx--dropdown-item">
            <a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1">Option 1</a>
          </li>
          <li data-option data-value="cloudFoundry" class="bx--dropdown-item">
            <a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1">Option 2</a>
          </li>
          <li data-option data-value="staging" class="bx--dropdown-item">
            <a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1">Option 3</a>
          </li>
          <li data-option data-value="dea" class="bx--dropdown-item">
            <a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1">Option 4</a>
          </li>
          <li data-option data-value="router" class="bx--dropdown-item">
            <a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1">Option 5</a>
          </li>
          <li data-option data-value="loremipsum" class="bx--dropdown-item">
            <a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1">An example option that is really long to show what should be done to handle long text</a>
          </li>
        </ul>
      </li>
    </ul>
  </div>
</div>

<div class="bx--form-item">
  <div class="bx--dropdown__wrapper ">
    <label for="dropdown-id-longer-helper-text" class="bx--label">Dropdown label</label>
    <div class="bx--form__helper-text">Optional helper text here; if message is more than one line text
      should wrap (~100 character count maximum)</div>
    <ul data-dropdown data-value id="dropdown-id-longer-helper-text"
      class="bx--dropdown bx--dropdown--up  "
      tabindex="0">
      <li class="bx--dropdown-text">
         Dropdown option       </li>
      <li class="bx--dropdown__arrow-container">
        <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--dropdown__arrow" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M8 11L3 6l.7-.7L8 9.6l4.3-4.3.7.7z"></path></svg>
      </li>
      <li>
        <ul class="bx--dropdown-list">
          <li data-option data-value="all" class="bx--dropdown-item">
            <a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1">Option 1</a>
          </li>
          <li data-option data-value="cloudFoundry" class="bx--dropdown-item">
            <a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1">Option 2</a>
          </li>
          <li data-option data-value="staging" class="bx--dropdown-item">
            <a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1">Option 3</a>
          </li>
          <li data-option data-value="dea" class="bx--dropdown-item">
            <a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1">Option 4</a>
          </li>
          <li data-option data-value="router" class="bx--dropdown-item">
            <a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1">Option 5</a>
          </li>
          <li data-option data-value="loremipsum" class="bx--dropdown-item">
            <a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1">An example option that is really long to show what should be done to handle long text</a>
          </li>
        </ul>
      </li>
    </ul>
  </div>
</div>

<div class="bx--form-item">
  <div class="bx--dropdown__wrapper ">
    <label for="dropdown-id-disabled" class="bx--label bx--label--disabled">Dropdown
      label</label>
    <div class="bx--form__helper-text bx--form__helper-text--disabled">Optional helper text
      here; if message is more than one line text
      should wrap (~100 character count maximum)</div>
    <ul data-dropdown data-value id="dropdown-id-disabled"
      class="bx--dropdown bx--dropdown--up bx--dropdown--disabled"
      tabindex="0">
      <li class="bx--dropdown-text">
         Dropdown option       </li>
      <li class="bx--dropdown__arrow-container">
        <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--dropdown__arrow" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M8 11L3 6l.7-.7L8 9.6l4.3-4.3.7.7z"></path></svg>
      </li>
      <li>
        <ul class="bx--dropdown-list">
          <li data-option data-value="all" class="bx--dropdown-item">
            <a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1">Option 1</a>
          </li>
          <li data-option data-value="cloudFoundry" class="bx--dropdown-item">
            <a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1">Option 2</a>
          </li>
          <li data-option data-value="staging" class="bx--dropdown-item">
            <a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1">Option 3</a>
          </li>
          <li data-option data-value="dea" class="bx--dropdown-item">
            <a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1">Option 4</a>
          </li>
          <li data-option data-value="router" class="bx--dropdown-item">
            <a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1">Option 5</a>
          </li>
          <li data-option data-value="loremipsum" class="bx--dropdown-item">
            <a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1">An example option that is really long to show what should be done to handle long text</a>
          </li>
        </ul>
      </li>
    </ul>
  </div>
</div>

<div class="bx--form-item">
  <div
    class="bx--dropdown__wrapper ">
    <label for="dropdown-id-invalid" class="bx--label">Dropdown
      label</label>
    <div class="bx--form__helper-text">Optional helper text
      here; if message is more than one line text
      should wrap (~100 character count maximum)</div>
    <ul data-dropdown data-value id="dropdown-id-invalid"
      class="bx--dropdown bx--dropdown--invalid bx--dropdown--up "
      tabindex="0" data-invalid>
      <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--dropdown__invalid-icon" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M8 1C4.2 1 1 4.2 1 8s3.2 7 7 7 7-3.1 7-7-3.1-7-7-7zm-.5 3h1v5h-1V4zm.5 8.2c-.4 0-.8-.4-.8-.8s.3-.8.8-.8c.4 0 .8.4.8.8s-.4.8-.8.8z"></path><path d="M7.5 4h1v5h-1V4zm.5 8.2c-.4 0-.8-.4-.8-.8s.3-.8.8-.8c.4 0 .8.4.8.8s-.4.8-.8.8z" data-icon-path="inner-path" opacity="0"></path></svg>
      <li class="bx--dropdown-text">
         Dropdown option       </li>
      <li class="bx--dropdown__arrow-container">
        <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--dropdown__arrow" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M8 11L3 6l.7-.7L8 9.6l4.3-4.3.7.7z"></path></svg>
      </li>
      <li>
        <ul class="bx--dropdown-list">
          <li data-option data-value="all" class="bx--dropdown-item">
            <a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1">Option 1</a>
          </li>
          <li data-option data-value="cloudFoundry" class="bx--dropdown-item">
            <a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1">Option 2</a>
          </li>
          <li data-option data-value="staging" class="bx--dropdown-item">
            <a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1">Option 3</a>
          </li>
          <li data-option data-value="dea" class="bx--dropdown-item">
            <a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1">Option 4</a>
          </li>
          <li data-option data-value="router" class="bx--dropdown-item">
            <a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1">Option 5</a>
          </li>
          <li data-option data-value="loremipsum" class="bx--dropdown-item">
            <a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1">An example option that is really long to show what should be done to handle long text</a>
          </li>
        </ul>
      </li>
    </ul>
  </div>
  <div class="bx--form-requirement">
    This is not a validation message
  </div>
</div>

Dropdown inline

Code:
<!--
  Copyright IBM Corp. 2016, 2018

  This source code is licensed under the Apache-2.0 license found in the
  LICENSE file in the root directory of this source tree.
-->

<div class="bx--form-item">
  <div class="bx--dropdown__wrapper bx--dropdown__wrapper--inline">
    <label for="dropdown-id" class="bx--label">Dropdown label</label>
    <ul data-dropdown data-dropdown-type="inline"  data-value id="dropdown-id"
      class="bx--dropdown   bx--dropdown--inline"
      tabindex="0">
      <li class="bx--dropdown-text">
        
        <span class="bx--dropdown-text__inner">Inline Dropdown label</span>
        <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--dropdown__arrow" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M8 11L3 6l.7-.7L8 9.6l4.3-4.3.7.7z"></path></svg>
      </li>
      <li>
        <ul class="bx--dropdown-list">
          <li data-option data-value="all" class="bx--dropdown-item">
            <a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1">Option 1</a>
          </li>
          <li data-option data-value="cloudFoundry" class="bx--dropdown-item">
            <a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1">Option 2</a>
          </li>
          <li data-option data-value="staging" class="bx--dropdown-item">
            <a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1">Option 3</a>
          </li>
          <li data-option data-value="dea" class="bx--dropdown-item">
            <a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1">Option 4</a>
          </li>
          <li data-option data-value="router" class="bx--dropdown-item">
            <a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1">Option 5</a>
          </li>
          <li data-option data-value="loremipsum" class="bx--dropdown-item">
            <a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1">An example option that is really long to show what should be done to handle long text</a>
          </li>
        </ul>
      </li>
    </ul>
  </div>
</div>


<div class="bx--form-item">
  <div class="bx--dropdown__wrapper bx--dropdown__wrapper--inline">
    <label for="dropdown-id-disabled" class="bx--label bx--label--disabled">Dropdown
      label</label>
    <ul data-dropdown data-dropdown-type="inline"  data-value id="dropdown-id-disabled"
      class="bx--dropdown bx--dropdown--inline bx--dropdown--disabled"
      tabindex="0">
      <li class="bx--dropdown-text">
        
        <span class="bx--dropdown-text__inner">Inline Dropdown label</span>
        <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--dropdown__arrow" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M8 11L3 6l.7-.7L8 9.6l4.3-4.3.7.7z"></path></svg>
      </li>
      <li>
        <ul class="bx--dropdown-list">
          <li data-option data-value="all" class="bx--dropdown-item">
            <a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1">Option 1</a>
          </li>
          <li data-option data-value="cloudFoundry" class="bx--dropdown-item">
            <a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1">Option 2</a>
          </li>
          <li data-option data-value="staging" class="bx--dropdown-item">
            <a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1">Option 3</a>
          </li>
          <li data-option data-value="dea" class="bx--dropdown-item">
            <a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1">Option 4</a>
          </li>
          <li data-option data-value="router" class="bx--dropdown-item">
            <a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1">Option 5</a>
          </li>
          <li data-option data-value="loremipsum" class="bx--dropdown-item">
            <a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1">An example option that is really long to show what should be done to handle long text</a>
          </li>
        </ul>
      </li>
    </ul>
  </div>
</div>

<div class="bx--form-item">
  <div
    class="bx--dropdown__wrapper bx--dropdown__wrapper--inline bx--dropdown__wrapper--inline--invalid">
    <label for="dropdown-id-invalid" class="bx--label">Dropdown
      label</label>
    <ul data-dropdown data-dropdown-type="inline"  data-value id="dropdown-id-invalid"
      class="bx--dropdown bx--dropdown--invalid   bx--dropdown--inline"
      tabindex="0" data-invalid>
      <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--dropdown__invalid-icon" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M8 1C4.2 1 1 4.2 1 8s3.2 7 7 7 7-3.1 7-7-3.1-7-7-7zm-.5 3h1v5h-1V4zm.5 8.2c-.4 0-.8-.4-.8-.8s.3-.8.8-.8c.4 0 .8.4.8.8s-.4.8-.8.8z"></path><path d="M7.5 4h1v5h-1V4zm.5 8.2c-.4 0-.8-.4-.8-.8s.3-.8.8-.8c.4 0 .8.4.8.8s-.4.8-.8.8z" data-icon-path="inner-path" opacity="0"></path></svg>
      <li class="bx--dropdown-text">
        
        <span class="bx--dropdown-text__inner">Inline Dropdown label</span>
        <svg focusable="false" preserveAspectRatio="xMidYMid meet" style="will-change: transform;" xmlns="http://www.w3.org/2000/svg" class="bx--dropdown__arrow" width="16" height="16" viewBox="0 0 16 16" aria-hidden="true"><path d="M8 11L3 6l.7-.7L8 9.6l4.3-4.3.7.7z"></path></svg>
      </li>
      <li>
        <ul class="bx--dropdown-list">
          <li data-option data-value="all" class="bx--dropdown-item">
            <a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1">Option 1</a>
          </li>
          <li data-option data-value="cloudFoundry" class="bx--dropdown-item">
            <a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1">Option 2</a>
          </li>
          <li data-option data-value="staging" class="bx--dropdown-item">
            <a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1">Option 3</a>
          </li>
          <li data-option data-value="dea" class="bx--dropdown-item">
            <a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1">Option 4</a>
          </li>
          <li data-option data-value="router" class="bx--dropdown-item">
            <a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1">Option 5</a>
          </li>
          <li data-option data-value="loremipsum" class="bx--dropdown-item">
            <a class="bx--dropdown-link" href="javascript:void(0)" tabindex="-1">An example option that is really long to show what should be done to handle long text</a>
          </li>
        </ul>
      </li>
    </ul>
    <div class="bx--form-requirement">
      This is not a validation message
    </div>
  </div>
</div>

Multi select

This component is currently only available in our React and Angular libraries.

Filterable multi select

This component is currently only available in our React and Angular libraries.

Inline multi select

This component is currently only available in our React and Angular libraries.

Combo box

This component is currently only available in our React and Angular libraries.

Documentation

SCSS

Modifiers

Use these modifiers with .bx--dropdown class.

Name Description
.bx--dropdown--auto-width Allows the width of the dropdown to be equal to the width of the content inside it instead of being 100% width of the container.
.bx--dropdown--selected Applies specific styles for a selected dropdown item.
.bx--dropdown--open Applies specific styles when the dropdown is opened
.bx--dropdown--up Applies style to have the dropdown slide up instead of down

JavaScript

Getting component class reference

ES2015
import { Dropdown } from 'carbon-components';
With pre-build bundle (carbon-components.min.js)
var Dropdown = CarbonComponents.Dropdown;

Instantiating

// `#my-dropdown` is an element with `[data-dropdown]` attribute
Dropdown.create(document.getElementById('my-dropdown'));

Public Methods

Name Params Description
release Deletes the instance
getCurrentNavigation Returns the currently highlighted element
navigate direction: Number Moves the focus up or down
select itemToSelect: Object Handles clicking on the dropdown options, doing the following: Changing text to selected option, removing selected option from options when selected, and emitting custom events
setCloseOnBlur Sets an event handler to document for "close on blue" behavior
Example - Changing the active item
// `#my-dropdown` is an element with `[data-dropdown]` attribute
var dropdownInstance = Dropdown.create(document.getElementById('my-dropdown'));
// `#my-dropdown-link-1` is one of the `<a>`s with `bx--dropdown-link` class
dropdownInstance.select(document.getElementById('my-dropdown-link-1'));

Options

Option Default Selector Description
selectorInit [data-dropdown] The selector to find the dropdown component
selectorItem .bx--dropdown-link The selector to find the clickable area in the selected dropdown item
selectorItemSelected .bx--dropdown--selected The selector to find the clickable area in the selected dropdown item
selectorItemHidden [hidden],[aria-hidden="true"] The selector to find hidden dropdown items. Used to skip dropdown items for keyboard navigation.
classSelected bx--dropdown--selected The class for the selected dropdown item.

Events

Event Name Description
dropdown-beingselected Custom event fired before a dropdown item is selected
dropdown-selected Custom event fired after a dropdown item is selected
Example - Preventing a dropdown item from being selected in a certain condition
document.addEventListener('dropdown-beingselected', function(evt) {
  if (!myApplication.shouldDropdownItemBeSelected(evt.target)) {
    evt.preventDefault();
  }
});
Example - Notifying events of all dropdown items being selected to an analytics library
document.addEventListener('dropdown-selected', function(evt) {
  myAnalyticsLibrary.send({
    action: 'Dropdown item selected',
    id: evt.target.id,
  });
});