Mutton Spotting
Have you seen a
mutton in the
wild? Tell us
in a comment!
Mega Drop-Downs
Another interesting UI pattern: Mega drop down menus

Highlights

  • Fresh UI pattern
  • Frees space
  • Keeps functions handy

UI Pattern: Mutton (Menu + Button)

Simplifying, space saving, function focused UI pattern

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!

Related Posts:

5

5 Responses to “UI Pattern: Mutton (Menu + Button)”

  1. 1
    November 17, 2010 at 12:36 am

    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.

    • 1.1
      Weszt | Reply
      November 17, 2010 at 8:32 pm

      The menu can be displayed without clicking the button – just hover. On the topic of the name, well, time will tell ;)

  2. 2
    November 26, 2010 at 9:17 am

    What a nice little bit of UI – might have to keep my eye out for an opportunity to use a mutton in future!

  3. 3
    Nils | Reply
    November 27, 2010 at 8:49 am

    Ain’t this a Split Button?

    • 3.1
      Weszt | Reply
      November 27, 2010 at 3:55 pm

      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.

Leave a Reply