Pourquoi les éléments du menu déroulant n'apparaissent-ils pas ?

Question

J'utilise Bootstrap 5 pour ma barre de navigation. Le problème est que l'élément déroulant de l'icône de l'utilisateur (connexion) n'apparaît pas. Voici mon code :

<button class="btn dropdown-toggle" type="button" id="userDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                <i class="fa-solid fa-user text-white fs-5"></i>
            </button>
            <div class="dropdown-menu dropdown-menu-right" aria-labelledby="userDropdown">
                <a class="dropdown-item" href="#">Login</a>
            </div>

Answer 1

Pour Boostrap 5 il vous faut data-bs-toggle="dropdown" 而不是 data-toggle :

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" crossorigin="anonymous"></script>
    
<button class="btn dropdown-toggle" type="button" id="userDropdown" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    <i class="fa-solid fa-user text-white fs-5"></i>
</button>            
            
<div class="dropdown-menu dropdown-menu-right" aria-labelledby="userDropdown">
    <a class="dropdown-item" href="#">Login</a>
</div>