Custom MenuBar Item, for Profile Menu

Hey, i’m trying to build a “dropdown” Profile Menu like on vaadin.com. Sadly there is no Component for stuff like that.
Therefor im trying to build it my self using the MenuBar Component.

Is there a way to use an Avatar as trigger for MenuBar subMenu?
i know i can just make the Button nesting the avatar not be visible by removing background, etc. but i want the click also only be possible on the avatar and i dont really like the way it works now.

Any help or Ideas?

Just use MenuBar and set it to use the “tertiary” style variant.

What do you not like about the way it works?

Thanks for the help “LUMO_TERTIARY_INLINE” worked for me. although when “unselecting” the Menubar Item, the button behind the avatar flashes one time. do you know right away what triggers this?

it’s a transition animation in the component’s css

If you want to get rid of the subtle background color applied when the dropdown is open, as well as that animation, this css should do the trick:

  background: transparent;
}```

Thanks, your suggested snippet does not work sadly. But there is no background in general. just when deselecting the menubaritem.

i’ll look for the according transition

I found, that the transition comes from:

    transition: opacity 1.4s, transform 0.1s;
    transition-behavior: normal, normal;
    transition-duration: 1.4s, 0.1s;
    transition-timing-function: ease, ease;
    transition-delay: 0s, 0s;
    transition-property: opacity, transform;
    filter: blur(8px);
}```

I now just need to find a way to change this just for my menubar

cant think of a way as of right now

Hmm, I suppose we need to target both ::before and ::after pseudo-elements, so this should work:

vaadin-menu-bar-button::before, vaadin-menu-bar-button::after {
  background-color: transparent;
}```
(if you put it in styles.css or some other global stylesheet)

And if you want that for a specific menubar, add a classname to it and target that in addition to the element name:

  background-color: transparent;
}```

Well, that’s for V24. Perhaps you’re on an older version?

im on V24 it works perfectly thank you so much.

:+1: