Align width of dropdown menu to?

Question

In the past I ran often into the problem, that I did not know how to decide the width of a dropdown menu. I as a designer don’t mind to just eyeball a good-looking width, but developers would love to see some system behind it.
In the given example (google current) the width is 192px. The dropdown is actually wider than necessary. In other google products I have seen less wide dropdown menu. So it can’t be a minimum-width.
How do you guys set up width of objects like this?
I have the same problem with modals. Sometimes I see them super tiny and sometimes with lots of paddings.
Thanks!

JochenW · Accepted Answer

If you look at the specs for the Material Design menu widget, you can see that they do define a set of different minimum widths. When to apply which minimum width depends on the context and usage of a given menu.
As Stacy mentioned, similarly-sized gutters improve the aesthetic appearance of the menu and its items. They also make it easier to "visually digest" the menu contents.
A minimum width ensure that the click target is large enough to make Mr. Fitts happy ;) even if the menu items' labels are very short.
How you define these dimensions for your own custom widgets is up to you, of course. If you do use standardized components such as those from Material design, however, stick with what their creators have defined. That results in more-consistent UX, and it makes developers' lives easier by minimizing customization overhead.

Izquierdo · Answer

It's aesthetically pleasing when the left and right gutters of a menu are the same width. If the left gutter is 26px, then that should be the width from the widest menu label to the edge of the right-hand side as well.

You can eyeball your gutter widths to start; try using them with various labels to make sure they work with menus that might use long terms (especially in other languages). If you want to be more precise than eyeballing, you can also use your design program's grid system for sizing based on how tall each label item is (a 32-pixel label might look good with a 24-pixel side gutter, as an example).

Align width of dropdown menu to?

2 Answers

Add your own answers!

Ask a Question