Sizing dropdown menus

How wide should a dropdown be? Most products pick a fixed number and move on. A better answer: let the widest item set the width, then add 16px. Below is why that works, the two limits that keep it from breaking, and how the rest of a good menu is built.

Let the widest item decide

A menu is a column of labels you scan from top to bottom. When its width comes from the content, the right edge follows the longest label and the whole menu looks deliberate.

The differences are small, but you can see them. With 12px after the longest label, the text crowds the edge and the menu feels tight. With 24px, the slack on the right reads as empty space. 16px is where it settles. A fixed width reused across menus is the same problem, only bigger.

The 16px after the longest label is the part most menus skip. In CSS, that's width: max-content plus the item padding, which is exactly how Microsoft's Fluent 2 menus are built.

Give it a floor and a ceiling

Content-based width needs two limits, because content isn't always friendly. A menu with only Edit, Share and Copy shrinks to a sliver, so a min-width of 132px keeps it a comfortable target.

A menu that lists user content, like folders or projects, can't know its longest item. A max-width of 240px stops it there. Longer labels truncate and show in full on hover, so nothing gets lost.

Build the rows

Width is half of it. The rows decide whether a menu is easy to hit and quick to read.

• Rows are 32px tall. WCAG's minimum target size is 24px.
• Icons are 16px, 8px from the label. Either every item gets one, or none does.
• Labels are left-aligned and start with a verb.
• Dividers group related actions. For one or two actions, use buttons instead.
• Unavailable items stay in place, greyed out, so the menu keeps its shape.
• Destructive actions go last, in red, and ask for confirmation.

Make it work without a mouse

The keys are standard, so nobody has to learn anything new:

Radix and similar libraries handle all of this out of the box, which is reason enough not to build a menu from scratch.

How design systems size their menus

They all size menus by their content and set the same two limits. Only the numbers differ.

In code

.menu {
  width: max-content;
  min-width: 132px;
  max-width: 240px;
  padding: 4px;
  border-radius: 10px;
}

.menu-item {
  height: 32px;
  padding: 0 12px 0 8px; /* 12 + 4 = 16px to the edge */
  gap: 8px;
  border-radius: 6px;
}

.menu-item span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}