components

Dropdown

Dropdown allows a consolidated treatment of lists to navigate to other areas of a site.

Primary Dropdown
 
  • <div class="lp__card lp__card_photo_title_text_links">
<div class="lp__card_wrapper">
    <a href="http://www.worldbank.org/"><img src="../assets/img/780x439-6.jpg" class="lp__img_responsive" title="image" alt="image"></a>
    <div class="lp__card_content">
        <div class="lp__card_hammer"><span>Slideshare</span><span>Oct 15, 2016</span></div>
        <h6 class="lp__card_title"><a href="#">Climate Change</a></h6>
        <p class="lp__card_description">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. </p>
        <div class="lp__card_list_horizontal">
            <ul class="lp__card_list">
                <li class="lp__card_list_item"><a href="">Overview</a></li>
                <li class="lp__card_list_item"><a href="">Data</a></li>
                <li class="lp__card_list_item"><a href="">Research &amp; Publications</a></li>
            </ul>
        </div>
    </div>
</div>
</div>
  • The primary dropdown provides a low level of contrast and visual impact when placed on a white background. This is a good choice for situations where the dropdown does not need to be highlighted. This includes non-navigational applications, such as forms or other situations where input fields are grouped at the same level of hierarchy.
  • Example
Secondary Dropdown
 
  •     <div class="lp__dropdown_group lp__secondary_dropdown">
          <button class="lp__dropdown_toggle" title="dropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"><span class="lp__filter_option">Select a Region..</span>
          <span class="lp__dropdown_arrow"><i class="loop loop-chevron-down" aria-hidden="true"></i></span>
          </button>
          <ul class="lp__dropdown_menu dropdown-item">
            <li class="active"><a href="http://www.worldbank.org/en/region/afr">Africa</a></li>            
            <li><a href="http://www.worldbank.org/en/region/eap">East Asia and Pacific</a></li>                
            <li><a href="http://www.worldbank.org/en/region/eca">Europe and Central Asia</a></li>                
            <li><a href="http://www.worldbank.org/en/region/lac">Latin America and Caribbean</a></li>            
            <li><a href="http://www.worldbank.org/en/region/mena">Middle East and North Africa</a></li>         
            <li><a href="http://www.worldbank.org/en/region/sar">South Asia</a></li>              
          </ul>
        </div>
  • The secondary dropdown provides high level of contrast and visual impact when placed on a white background. This is a good choice for dropdowns that are meant to be a focal point on a page. This dropdown shares a color with the World Bank blue header and should never overlap or be directly adjacent to a header of the same color.
  • Where We Work:

    In this example the higher contrast Secondary Dropdown so it is visually hilighted as the primary point of interaction on the page.
Dropdown
 
  • 
    <div class="lp__dropdown_group lp__primary_dropdown">
          <button class="lp__dropdown_toggle" title="dropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><span class="lp__filter_option">Select a Region..</span><span class="lp__dropdown_arrow"><i class="loop loop-chevron-down" aria-hidden="true"></i></span>
          </button>
          <ul class="lp__dropdown_menu dropdown-item select-item">
            <li class="search-section">
                    <form class="input-group" role="search" name="searchbox" method="get">
                        <input type="text" onfocus="clearField(this)" placeholder="Search ..." class="search-input-field" id="search1" name="qterm" title="search">
                        <input class="search-submit-icon" type="image" src="../assets/img/search.svg" alt="listingsearch">
                        <input type="hidden" name="lang_exact" value="English">
                    </form>
                </li>
            <li data-original-index="0"><span class="text"><a class="countryfirstLevel" href="http://www.worldbank.org/en/country/afghanistan">Afghanistan</a></span></li>
    <li data-original-index="1"><span class="text"><a class="countryfirstLevel" href="http://www.worldbank.org/en/country/albania">Albania</a><span> - </span><a href="http://www.worldbank.org/sq/country/albania">shqip</a></span>
    </li>
    <li data-original-index="2"><span class="text"><a class="countryfirstLevel" href="http://www.worldbank.org/en/country/algeria">Algeria</a><span> - </span><a href="http://www.banquemondiale.org/fr/country/algeria">Français</a><span> - </span><a href="http://www.albankaldawli.org/ar/country/algeria/ar">عربي</a></span>
    </li>
    <li data-original-index="3"><span class="text"><a class="countryfirstLevel" href="http://www.worldbank.org/en/country/angola">Angola</a><span> - </span><a href="http://www.worldbank.org/pt/country/angola">Português</a></span>
    </li>
    
    <li data-original-index="9"><span class="text"><a class="countryfirstLevel" href="http://www.worldbank.org/en/region/mena/brief/gcc">Bahrain</a></span></li>
    <li data-original-index="10"><span class="text"><a class="countryfirstLevel" href="http://www.worldbank.org/en/country/bangladesh">Bangladesh</a></span></li>
    <li data-original-index="11"><span class="text"><a class="countryfirstLevel" href="http://www.worldbank.org/en/country/belarus">Belarus</a><span> - </span><a href="http://www.worldbank.org/ru/country/belarus">Русский</a></span>
    </li>
    <li data-original-index="26"><span class="text"><a class="countryfirstLevel" href="http://www.worldbank.org/en/country/canada">Canada</a><span> - </span><a href="http://www.banquemondiale.org/fr/country/canada">Français</a></span>
    </li>
    <li data-original-index="27"><span class="text"><a class="countryfirstLevel" href="http://www.worldbank.org/en/country/centralafricanrepublic">Central African Republic</a><span> - </span><a href="http://www.banquemondiale.org/fr/country/centralafricanrepublic">Français</a></span>
    </li>
    <li data-original-index="28"><span class="text"><a class="countryfirstLevel" href="http://www.worldbank.org/en/country/chad">Chad</a><span> - </span><a href="http://web.worldbank.org/WBSITE/EXTERNAL/ACCUEILEXTN/PAYSEXTN/AFRICAINFRENCHEXT/CHADINFRENCHEXT/0,,menuPK:464923~pagePK:141159~piPK:55000052~theSitePK:464694,00.html">Français</a></span>
    </li>
    <li data-original-index="29"><span class="text"><a class="countryfirstLevel" href="http://www.worldbank.org/en/country/chile">Chile</a><span> - </span><a href="http://www.bancomundial.org/es/country/chile">Español</a></span>
    </li>
    <li data-original-index="30"><span class="text"><a class="countryfirstLevel" href="http://www.worldbank.org/en/country/china">China</a><span> - </span><a href="http://www.shihang.org/zh/country/china">中文</a></span>
    </li>             
          </ul>
        </div><!-- End Button dropdown Style -->
  • This dropdown is useful in situations where there are a large number of options to choose from and space is especially limited. The integrated search option allows users to narrow the available selection to something more easily browsable before.

  • Country Dropdown is only visable on moblie screen widths.

    Where We Work:
Primary inverse Color variation

Using various options for customizing in background color add .lp__primary_inverse_dropdown class. This style should be used in most situations where the the background is neither standard white, or header blue.

Secondary inverse Color variation

Using various options for customizing in background color add .lp__secondary_inverse_dropdown class. This style is used almost exclusively for dropdowns that are placed in a blue banner (e.g. Women Business and the Law)