[material-ui][Menu] Let buttons opening menus have an activated state

[fredrikcarlbom]

Summary

If having a couple of buttons, each opening a menu. It is confusing to me which button the menu is connected to as they do not have any visual indication.

Examples

Material Design has an Activated state which could be used to cover this.

Here is a sandbox with how this could be visualized: https://codesandbox.io/p/sandbox/menu-buttons-activated-state-yfpm57

Images from the sandbox above:

Activated state styling

Compared to existing default styling

Motivation

I want to make the connection between the button and the menu easier to understand, this might be useful if there are multiple menus next to each other, especially if they use icons instead of text.

While it is easy to implement in an application using MUI, I think the concept is important enough to warrant including it in MUI itself.

Search keywords: button menu activated

[DiegoAndai]

Thanks for the report @fredrikcarlbom! I added the waiting for 👍🏼 label so the community can vote for this new feature. If you want to see this implemented, please add a 👍🏼 reaction to the issue's description.

@zanivan @aarongarciah, what do you think? Should we provide this out of the box? or would it be better to just have a demo on achieving it?

[zanivan]

@DiegoAndai I think this should be provided out of the box. I’m not sure if it should be done now or wait for the next version, but my main argument is that the WAI-ARIA examples align with the proposed behavior.

[aarongarciah]

@DiegoAndai @zanivan if it's trivial to implement, I'd advocate for implementing it in v6.