Listas suspensas de inicialização

Lista suspensa básica

Um menu suspenso é um menu alternável que permite ao usuário escolher um valor de uma lista predefinida:

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.

A .caretclasse cria um ícone de seta circunflexa (), que indica que o botão é uma lista suspensa.

Adicione a .dropdown-menuclasse a um <ul>elemento para realmente criar o menu suspenso.

Divisor suspenso

A .dividerclasse é usada para separar links dentro do menu suspenso com uma borda horizontal fina:

Cabeçalho suspenso

A .dropdown-headerclasse é usada para adicionar cabeçalhos dentro do menu suspenso:

Desativar e itens ativos

Realce um item suspenso específico com a classe .active (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):

Posição suspensa

Para alinhar a lista suspensa à direita, adicione a .dropdown-menu-rightclasse ao elemento com .dropdown-menu:

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":

Acessibilidade suspensa

Para ajudar a melhorar a acessibilidade para pessoas que usam leitores de tela, você deve incluir os seguintes atributos rolee aria-*atributos ao criar um menu suspenso:

<div class="">
  <button 
  class="btn btn-primary ">
  Dropdown Example
  <span class="caret"></span></button>
  <ul class="">
    <li><a href="#">HTML</a></li>
    <li><a href="#">CSS</a></li>
    <li><a href="#">JavaScript</a></li>
  </ul>
</div>

Referência Suspensa Completa do Bootstrap

Para uma referência completa de todas as opções suspensas, métodos e eventos, acesse nossa Referência suspensa do Bootstrap JS .