Como fechar a navbar do Bootstrap depois de clicar?

João E. -

Problema: Barra de Navegação Bootstrap Permanece Aberta Após Clique

A barra de navegação Bootstrap é um componente comum, mas pode permanecer aberta depois que um link é clicado em dispositivos móveis. Isso pode confundir os visitantes e bloquear a visualização do conteúdo da página. Fechar a barra de navegação automaticamente após um clique em um link melhoraria a experiência do usuário e a navegação no site.

Soluções para Fechar a Navbar do Bootstrap

Usando Listeners de Eventos JavaScript

Para fechar a navbar do Bootstrap após clicar em um link, você pode adicionar listeners de eventos de clique aos links da navbar. Este método usa JavaScript para detectar quando um link é clicado e então fecha a navbar.

Aqui está um trecho de código que mostra essa abordagem:

const navLinks = document.querySelectorAll('.nav-item')
const menuToggle = document.getElementById('navbarSupportedContent')
const bsCollapse = bootstrap.Collapse.getOrCreateInstance(menuToggle, {toggle: false})
navLinks.forEach((l) => {
    if (menuToggle.classList.contains('show')) {
        l.addEventListener('click', () => { 
            bsCollapse.toggle() 
        })
    }
})

Este código seleciona todos os links da navbar, adiciona um listener de evento de clique a cada um, e alterna o colapso da navbar quando um link é clicado. O método bootstrap.Collapse.getOrCreateInstance() controla o comportamento de colapso da navbar.

Dica: Prevenindo o Comportamento Padrão

Para prevenir o comportamento padrão do link (por exemplo, navegar para uma nova página) ao fechar a navbar, você pode adicionar event.preventDefault() ao seu manipulador de eventos de clique:

l.addEventListener('click', (event) => {
    event.preventDefault();
    bsCollapse.toggle();
})

Isso pode ser útil se você quiser fechar a navbar antes de navegar para a nova página ou se estiver usando roteamento de aplicativo de página única.

Implementando Atributos de Dados

Outro método para fechar a navbar do Bootstrap após clicar em um link é usar os atributos de dados incorporados do Bootstrap. Esta abordagem não precisa de JavaScript e usa a funcionalidade própria do Bootstrap.

Para usar este método, adicione data-bs-toggle="collapse" e data-bs-target=".navbar-collapse.show" a cada link da navbar:

<ul class="navbar-nav me-auto">
    <li class="nav-item active">
        <a class="nav-link" href="#" data-bs-toggle="collapse" data-bs-target=".navbar-collapse.show">Início</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#" data-bs-toggle="collapse" data-bs-target=".navbar-collapse.show">Link</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="#" data-bs-toggle="collapse" data-bs-target=".navbar-collapse.show">Outro Link</a>
    </li>
</ul>

Esses atributos de dados informam ao Bootstrap para alternar o estado de colapso da navbar quando um link é clicado. O seletor .navbar-collapse.show direciona a navbar aberta, fechando-a quando um link é selecionado.

Ambos os métodos melhoram a experiência do usuário em dispositivos móveis ao fechar a navbar após um link ser clicado.