Drop down menu with the trigger an 'image' (e.g. user avatar)

Wappler General How To
#1

Hey all, I’ve found the drop down nav menu item, which works fine - but I can’t find away to achieve the same result for when someone clicks on a users avatar, just like on this forum user icon/avatar in top right.

Any suggestions to convert the drop down nav item into an image, or another solution?

#2

You could try using the ‘popover’ tool and then you would be able to put whatever content you want inside it. Hope I understood your question.

#3

Thanks Brad, this alerted me to this function, this is going to be useful - it’s not really what I’m chasing though, as it will take some customization - which can be done. I’d simply like the native drop down functionality to perform on a users avatar (image). Just like this forum, top right if I click on my photo I get a drop down menu.

#4

Hello @mgaussie try please

HTML

<nav class="navbar navbar-dark bg-dark navbar-expand-sm">
  <a class="navbar-brand" href="#">
    <img src="https://s3.eu-central-1.amazonaws.com/bootstrapbaymisc/blog/24_days_bootstrap/logo_white.png" width="30" height="30" alt="logo">
    BootstrapBay
  </a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbar-list-4" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbar-list-4">
    <ul class="navbar-nav">
        <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          <img src="https://s3.eu-central-1.amazonaws.com/bootstrapbaymisc/blog/24_days_bootstrap/fox.jpg" width="40" height="40" class="rounded-circle">
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
          <a class="dropdown-item" href="#">Dashboard</a>
          <a class="dropdown-item" href="#">Edit Profile</a>
          <a class="dropdown-item" href="#">Log Out</a>
        </div>
      </li>   
    </ul>
  </div>
</nav>

CSS

 .bg-custom-1 {
  background-color: #85144b;
}

.bg-custom-2 {
background-image: linear-gradient(15deg, #13547a 0%, #80d0c7 100%);
}
1 Like
#5

This is great, thank you so much! Just got to work on the positioning of the drop down (as I have this on the far right) and then this will be perfect.

2 Likes
#6

Alight right worked a treat. Thank you again.

2 Likes