[menu] Let buttons opening menus have an activated state
Nobody has claimed this yet.
- Dominant language
- JavaScript
- Stars
- 99.1k
- Forks
- 32.5k
- Avg merge
- 2d 17h
- Merged PRs (30d)
- 106
Description
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
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the linked CodeSandbox to understand the proposed activated-state styling and compare it with the existing button and menu behavior in MUI. Define what visual state should appear while a menu is open, including how it should work for adjacent or icon-only menu buttons; completion requires an agreed design and corresponding component behavior.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- javascript, react
- Domain
- design, frontend
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 35/100