Dropdown

Deprecated Available since 1.0.0 Last updated 1.2.0 Remove 1.5.0

The dropdown allows users to make one selection from a list.

It is an opinionated composition of the popover and menu components with the use of a styled button. It is more flexible than the normal select. Generally, it should be used when there are between 3 to 10 or more options.


Default Dropdown

The dropdown is designed to look like the rest of input components. The options can be divided in groups, which are visually separated and can have a small Group header text.

<div class="fd-dropdown">
   <div class="fd-popover">
      <div class="fd-popover__control">
         <button class="fd-dropdown__control fd-button  " aria-controls="h0C6A325"
         aria-expanded="false" aria-haspopup="true">
         Select
         </button>
      </div>
      <div class="fd-popover__body fd-popover__body--no-arrow"  aria-hidden="true" id="h0C6A325">
         <nav class="fd-menu">
            <ul class="fd-menu__list">
               <li><a href="#" class="fd-menu__item">Option 1</a></li>
               <li><a href="#" class="fd-menu__item">Option 2</a></li>
               <li><a href="#" class="fd-menu__item">Option 3</a></li>
               <li><a href="#" class="fd-menu__item">Option 4</a></li>
            </ul>
         </nav>
      </div>
   </div>
</div>


<div class="fd-dropdown fd-dropdown--compact">
  <div class="fd-popover">
    <div class="fd-popover__control">
      <button class="fd-dropdown__control fd-button    fd-button--compact" aria-controls="dbkLJ896" aria-expanded="false" aria-haspopup="true">
          Select
      </button>
    </div>
    <div class="fd-popover__body fd-popover__body--no-arrow"  aria-hidden="true" id="dbkLJ896">
      <div class="fd-menu">
        <ul class="fd-menu__list">
          <li><a href="#" class="fd-menu__item">Option 1</a></li>
          <li><a href="#" class="fd-menu__item">Option 2</a></li>
          <li><a href="#" class="fd-menu__item">Option 3</a></li>
          <li><a href="#" class="fd-menu__item">Option 4</a></li>
        </ul>
      </div>
    </div>
  </div>
</div>


It can also include complementary information like an icon.

<div class="fd-dropdown">
   <div class="fd-popover">
      <div class="fd-popover__control">
         <button class="fd-dropdown__control fd-button sap-icon--filter "
         aria-controls="sXq41189" aria-expanded="false" aria-haspopup="true">
         Select
         </button>
      </div>
      <div class="fd-popover__body fd-popover__body--no-arrow"  aria-hidden="true" id="sXq41189">
         <nav class="fd-menu">
            <ul class="fd-menu__list">
               <li><a href="#" class="fd-menu__item">Option 1</a></li>
               <li><a href="#" class="fd-menu__item">Option 2</a></li>
               <li><a href="#" class="fd-menu__item">Option 3</a></li>
               <li><a href="#" class="fd-menu__item">Option 4</a></li>
            </ul>
         </nav>
      </div>
   </div>
</div>

<div class="fd-dropdown fd-dropdown--compact">
   <div class="fd-popover">
      <div class="fd-popover__control">
         <button class="fd-dropdown__control fd-button  fd-button--compact sap-icon--filter "
         aria-controls="sXq411891" aria-expanded="false" aria-haspopup="true">
         Select
         </button>
      </div>
      <div class="fd-popover__body fd-popover__body--no-arrow"  aria-hidden="true" id="sXq411891">
         <nav class="fd-menu">
            <ul class="fd-menu__list">
               <li><a href="#" class="fd-menu__item">Option 1</a></li>
               <li><a href="#" class="fd-menu__item">Option 2</a></li>
               <li><a href="#" class="fd-menu__item">Option 3</a></li>
               <li><a href="#" class="fd-menu__item">Option 4</a></li>
            </ul>
         </nav>
      </div>
   </div>
</div>


Toolbar Dropdown

Disabled state can be rendered with a is-disabled class and/or aria-disabled="true" attribute.

<div class="fd-dropdown fd-dropdown--standard">
   <div class="fd-popover">
      <div class="fd-popover__control">
         <button class="fd-dropdown__control fd-button   fd-button--standard" aria-controls="Og5y3993"
         aria-expanded="false" aria-haspopup="true">
         Select
         </button>
      </div>
      <div class="fd-popover__body fd-popover__body--no-arrow"  aria-hidden="true" id="Og5y3993">
         <nav class="fd-menu">
            <ul class="fd-menu__list">
               <li><a href="#" class="fd-menu__item">Option 1</a></li>
               <li><a href="#" class="fd-menu__item">Option 2</a></li>
               <li><a href="#" class="fd-menu__item">Option 3</a></li>
               <li><a href="#" class="fd-menu__item">Option 4</a></li>
            </ul>
         </nav>
      </div>
   </div>
</div>

<div class="fd-dropdown fd-dropdown--standard fd-dropdown--compact">
   <div class="fd-popover">
      <div class="fd-popover__control">
         <button class="fd-dropdown__control fd-button   fd-button--standard fd-button--compact" aria-controls="Og5y399"
         aria-expanded="false" aria-haspopup="true">
         Select
         </button>
      </div>
      <div class="fd-popover__body fd-popover__body--no-arrow"  aria-hidden="true" id="Og5y399">
         <nav class="fd-menu">
            <ul class="fd-menu__list">
               <li><a href="#" class="fd-menu__item">Option 1</a></li>
               <li><a href="#" class="fd-menu__item">Option 2</a></li>
               <li><a href="#" class="fd-menu__item">Option 3</a></li>
               <li><a href="#" class="fd-menu__item">Option 4</a></li>
            </ul>
         </nav>
      </div>
   </div>
</div>


Disabled State

Disabled state can be rendered with a is-disabled class and/or aria-disabled="true" attribute.

<div class="fd-dropdown">
   <div class="fd-popover">
      <div class="fd-popover__control">
         <button class="fd-dropdown__control fd-button sap-icon--filter " aria-controls="GEAva783"
         aria-expanded="false" aria-haspopup="true" disabled>
         Select
         </button>
      </div>
      <div class="fd-popover__body fd-popover__body--no-arrow"  aria-hidden="true" id="GEAva783">
      </div>
   </div>
</div>