Bootstrap 4 Dropdowns

Un menú desplegable es un menú conmutable que permite al usuario elegir un valor de una lista predefinida.

Dropdown botón Bootstrap 4

Ejm

div class="dropdown">
  <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
    Dropdown button
  </button>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">Link 1</a>
    <a class="dropdown-item" href="#">Link 2</a>
    <a class="dropdown-item" href="#">Link 3</a>
  </div>
</div>

Ejemplo explicado

La clase .dropdown indica que se trata de un menú desplegable.

Para abrir un menú desplegable utilizamos un botón o un link con la clase .drogdown-toggle y el atributo data-toggle=”dropdown”.

Agrega la clase .dropdown-menu a un elemento <div> para construir realmente el menú desplegable. Luego agrega la clase .dropdown-item a cada elemento (enlaces o botones) dentro del menú desplegable.

Divisor desplegable

La clase .dropdown-divisor se usa para separar enlaces dentro del menú desplegable con un borde horizontal delgado.

Ejm

<div class="container">
  <h2>Dropdowns</h2>
  <p>The .dropdown-divider class is used to separate links inside the dropdown
  menu with a thin horizontal line:</p>
  <div class="dropdown">
    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
      Dropdown button
    </button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Link 1</a>
      <a class="dropdown-item" href="#">Link 2</a>
      <a class="dropdown-item" href="#">Link 3</a>
      <div class="dropdown-divider"></div>
      <a class="dropdown-item" href="#">Another link</a>
    </div>
  </div>
</div>

Encabezado desplegable

La clase .dropdown-header se usa para agregar encabezados dentro del menú desplegable.

Ejm

<div class="container">
  <h2>Dropdowns</h2>
  <p>The .dropdown-header class is used to add headers inside the dropdown menu:</p>
  <div class="dropdown">
    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
      Dropdown button
    </button>
    <div class="dropdown-menu">
      <h5 class="dropdown-header">Dropdown header</h5>
      <a class="dropdown-item" href="#">Link 1</a>
      <a class="dropdown-item" href="#">Link 2</a>
      <a class="dropdown-item" href="#">Link 3</a>
      <h5 class="dropdown-header">Dropdown header</h5>
      <a class="dropdown-item" href="#">Another link</a>
    </div>
  </div>
</div>

Activar y deshabilitar items

Resalta un elemento desplegable específico con la clase .active (agrega un color de fondo azul). Para deshabilitar un elemento en el menú desplegable, use la clase .disabled (obtiene un color de texto gris claro y un icono de “señal de no estacionarse” al pasar el mouse).

Ejm

<div class="container">
  <h2>Dropdowns</h2>
  <p>The .active class adds a blue background color to the active link.</p>
  <p>The .disabled class disables a dropdown item
  (grey text color and a no-parking-sign on hover).</p>
  <div class="dropdown">
    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
      Dropdown button
    </button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Normal</a>
      <a class="dropdown-item active" href="#">Active</a>
      <a class="dropdown-item disabled" href="#">Disabled</a>
    </div>
  </div>
</div>

Posición desplegable

También puedes crear un menú “dropright” o “dropleft”, agregando la clase .dropright o .dropleft al elemento desplegable. Ten en cuenta que el cursor / flecha se agrega automáticamente:

Dropright o Dropleft Bootstrap 4

Ejm Dropright

<div class="dropdown dropright">

Ejm Dropleft

<div class="dropdown dropleft">

Menú desplegable a la derecha

Para alinear a la derecha el menú desplegable, agrega la clase .dropdown-menu-right al elemento con .dropdown-menu.

Dropdown a la derecha Bootstrap 4

Ejm

<div class="dropdown-menu dropdown-menu-right">

Dropup (Menú desplegable hacia arriba)

Si deseas que el menú desplegable se expanda hacia arriba en lugar de hacia abajo, cambie el elemento <div> con class = “dropdown” a “dropup”.

Ejm

<div class="dropup">

Texto desplegable

La clase .dropdown-item-text se usa para agregar texto sin formato a un elemento desplegable, o se usa en enlaces para el estilo de enlace predeterminado.

Ejm

<div class="container">
  <h2>Dropdowns</h2>
  <p>The .dropdown-item-text class is used to add plain text
  to a dropdown, or used on links for default link styling.</p>                                         
  <div class="dropdown">
    <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
      Dropdown button
    </button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Link 1</a>
      <a class="dropdown-item" href="#">Link 2</a>
      <a class="dropdown-item-text" href="#">Text Link</a>
      <span class="dropdown-item-text">Just Text</span>
    </div>
  </div>
</div>

Botones agrupados con un menú desplegable

Botones agrupados con un menú desplegable Bootstrap 4

Ejm

<div class="container">
  <h2>Nesting Button Groups</h2>
  <p>Nest button groups to create dropdown menus:</p>
  <div class="btn-group">
    <button type="button" class="btn btn-primary">Apple</button>
    <button type="button" class="btn btn-primary">Samsung</button>
    <div class="btn-group">
      <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
      Sony
      </button>
      <div class="dropdown-menu">
        <a class="dropdown-item" href="#">Tablet</a>
        <a class="dropdown-item" href="#">Smartphone</a>
      </div>
    </div>
  </div>
</div>

Botones desplegables divididos

Botones desplegables divididos Bootstrap 4

Ejm

<div class="container">
  <h2>Dropdown Split Buttons</h2>
  <div class="btn-group">
    <button type="button" class="btn btn-primary">Primary</button>
    <button type="button" class="btn btn-primary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown">
    </button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Link 1</a>
      <a class="dropdown-item" href="#">Link 2</a>
    </div>
  </div>
  
  <div class="btn-group">
    <button type="button" class="btn btn-secondary">Secondary</button>
    <button type="button" class="btn btn-secondary dropdown-toggle dropdown-toggle-split" data-toggle="dropdown">
    </button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Link 1</a>
      <a class="dropdown-item" href="#">Link 2</a>
    </div>
  </div>

  <div class="btn-group">
    <button type="button" class="btn btn-success">Success</button>
    <button type="button" class="btn btn-success dropdown-toggle dropdown-toggle-split" data-toggle="dropdown">
    </button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Link 1</a>
      <a class="dropdown-item" href="#">Link 2</a>
    </div>
  </div>

  <div class="btn-group">
    <button type="button" class="btn btn-info">Info</button>
    <button type="button" class="btn btn-info dropdown-toggle dropdown-toggle-split" data-toggle="dropdown">
    </button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Link 1</a>
      <a class="dropdown-item" href="#">Link 2</a>
    </div>
  </div>

  <div class="btn-group">
    <button type="button" class="btn btn-warning">Warning</button>
    <button type="button" class="btn btn-warning dropdown-toggle dropdown-toggle-split" data-toggle="dropdown">
    </button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Link 1</a>
      <a class="dropdown-item" href="#">Link 2</a>
    </div>
  </div>

  <div class="btn-group">
    <button type="button" class="btn btn-danger">Danger</button>
    <button type="button" class="btn btn-danger dropdown-toggle dropdown-toggle-split" data-toggle="dropdown">
    </button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Link 1</a>
      <a class="dropdown-item" href="#">Link 2</a>
    </div>
  </div>
</div>

Grupo de botones verticales con / desplegable

Grupo de botones verticales con / desplegable Bootstrap 4

Ejm

<div class="container">
  <h2>Vertical Button Group with Dropdown</h2>
  <div class="btn-group-vertical">
    <button type="button" class="btn btn-primary">Apple</button>
    <button type="button" class="btn btn-primary">Samsung</button>
    <div class="btn-group">
      <button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
        Sony
      </button>
      <div class="dropdown-menu">
        <a class="dropdown-item" href="#">Tablet</a>
        <a class="dropdown-item" href="#">Smartphone</a>
      </div>
    </div>
  </div>
</div>