DropDown

DropDown

Example DropDown

Usage

<div class="demo-only" style="height: 260px;">
    <div class="slds-dropdown-trigger slds-dropdown-trigger_click">
      <button class="slds-button slds-button_icon slds-button_icon-border-filled" aria-haspopup="true" title="Show More" data-toggle="dropdown">
        <svg class="slds-button__icon" aria-hidden="true">
          <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/lightning-ui/dist/icons/utility-sprite/svg/symbols.svg#down" />
        </svg>
        <span class="slds-assistive-text">Show More</span>
      </button>
      <div class="slds-dropdown slds-dropdown_left slds-dropdown_small">
        <ul class="slds-dropdown__list" role="menu">
          <li class="slds-dropdown__header slds-truncate" title="Menu Sub Heading" role="separator">
            <span class="slds-text-title_caps">Menu Sub Heading</span>
          </li>
          <li class="slds-dropdown__item" role="presentation">
            <a href="javascript:void(0);" role="menuitem" tabindex="0">
              <span class="slds-truncate" title="Menu Item One">Menu Item One</span>
            </a>
          </li>
          <li class="slds-dropdown__item" role="presentation">
            <a href="javascript:void(0);" role="menuitem" tabindex="-1">
              <span class="slds-truncate" title="Menu Item Two">Menu Item Two</span>
            </a>
          </li>
          <li class="slds-dropdown__header slds-truncate" title="Menu Sub Heading" role="separator">
            <span class="slds-text-title_caps">Menu Sub Heading</span>
          </li>
          <li class="slds-dropdown__item" role="presentation">
            <a href="javascript:void(0);" role="menuitem" tabindex="-1">
              <span class="slds-truncate" title="Menu Item One">Menu Item One</span>
            </a>
          </li>
          <li class="slds-dropdown__item" role="presentation">
            <a href="javascript:void(0);" role="menuitem" tabindex="-1">
              <span class="slds-truncate" title="Menu Item Two">Menu Item Two</span>
            </a>
          </li>
        </ul>
      </div>
    </div>
  </div>