Como adicionar submenus suspensos ao Bootstrap?

Solução baseada em CSS para Bootstrap 5

Para adicionar submenus suspensos no Bootstrap 5, você pode usar CSS personalizado. Este método se concentra no posicionamento dos submenus e na adição de efeitos de hover para itens do menu.

Aqui está um exemplo de CSS para posicionamento de submenu:

.dropdown-submenu {
  position: relative;
}

.dropdown-submenu .dropdown-menu {
  top: 0;
  left: 100%;
  margin-top: -1px;
}

Este CSS posiciona o submenu à direita do item de menu pai. Para adicionar efeitos de hover, inclua o seguinte:

.navbar-nav li:hover > ul.dropdown-menu {
  display: block;
}

Este CSS exibe o submenu quando o item de menu pai é passado o mouse por cima.

@media (max-width: 768px) {
  .dropdown-submenu .dropdown-menu {
    left: 0;
    top: 100%;
  }
}

Abordagem Aprimorada com JavaScript

Para mais controle sobre o comportamento do submenu, você pode usar JavaScript. Este método ajuda a evitar o fechamento do submenu e adiciona funcionalidade de exibição toggle.

Aqui está um exemplo de JavaScript:

let dropdowns = document.querySelectorAll('.dropdown-toggle')
dropdowns.forEach((dd) => {
  dd.addEventListener('click', function (e) {
    var el = this.nextElementSibling
    el.style.display = el.style.display === 'block' ? 'none' : 'block'
  })
})

Este script evita que o submenu feche quando o dropdown pai está aberto. Ele alterna a exibição do submenu entre 'block' e 'none' quando clicado.

Submenus Dropdown da Barra de Navegação Apenas com CSS

Você pode criar submenus dropdown na barra de navegação sem JavaScript. Este método usa CSS para estilizar menus dropdown aninhados e ativar submenus ao passar o mouse.

Para estilizar menus dropdown aninhados, use este CSS:

.dropdown-submenu {
  position: relative;
}

.dropdown-submenu .dropdown-menu {
  top: 0;
  left: 100%;
  margin-top: -1px;
}

Este CSS posiciona o submenu à direita do item do menu pai, criando uma aparência aninhada.

Para ativar submenus ao passar o mouse, adicione este CSS:

.navbar-nav li:hover > ul.dropdown-menu {
  display: block;
}

Esta regra CSS mostra o submenu quando você passa o mouse sobre o item do menu pai, criando uma experiência de navegação suave.

Implementação de Submenu no Bootstrap 4

O Bootstrap 4 necessita de alterações no CSS para adicionar submenus dropdown. Aqui está um exemplo de CSS para o Bootstrap 4:

.navbar-nav li:hover > ul.dropdown-menu {
    display: block;
}
.dropdown-submenu {
    position: relative;
}
.dropdown-submenu > .dropdown-menu {
    top: 0;
    left: 100%;
    margin-top: -6px;
}

Este CSS posiciona o submenu à direita do seu elemento pai e o exibe ao passar o mouse.

Para opções de submenu baseadas em clique, você pode usar esta função JavaScript:

$('.dropdown-menu a.dropdown-toggle').on('click', function(e) {
  if (!$(this).next().hasClass('show')) {
    $(this).parents('.dropdown-menu').first().find('.show').removeClass('show');
  }
  var $subMenu = $(this).next('.dropdown-menu');
  $subMenu.toggleClass('show');
  return false;
});

Este script alterna a classe 'show' no submenu quando clicado, permitindo navegação baseada em clique.

<li class="nav-item dropdown">
  <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown
  </a>
  <div class="dropdown-menu" aria-labelledby="navbarDropdown">
    <!-- Itens do dropdown aqui -->
  </div>
</li>

Suporte Legado para Bootstrap 3

Para o Bootstrap 3, você precisa de CSS personalizado para criar submenus dropdown. Aqui está um exemplo:

.dropdown-submenu {
    position: relative;
}
.dropdown-submenu > .dropdown-menu {
    top: 0;
    left: 100%;
    margin-top: -6px;
    margin-left: -1px;
    border-radius: 0 6px 6px 6px;
}
.dropdown-submenu:hover > .dropdown-menu {
    display: block;
}

Este CSS posiciona o submenu e o exibe ao passar o mouse.

A estrutura HTML para dropdowns aninhados no Bootstrap 3 se parece com isto:

<li class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
    <ul class="dropdown-menu">
        <li class="dropdown-submenu">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Submenu</a>
            <ul class="dropdown-menu">
                <li><a href="#">Item do submenu 1</a></li>
                <li><a href="#">Item do submenu 2</a></li>
            </ul>
        </li>
    </ul>
</li>

Esta estrutura cria um dropdown com um submenu aninhado, permitindo navegação em vários níveis no Bootstrap 3.