HTML menu dropdown não funciona

[Alice Braga]

<nav class="navbar navbar-expand-sm bg-dark navbar-dark"> <!--principal->



          <div class="container-fluid">  <!--largura total-->

             <button type="button" class="navbar-toggler collapsed" data-toggle="collapse"> <!--menu toggle -->

              <span class="navbar-toggler-icon"></span> 

            </button>

           


             <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1"> <!--para agrupar e ocultar-->

                <ul class="navbar-nav">

                   <li class="nav-item"><a href="#" class="nav-link">Home</a>

                   </li>



<div class="dropdown">

                    <a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">

                   About

                  </a>

                   <div class="dropdown-menu" >

                    <a class="dropdown-item" href="#">Introduction to SmartMenus jQuery </a>

                    <a class="dropdown-item" href="#">Themes</a>

                    <a class="dropdown-item" href="#">The autor</a>

                    <a class="dropdown-item" href="#">Old SmartMenusVersions</a>

                    <div class="dropdown-divider"></div>

                    <a class="dropdown-item" href="#">The Company</a>

                  </div>

                </div>



               


                   <li class="nav-item"><a href="#" class="nav-link">Download</a>

                   </li>



                   

                   <li class="nav-item dropdown">

                    <a class="nav-link dropdown-toggle" href="#" id="navbarScrollingDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">

                  Support

                  </a>

                   

                   <li class="nav-item"><a href="#" class="nav-link">Docs</a>

                   </li>

               

                   

                </ul>

                </div>

</nav>

</div>

[GabrielSennaMs]

@Alice Braga

 

Pela classes utilizadas no seu HTML você está usando Boostrap >= 5, fica a duvida se você adicionou a parte de Javascript do Boostrap no seu elemento head.

 

Para o Boostrap 5

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>

 

Com isso o seu dropdown deve funcionar!

 

Obs..: Tem alguns erros no seu HTML, no link de suporte falto você adicionar o elemento com os elementos para o dropdown-menu e fechar o elemento </li>

 

<li class="nav-item dropdown">
    <a 
        class="nav-link dropdown-toggle" 
        href="#" 
        role="button"
        data-bs-toggle="dropdown"
        aria-expanded="false"
    >
        Support
    </a>
    <div class="dropdown-menu">
        <a class="dropdown-item" href="#">Introduction to SmartMenus jQuery </a>
    </div>
</li>

 

[Alice Braga]

@GabrielSennaMs estou usando a versão 4.1.3

 também adicionei o jquery, mas não funciona. 

 

 

 

[GabrielSennaMs]

@Alice Braga Se esse for o caso então seu HTML está errado porque na versão Boostrap <= 4 a propriedade para utilizar o 'dropdown' é "data-toggle="dropdown"

 

De uma olhada na documentação do navbar aqui no site oficial https://getbootstrap.com/docs/4.6/components/navbar/

[Alice Braga]

@GabrielSennaMs Era isso mesmo. 

"data-bs-toggle" tirei o bs dali e deu certo.

obrigada