• Empleos
  • Sobre nosotros
  • profesionales
    • Inicio
    • Empleos
    • Cursos y retos
    • Preguntas
    • Profesores
  • empresas
    • Inicio
    • Publicar vacante
    • Nuestro proceso
    • Precios
    • Pruebas Online
    • Nómina
    • Blog
    • Comercial
    • Calculadora de salario

0

569
Vistas
Bootstrap 5 dropdown toggle not working, cant figure out why?
<div className="dropdown">
              <a
                className="dropdown-toggle d-flex align-items-center hidden-arrow"
                href="#"
                id="navbarDropdownMenuAvatar"
                role="button"
                data-mdb-toggle="dropdown"
                aria-expanded="false">
                <img
                  src="https://mdbcdn.b-cdn.net/img/new/avatars/2.webp"
                  className="rounded-circle"
                  height="50"
                  alt="Black and White Portrait of a Man"
                  loading="lazy"
                />
              </a>
              <ul
                className="dropdown-menu dropdown-menu-end"
                aria-labelledby="navbarDropdownMenuAvatar">
                <li>
                  <a className="dropdown-item" href="#">
                    My profile
                  </a>
                </li>
                <li>
                  <a className="dropdown-item" href="#">
                    Settings
                  </a>
                </li>
                <li>
                  <a className="dropdown-item" href="#">
                    Logout
                  </a>
                </li>
              </ul>
            </div>

Nothing happens when I click the image(dropdown toggle). I have included the JS file too the css is rendering fine but the toggle isnt working and no dropdown items are showing:

src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
    crossorigin="anonymous"
almost 3 years ago · Juan Pablo Isaza
1 Respuestas
Responde la pregunta

0

Replace data-mdb-toggle with data-bs-toggle
and d-flex with d-inline-flex to open the menu in the right place.

<link
  href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"  rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
  crossorigin="anonymous"
/>

<script
  src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"
  integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
  crossorigin="anonymous"
>
</script>

<div class="dropdown">
  <a
    class="dropdown-toggle d-inline-flex align-items-center hidden-arrow"
    href="#"
    id="navbarDropdownMenuAvatar"
    role="button"
    data-bs-toggle="dropdown"
    aria-expanded="false"
  >
    <img
      src="https://mdbcdn.b-cdn.net/img/new/avatars/2.webp"
      class="rounded-circle"
      height="50"
      alt="Black and White Portrait of a Man"
      loading="lazy"
    />
  </a>
  <ul
    class="dropdown-menu dropdown-menu-end"
    aria-labelledby="navbarDropdownMenuAvatar"
  >
    <li>
      <a class="dropdown-item" href="#">
        My profile
      </a>
    </li>
    <li>
       <a class="dropdown-item" href="#">
          Settings
        </a>
     </li>
     <li>
         <a class="dropdown-item" href="#">
            Logout
         </a>
     </li>
   </ul>
</div>

For more:
Bootstrap v5 Documentation: https://getbootstrap.com/docs/5.0/components/dropdowns/#examples

almost 3 years ago · Juan Pablo Isaza Denunciar
Responde la pregunta
Encuentra empleos remotos

¡Descubre la nueva forma de encontrar empleo!

Top de empleos
Top categorías de empleo
Empresas
Publicar vacante Precios Nuestro proceso Comercial
Legal
Términos y condiciones Política de privacidad
© 2025 PeakU Inc. All Rights Reserved.

Andres GPT

Recomiéndame algunas ofertas
Necesito ayuda