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

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?

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.

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.

Hello @mgaussie try please


<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">
  <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>
  <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">
        <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>


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

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

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.


Alight right worked a treat. Thank you again.