• Empleos
  • Bootcamp
  • Acerca de nosotros
  • Para profesionales
    • Inicio
    • Empleos
    • Cursos y retos
    • Preguntas
    • Profesores
    • Bootcamp
  • Para empresas
    • Inicio
    • Nuestro proceso
    • Precios
    • Pruebas
    • Nómina
    • Blog
    • Comercial
    • Calculadora de salario

0

390
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"
9 months 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

9 months 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 empleo Precios Nuestro proceso Comercial
Legal
Términos y condiciones Política de privacidad
© 2023 PeakU Inc. All Rights Reserved.