2

My app has this kind of design in the ideal, normal use case:

enter image description here

but, in case the user creates two or three nested folders with a long folder name, like in this structure:

enter image description here

it quickly becomes problematic:

enter image description here

I can of course widen the box but that doesn't seem the best solution:

enter image description here

Therefore, I need some guidance on what can be the best way to sort out the problem of long folder names. Thank you!

6

You can use a chevron << to the left of the folder navigation breadcrumb in case there is no room for all of the folder names. Push the parent folder names to the left giving priority to the child on the far right.

enter image description here enter image description here

However for very long names, you can set a standard maximum length for the characters that should be displayed for each folder name(giving priority to the child too) when there is no room between the breadcrumb and actions/controls to the right, use an Ellipsis ... to signify the adjustment.

enter image description here

You can also chop off some characters on the child incase it is very long or you want to leave enough space between the breadcrumb and the actions.

enter image description here

In case the user wants to navigate back uptop, they can click on the chevron to reveal the parent names. It can be a dropdown or horizontal scroll for the folder names.

Dropdown on clicking chevron

  • 1
    Wow! Very detailed and thorough answer! Thank you! I will accept your answer in a day or two if there's no better answer. – Gaurang Tandon Mar 24 '16 at 7:42
  • 3
    Another plus to this approach is that Windows users (who are the vast majority of computer users) will find this totally natural. – PieBie Mar 24 '16 at 11:43

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.