Handling long text wrapping in multi-level navigation sidebars

Question

This is something that's always bothered me, and short of 'make the text smaller' I've yet to find a real helpful solution to this anywhere.

As an example I'm going to be using this admin theme I randomly picked from a template site: http://iarouse.com/dist-rainbow/v1.1.1/index.html

You'll notice it has a multi-level navigation bar, which initially looks fine. However if you're in a situation like me, where I develop a commercial software package that allows third parties to add things to that menu, you run into a problem. The menu looks fine until someone puts a link with a long name into it. As an example here's one I've just added, and this is the name of an actual section in the software I work on:

As you can see, it looks pretty terrible now that it's got a long link. Now, the obvious solution would be to just axe the 'Management' part of the title - it'd still make sense as a link, and it's certainly something I could do if need be. But what about when that's not possible. What about when I want to do something like 'Domain Extension Pricing' - you hit a bit of an issue there.

As it stands I don't see any way of getting around this. Am I missing something or is this something we all have to live with?

Answer 1

I would simply make sure that each menu item was correctly padded/margined. If so, you'd get something more along the lines of this:

Answer 2

You could be really aggressive and actually block admin users from entering titles longer than the maximum space you think they should take up. The down side is that this will make your system less flexible (there will always be genuine use cases for long titles), and create a negative experience for your admin users. Not good.

Helpful hints can guide users away from bad choices without removing functionality completely. You could try to discourage users from entering long titles by letting them know when the length is becoming an issue. Here are some example hints you could display if a title is too long:

• For ease of navigation, consider using a more concise title.
• If a word appears in many menu items, consider making it a category / root menu.

As a general rule, keep the tone of any such messages positive (i.e. don't use words like "bad", or "wrong" or anything that might make the user feel stupid or "judged"), with constructive suggestions for improvements.

One more thing, make sure the hints can be disabled in some way so they don't become annoying.

Answer 3

That is, I believe, a very fair concern I also face very often. Almost all the time, I try to have a sub-headline in a smaller font; explaining what is under, what actions can be taken... Limiting the character count while giving tips on how to limit them will go well with that solution.

Depending on the need and type of the project other solutions I can think of are: - if it is a tool that the users will be familiar with in very short time; using abbreviations and having a legend could help - applying a tap and hold tooltip or an i button when the headline is too long to be read.

Answer 4

Honestly, you should be able to compensate fairly well by adjusting the padding in each

tag. I believe margin is the distance between the and the bullet while padding is between the bullet and the

. By adjusting that, you should be able to have a second line wrap properly under the first.

You should also have in writing what the max character length for the first line is though and state that whenever possible it, a link title should never exceed that length. A more hardlined approach would be to require approval from the IA before a menu item can exceed that character limit. That would allow flexibility, remove the need to hardcode and hopefully prevent people from creating links longer that one line. Of course, that only works in a larger organization. If you're just a consultant for a small company OR designing a WordPress theme to sell, you probably can't enforce anything beyond a recommendation in the documentation.