mutton in the
wild? Tell us
in a comment!
Highlights
- Fresh UI pattern
- Frees space
- Keeps functions handy
UI Pattern: Mutton (Menu + Button)
Though this is my current favorite UI pattern, I have to admit I giggle whenever the name comes up. Only after we’d added these to Strands did I read (in an actual book) what some people are calling them, though I wonder if there’s something less goofy we could use. The combination of menu and button is called… wait… here it comes… the “mutton”.
Muttons are a great solution for freeing space while keeping a primary action visually prominent. Like functions are placed in a drop-down menu which forms the right side of the component, therefore firmly establishing the functional similarities. One way of thinking of this is “hey, I’m the main action but these guys are with me”.
Yahoo uses one for their many email options:
WordPress uses one for content adding:
Gmail has a fun variation for selection, essentially a checkbox + menu:
Strands is using muttons on their Share Something menu, but these menus also include the primary function. This is because the button does not include text and further explanation is useful.
I’m curious to see how this UI pattern evolves or is at least ultimately defined. The mutton seems very natural to me and I don’t think it’s likely to be frequently abused, but you never know. Have fun if you use ‘em!
Because the button is the more prominent and the menu is only displayed after the button is clicked I believe it is a cataclysmic injustice to give the menu “top billing” over the button y referring to it as the “mutton”. The menu is obviously subservient to the button and without the button the menu might never exist ( or at least become visible). Simply stated- I have a button therefor I am a menu. I implore you to call them the Bumenu or even Butnu.
The menu can be displayed without clicking the button – just hover. On the topic of the name, well, time will tell
What a nice little bit of UI – might have to keep my eye out for an opportunity to use a mutton in future!
Ain’t this a Split Button?
Possibly… I haven’t heard the term “split button” before. Sounds less goofy than “mutton”, that’s for sure, but doesn’t say anything about the menu.