At the moment I am building a webpage where the main navigation is located on the side, not at the top. The page uses a CMS where the user can create own menu links. That means if someone enters a superdupermegahyperlongword as menu link, there is a space problem:

enter image description here

While the link length in that example is still quite moderate I think you get the point. Extending the with of the navigation is not an option.
One possible solution would be to simply wrap the link whenever it needs to be wrapped:

enter image description here

This approach might kinda work, but its ugly and probably hard to read – I think we can agree on that. Another solution would be to add an elipsis:

enter image description here

That is even worse that the forced wrap I believe because who clicks a link that is unreadable? The same goes for simply cutting off long links or fading then out instead of using three dots. While a fade might look better, its still not a good solution in my eyes.

Inspired by Apple (Facepalm time? I don't know) I had the idea to do it like that:

enter image description here

As long as the link will fit in the box when using a font size only a bit smaller than the rest, I will apply that smaller font size. Of course the font size should not fall below a certain size, so something like that shouldn't happen:

enter image description here

But then I can still use an elipsis or something like that.

What do you think of that solution – a good idea or not? Will the slighty different font sizes be irritating for the user?

  • I've had this design challenge in the past and my answer has always involved telling users to not make long links :) So I'm interested to see what the answer to this is.
    – DallonF
    Nov 1, 2013 at 19:58
  • @DallonF Sure thats true, but sometimes its hard to avoid that. And while I don't think webpages need to play well with everything an unexperienced/lazy user does to it, I still think we should do our best to make the best out of it ;-)
    – Sven
    Nov 1, 2013 at 20:03
  • Understood! That's why I'm watching this question to see what the answer is because my solution was far from ideal.
    – DallonF
    Nov 2, 2013 at 13:33

3 Answers 3


First we need to answer the question: Is long menu item name error or not?

If long menu item name is error: a) add piece of code which validates menu item name when user inputs it; b) in runtime detect this and clearely mark it as error (or even not display this menu item at all) which causes user to correct the name.

If long menu item name is not error as for me the better solution is to wrap long name. This is the simpliest way as well as it is self indicating.


Adding to what Serg already posted.

Validation is KEY.

Talk to your designer or your experience guy, find out or limit the number of characters you can support (this is a design decision). Then follow pretty much everything in this post https://ux.stackexchange.com/a/46598/13276

Don't ever reduce font-sizes.


A common solution that I see is to use ellipsis, and when the mouse hovers over it, show the full text in a balloon; but this is somewhat redundant when the label already fit the navigation. Or, even better, you can temporarily widen the navigation column during mouse hover. With CSS3, it is even possible to do so without JavaScript.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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