Dropdown

Alterna las superposiciones contextuales para mostrar listas de enlaces y más con el complemento desplegable Resim.

Tipos de dropdowns

Para alinear el dropdown ,hay 3 formas que usa en la clase .dropdown__menu

• 1)Alinear a la izquierda .left
• 2)El por defecto es centrado
• 3)Alinear a la derecha .right

<div class="row">
   <div class="col-sm-12 flex jc--end">
      <div class="dropdown" id="drop1">
         <button class="btn btn--flat text-primary ripple" data-toggle="dropdown" data-target="#drop1">Left<span class="arrow-bottom"></span></button>
         <div class="dropdown__menu left">
            <a href="#item1" class="dropdown__link ripple">Item 1</a>
            <a href="#item2" class="dropdown__link ripple">Item 2</a>
            <a href="#item3" class="dropdown__link ripple">Item 3</a>            
            <a href="#item4" class="dropdown__link ripple">Something.....</a>
         </div>
      </div>
   </div>
   <div class="col-sm-12 flex jc--center">
      <div class="dropdown" id="drop2">
         <button class="btn btn--flat text-primary ripple" data-toggle="dropdown" data-target="#drop2">Center<span class="arrow-bottom"></span></button>
         <div class="dropdown__menu">
            <a href="#item1" class="dropdown__link ripple">Item 1</a>
            <a href="#item2" class="dropdown__link ripple">Item 2</a>
            <a href="#item3" class="dropdown__link ripple">Item 3</a>            
            <a href="#item4" class="dropdown__link ripple">Something.....</a>
         </div>
      </div>
   </div>
   <div class="col-sm-12 flex">
      <div class="dropdown" id="drop3">
         <button class="btn btn--flat text-primary ripple ripple" data-toggle="dropdown" data-target="#drop3">Right<span class="arrow-bottom"></span></button>
         <div class="dropdown__menu right">
            <a href="#item1" class="dropdown__link ripple">Item 1</a>
            <a href="#item2" class="dropdown__link ripple">Item 2</a>
            <a href="#item3" class="dropdown__link ripple">Item 3</a>            
            <a href="#item4" class="dropdown__link ripple">Something.....</a>
         </div>
      </div>
   </div>
</div>