search

Home  >  Q&A  >  body text

Why don't the drop-down menu items show up?

My navigation bar uses Bootstrap 5. The problem is that the dropdown item for the user icon (login) is not showing up. This is my 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>

P粉304704653P粉304704653468 days ago622

reply all(1)I'll reply

  • P粉546257913

    P粉5462579132023-09-13 14:05:48

    For Boostrap 5, you need data-bs-toggle="dropdown" instead of 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> 

    reply
    0
  • Cancelreply