We have long names for our menu items which cannot be changed so we have to break them into two lines. The visual below is a sample (not the actual names but just to demonstrate the long names):

enter image description here

One comment was that the width / sides of each menu item is not consistent and looks jagged.

One suggestion was to enclose them in boxes / containers that are of equal width. However, I find that it may look chunky that way.

Is there a better way of presenting this kind of menu?

  • Any reason they can't be all on one line? – Mark Bubel Feb 17 '16 at 12:10
  • @MarkBubel There are more than 4 items. Just that I posted a few for demo. – catandmouse Feb 18 '16 at 2:08

Are you only worried about aesthetics or about usability?

If it's just aesthetics, then as you're probably aware it's highly subjective but some things you can try are :

  1. Changing the fonts - different font choices can have big effect
  2. Adjusting the kerning
  3. Adjusting the line spacing
  4. Changing the colours you use. Different colours can have a big effect.
  5. Changing the case of the words Camel Case is much easier to read.
  6. Try left aligning the phrases
  7. Try the words all on one line

You will probably end up with a combination of these but as it is subjective it's very hard to tell you which will work in your situation.

Other things you might want to try (but may be out of scope)

  1. Gather evidence, lots of it, and convince whomever decides on the names that they should be changed.
  2. Hire a typographer. An experienced and skilled typographer can do amazing things that you (or I) would never think of.
  • All good suggestions. If none of these work, and the menu items must have those names, consider redesigning the navigation itself. – Mark Bubel Feb 19 '16 at 13:43

I'm wondering why the titles have to be so long. The general practice in menus is to keep things as short as possible and reduce to one word. It makes things more immediately readable for the user (especially on repeated visits), looks nicer and I don't think it would be more difficult to understand (e.g. Showcase, Portfolio, About, Analytics). You can then add a tooltip (or other kind of expansion) with a longer version if you think the short one is not explicit enough for the user.

One alternative would be to reword the items so you always have similar shapes for all item (e.g. triangular: short first line, longer second line).

Another way still would be to use variable spacing between letters so first and second line of each item is more or less equal. But that wont work well when the initial difference is too big.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.