I have a side navigation that is in use in all of the web app.

Now we have to create a new section that is, unfortunately, longer than all the previous side nav items. Please note that the nav item cannot be shortened.

How would you advise I go about this:

  • Increase overall nav width (universally)?
  • Reduce the font-size of the affected element?
  • Increase the nav height so the text can spill into a second line?

enter image description here

Namecheap currently uses option 2: enter image description here

  • Why can't the copy(item text) be shortened? 'details' is a pretty redundant word in that label. Feb 20 '20 at 10:17

You are seeing a classic dynamic content issue. With that in mind I think it's worth considering how your design endures (lasts over time).

I would suggest you design is able to handle dynamic content elegantly and to this end, I would suggest increasing the height on the item to wrap onto a second (or third) line based on the content. This would involve setting a minimum height for your items, but allowing the actual height to be dynamic.

If you expand the navigation width then you will either see the issue occur again in the future when another longer item needs to be added or you will have a nav panel where the width changes over time based on content, potentially worst case to the width of the viewport.

If you reduce the font-size, then you will have inconsistent sizing between elements which to a user usually indicates a lower priority item. If you were to reduce font-size for all elements that would be better, but seeing as this is harder to do dynamically you might end up needing to do this over and over as new items are added.

  • Perfect answer, also consider this if you support multiple languages!
    – Martyn
    Feb 17 '20 at 21:46
  • If this design were internationalized it would be ready to accommodate extra long translations, e.g. german. Wrapping to a new line seems the obvious solution.
    – straya
    Feb 18 '20 at 1:07
  1. General rule: design the layout the way it could consume any possible text length. This particular case: the Namecheap example looks legit and you could use the narrow type tracking.

  2. Sometimes it's enough to rewrite the captions. As we see no other "bill" than "bill of the payments details", and looking on the other one-word menu elements, I'd consider to call it just "Bill"


Here are my points.

  • From my side, I suggest you design and implement your project inside your grid layout, so you will be cleaner about what to do and how you can solve your problem.
  • Be specific about the content of the navigation. Try to minimize the navigation element and make the text clearer and more readable. My suggestion is to use "Bill payment" instead of "Bill of payment details".
  • In your question above, I don't know if this is the final mockup, but another one suggestion from my side is that you should use icons from the same font family. Also, try to not use the same icon more than once time. Right here the icon of "Bill of payment details" is the same with the icon of "Settings".

enter image description here

In my suggestion below, the navigation menu is 16px, the icons (24px x 24px) are from the same font family (I include them only for inspiration) and also I use the bootstrap grid layout. In your case, you can use your own grid layout.

  • Bill of payments is different from Bill of Payment details. Bill of payment, in this case, would not usually be more than 3, so the Bill of Payment details basically shows them as a tabbed view with each tab having a table that lists out the bill details such as dates, amount, quantity e.t.c Feb 20 '20 at 12:08

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.