Bootstrap 4 dropdowns
Lista suspensa básica
Um menu suspenso é um menu alternável que permite ao usuário escolher um valor de uma lista predefinida:
Exemplo
<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>
Exemplo explicado
A .dropdownclasse indica um menu suspenso.
Para abrir o menu suspenso, use um botão ou um link com uma classe de .dropdown-togglee o
data-toggle="dropdown"atributo.
Adicione a .dropdown-menuclasse a um <div>elemento para realmente construir o menu suspenso. Em seguida, adicione a
.dropdown-itemclasse a cada elemento (links ou botões) dentro do menu suspenso.
Divisor suspenso
A .dropdown-dividerclasse é usada para separar links dentro do menu suspenso com uma borda horizontal fina:
Exemplo
<div class="dropdown-divider"></div>
Cabeçalho suspenso
A .dropdown-headerclasse é usada para adicionar cabeçalhos dentro do menu suspenso:
Exemplo
<div class="dropdown-header">Dropdown header 1</div>
Desativar e itens ativos
Realce um item suspenso específico com a .activeclasse (adiciona uma cor de fundo azul).
Para desativar um item no menu suspenso, use a .disabledclasse (obtém uma cor de texto cinza claro e um ícone de "sinal de proibição de estacionamento" ao passar o mouse):
Exemplo
<a class="dropdown-item active" href="#">Active</a>
<a class="dropdown-item disabled" href="#">Disabled</a>
Posição suspensa
Você também pode criar um menu "dropright" ou "dropleft", adicionando a classe .droprightou .dropleftao elemento suspenso. Observe que o acento circunflexo/seta é adicionado automaticamente:
Dropright
<div class="dropdown dropright">
Dropleft
<div class="dropdown dropleft">
Menu suspenso à direita
Para alinhar o menu suspenso à direita, adicione a .dropdown-menu-rightclasse ao elemento com .dropdown-menu:
Exemplo
<div class="dropdown-menu dropdown-menu-right">
Soltar-se
Se você quiser que o menu suspenso se expanda para cima em vez de para baixo, altere o elemento <div> com class="dropdown" para "dropup":
Exemplo
<div class="dropup">
Texto suspenso
A .dropdown-item-textclasse é usada para adicionar texto simples a um item suspenso ou usada em links para o estilo de link padrão.
Exemplo
<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>
Botões agrupados com uma lista suspensa
Exemplo
<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>
Listas suspensas de botão dividido
Exemplo
<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>
Grupo de botões verticais com menu suspenso
Exemplo
<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>
Referência completa do menu suspenso do Bootstrap 4
Para uma referência completa de todas as opções suspensas, métodos e eventos, acesse nossa Referência suspensa do Bootstrap 4 JS .