3

I'm checking some wireframes made by another firm for a responsive site where the client needs breadcrumbs, and this is non negotiable.

My problem is: on mobile, the breadcrumbs will take 2 (or even more) lines. While this is not something I'm very happy about, I can deal with it. However, I was wondering how should they cut when they reach the end of the line.

Option 1

Just let the breadcrumb take whatever space it needs

------------------------------------
home > item num 1 > item num 2 > ite
m num 3 > item num 4

Option 2

Separate items as they fit, with arrow in the end of upper line

-----------------------------------
home > item num 1 > item num 2 > 
item num 3 > item num 4

Option 3

Separate items as they fit, with arrow at the beginning of next line

---------------------------------
home > item num 1 > item num 2
> item num 3 > item num 4

Option 4

Try to make them take one line, using ellipsis

--------------------------------------------
home > it.. 1 > it.. 2 > it.. 3 > item num 4

Option 5

Something else?

So is there any rule or best practice about this? And again: I know I shouldn't use a breadcrumb, but sadly this is non-negotiable, so I want to know how to do it as well as possible

3 Answers 3

7

From your options:

  • 1 & 3 don't end with > so it could look like the breadcrumb finishes at the end of the first line. Option 1 looks specially strange on the beginning of the second line.

  • 2 is more clear than 1 & 3 because > is at the end of the first line. A possible alternative here could be:

.

-----------------------------------
home > item num 1 > item num 2 > 
> item num 3 > item num 4
  • I think a better solution is using ellipsis as you are doing in Option 4. Now, rather than using ellipsis several times, it might be better to decide which part of the breadcrumb is relevant and which not.

.

-----------------------------------
home > relevant > ... > item num 4

.

-----------------------------------
home > ... > relevant > item num 4

Take a look at how Google Chrome uses this approach when you hover over a link and it shows the url at the bottom left of the browser window.

3
  • Alvaro, great answer as usual. Problem is I discovered links will be quite long, so it will be quite difficult to have home >relevant >... >a very very long item goes here , otherwise the concept of relevant would be EXACTLY what I was looking for, didn't think about that. I can't explain how much I hate breadcrumbs in mobile!
    – Devin
    Commented Mar 22, 2017 at 18:54
  • After a lot of thinking and playing around and a (very small) hallway testing, I've decided to go with your first alternative option. We'll see if it works out
    – Devin
    Commented Mar 23, 2017 at 17:32
  • Thank you for the kind words @Devin :) Still if the name of the element is quite long you might want to use ellipsis at the end of the name, so it doesn't end up in two lines (which might be confusing).
    – Alvaro
    Commented Mar 23, 2017 at 21:16
4

I once used collapsing the middle levels of the path in a similar situation.

At particular levels, the breadcrumbs first just were appended to the path

Home

Home > Level 1

Home > Level 1 > Level 2

Home > Level 1 > Level 2 > Level 3

Home > Level 1 > Level 2 > Level 3 > Level 4

Home > Level 1 > Level 2 > Level 3 > Level 4 > Level 5

Let us say this is when there is no more space, and I started collapsing the levels other than the Home level and the previous one:

Home > [...] > Level 5 > Level 6

Home > [...] > Level 6 > Level 7

I have indicated the current level with bold font.

This way User could easily go all the way back, as well as access the previous two levels - something that for that particular system was reasonably common situation. By pressing the collapsed ones s/he could of course see all the other levels as well, in a form of a dropdown.

2
  • Very nice answer, thanks a lot :) However, when testing with the real link labels, I just found that in some cases, only 2 items will fit in 320px screens. So it seems I'll need to support breadcrumbs in 2 lines no matter how bad they look and the horrible usability issues :(
    – Devin
    Commented Mar 22, 2017 at 18:57
  • 2
    @Devin - remember that you can still shorten the base level to a home icon ;) I believe that Dropbox used a similar pattern some time ago on iPhone mobile app. I cannot check it right now because I have given all my heart to Android on my S7 but you can check it. Commented Mar 22, 2017 at 20:19
0

Use option 2: Make sure you continue the flow of the breadcrumb to the next line so it ends with >

Don't break up words, they're too hard to read, in addition to that, don't even break up the link, keep it all on one line if it's more than one word.

Don't abbreviate the links, you don't know what important text will be lost.

1
  • The problem with number 2 and number 3 is this: if I use option 2, when you read the first line the arrow could mean just a direction sign for the previous link (as in many sites when you see a link and an arrow at the side). And then second line looks like a second breadcrumb. I didn't test it yet, but I predict the friction will be quite noticeable. However, while 3 is less intuitive when reading first line, it's obvious when reading second line that the precedent arrow indicates continuation from something before it, on its left or above
    – Devin
    Commented Mar 22, 2017 at 18:52

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.