Recomendações de cursos:

Lista suspenso do Bootstrap 5

Lista suspenso básica

Exemplo

O menu suspenso é um menu alternativo que permite ao usuário escolher um valor da lista pré-definida:
  <div class="dropdown">
    <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">
  Botão suspenso
  <ul class="dropdown-menu">
    <li><a class="dropdown-item" href="#">Link 1</a></li>
    <li><a class="dropdown-item" href="#">Link 2</a></li>
    <li><a class="dropdown-item" href="#">Link 3</a></li>
  </ul>
</div>

Experimente pessoalmente

</button>

Exemplo de explicação .dropdown

Para abrir o menu suspenso, use a classe que indica o menu suspenso. .dropdown-toggle 类和 Classe e data-toggle="dropdown"

Atributo .dropdown-menu Classe para <div> Elemento, para realmente construir o menu suspenso. Em seguida, adicione a classe .dropdown-item Classe adicionada a cada elemento do menu suspenso (link ou botão).

Linha divisória do menu suspenso

.dropdown-divider Classe para separar links no menu suspenso com uma linha horizontal fina:

Exemplo

<li><hr class="dropdown-divider"></hr></li>

Experimente pessoalmente

Título do menu suspenso

.dropdown-header Classe para adicionar títulos ao menu suspenso:

Exemplo

<li><h5 class="dropdown-header">Cabeçalho do menu suspenso 1</h5></li>

Experimente pessoalmente

itens desativados e ativos

Use .active Classe para realçar um item específico do menu suspenso (adiciona cor de fundo azul).

Para desativar um item no menu suspenso, use .disabled Classe (que ganha cor de texto suave e ícone "no-parking-sign" ao passar o mouse por cima).

Exemplo

<li><a class="dropdown-item" href="#">Normal</a></li>
<li><a class="dropdown-item active" href="#">Ativo</a></li>
<li><a class="dropdown-item disabled" href="#">Desativado</a></li>

Experimente pessoalmente

Posição do menu suspenso

Você também pode usar .dropend ou .dropstart Adicione a classe ao elemento suspenso para criar menus "dropend" ou "dropstart". Observe que o sinal de inserção/seta é adicionado automaticamente:

Dropright

<div class="dropdown dropend">

Experimente pessoalmente

Esquerda

<div class="dropdown dropstart">

Experimente pessoalmente

Alinhar à direita o menu suspenso

Para alinhar à direita o menu suspenso, utilize .dropdown-menu-end Adicione a classe .dropdown-menu os elementos:

Exemplo

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

Experimente pessoalmente

Subir

Se você desejar que o menu suspenso se abra para cima em vez de para baixo, altere o elemento <div> com class="dropdown" para "dropup"：

Exemplo

<div class="dropup">

Experimente pessoalmente

Texto de rolamento

.dropdown-item-text Classe usada para adicionar texto puro aos itens de rolamento ou para adicionar estilo de link padrão aos links.

Exemplo

<ul class="dropdown-menu">
  <li><a class="dropdown-item" href="#">Link 1</a></li>
  <li><a class="dropdown-item" href="#">Link 2</a></li>
  <li><a class="dropdown-item" href="#">Link 3</a></li>
  <li><a class="dropdown-item-text" href="#">Link de texto</a></li>
  <li><span class="dropdown-item-text">Texto puro</span></li>
</ul>

Experimente pessoalmente

Combinação de botões e lista suspensa

Exemplo

<div class="btn-group">
  <button type="button" class="btn btn-primary">Huawei</button>
  <button type="button" class="btn btn-primary">DJI</button>
  <div class="btn-group">
    <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">Xiaomi</button>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">Celular</a></li>
      <li><a class="dropdown-item" href="#">Tablet</a></li>
    </ul>
  </div>
</div>

Experimente pessoalmente

Combinação vertical de botões e lista suspensa

Exemplo

<div class="btn-group-vertical">
  <button type="button" class="btn btn-primary">Huawei</button>
  <button type="button" class="btn btn-primary">DJI</button>
  <div class="btn-group">
    <button type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">Xiaomi</button>
    <ul class="dropdown-menu">
      <li><a class="dropdown-item" href="#">Celular</a></li>
      <li><a class="dropdown-item" href="#">Tablet</a></li>
    </ul>
  </div>
</div>

Experimente pessoalmente