'Bootstrap 5 dropdown without bootstrap js

in my Angular app I have a header with icons/pics which I want to use as dropdowns. Code snippet looks as follows:

      <li class="nav-item dropdown">
          <a
            class="nav-link dropdown-toggle"
            href="#"
            id="navbarDropdownMenuLink"
            role="button"
            data-bs-toggle="dropdown"
            aria-expanded="false"
          >
            <img
              src="../../assets/images/icon_user_menu.png"
              width="18px"
              height="18px"
            />
            Username
          </a>
          <ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
            <li><a class="dropdown-item" href="#">Action</a></li>
            <li><a class="dropdown-item" href="#">Another action</a></li>
            <li><a class="dropdown-item" href="#">Something else here</a></li>
          </ul>

So... for a burger-menu I know (and I do) just add a typescript-method in the component.ts which changes the "open-class". But I really didn't find anything related to the dropdown stuff from bootstrap 5.

Is there a way to just apply a similar solution too? Maybe I over read sth. somewhere but I really cant find a solution for this to work.

Thanks in advance anyone!

Solution 1:^[1]

This is a way to make dropdowns using pure CSS

<!DOCTYPE html>
<html>
<head>
<style>

.dropbtn {
  user-select:none;
  background-color: #4CAF50;
  color: white;
  padding: 1rem;
  font-size: 16px;
  border: none;
  cursor: pointer;
  border-radius: .3rem
}
.dropbtn:focus{box-shadow: 0 0 0 .3rem #4CAF50AA;}

.dropbtn:active{
    box-shadow: 0 0 0 .4rem #4CAF50aa;
}

.dropdown {
  position: relative;
  display: inline-block;
  border_radius: .3rem;
}

.dropdown-content {
  display: none;
  position: absolute;
  top: 3.5rem;
  left: 1rem
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0 0 .1rem 0 rgba(0,0,0,0.2);
  z-index: 1;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}

.dropdown-content a:hover {background-color: #f1f1f1}

.dropdown:focus-within .dropdown-content {display: block;}

.dropdown:hover .dropbtn {background-color: #3e8e41;}
</style>
<body>
<div class="dropdown">
  <button class="dropbtn">Dropdown</button>
  <div class="dropdown-content">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
</div>
</body>
</html>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1

'Bootstrap 5 dropdown without bootstrap js

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]