Bootstrap 5 dropdown without bootstrap js

Question

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!

Can you tell what do you want to do in different words?

Konrad
– Konrad

2022-04-13 20:46:17 +00:00
Commented Apr 13, 2022 at 20:46 — Konrad
– Konrad, Commented Apr 13, 2022 at 20:46

black-purple · Accepted Answer · 2022-04-13 18:52:09Z

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>

Collectives™ on Stack Overflow

Bootstrap 5 dropdown without bootstrap js

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related