Estou usando o Bootstrap 4 para criar uma página. Está tudo indo bem, o dropdown funciona, a questão é que queria colocar dois dropdowns, mas dois estão puxando o mesmo dropdown.
<nav id="navbar" class="nav nav-pills nav-justified">
<a class="nav-item nav-link active" href="#"><i class="fas fa-user-circle"></i> Perfil</a>
<a class="nav-item nav-link" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" role="button" id="mensagensDropdown" href="#"><i class="fas fa-envelope"></i> Mensagens <span class="badge badge-primary">10</span></a>
<div class="dropdown-menu" id="chatMenu" aria-labelledby="mensagensDropdown">
Mensagens
</div>
<a class="nav-item nav-link" id="notifications" aria-haspopup="true" aria-extended="false" role="button" data-toggle="dropdown" href="#"><i class="fas fa-bell"></i> Notificações <span class="badge badge-primary">3</span></a>
<div class="dropdown-menu" id="notificationsMenu" aria-labelledby="notifications">
Notificações
</div>
</nav>
Desde já agradeço a ajuda de vocês.