Using the Menu component with Avatar

[itaikeren]

Hey!
Start a new project and pick Mantine as the components library, so far really enjoy using it!

I'm building a dashboard with a top header (like in GitHub) and I want to create an Avatar which is clickable & opens a menu.
From what I saw, the Menu component only comes with the 3 dots placeholder, and no option to replace it with something else... (also, I'm not sure the arrowSize prop is working there)

I try to create a workaround like this:

<Avatar>
  <Menu>
    ....
  </Menu>
</Avatar>

But it's not working well (and when I add an image inside the Avatar it's not working at all).
I start rebuilding the Menu&Avatar component with the Popover component but it's not the same experience with a "pure" Menu component (with the MenuItem and MenuLabel components).

Any chance I'm missing something, or can you add this feature to the Menu component?

Thanks!
And amazing work again!

[rtivital]

Hi @itaikeren please see Menu documentation to learn how to replace menu control – https://mantine.dev/core/menu/#custom-control
I would recommend wrapping Avatar with UnstyledButton component and setting it as control prop for better accesibility.

[itaikeren]

Oh, I totally missed that section!
Also, I didn't know there is an UnstyledButton component

Thanks!