11

Should a long breadcrumb menu ever spill into a second line? If so, what are some good examples of this done right so that it looks decent? If not, what are other solutions that can solve the length problem?

The only things that I can think of are to shrink the text or remove some of the options, but I'm not a big fan of either.

Edit:

Is displaying the current page title in the breadcrumb redundant? Consider:

Most breadcrumbs are similar to the following:

Home > Tools > Blue Widgets > Acme Super Blue Widget #1209930942348

However, below the breadcrumb, the page title is often displayed as a heading:

Acme Super Blue Widget #1209930942348

Would there be any benefits or drawbacks to omitting the page title from the breadcrumb and replacing it with the text, 'Current Page'?

Home > Tools > Blue Widgets > Current Page

Acme Super Blue Widget #1209930942348

Improve this question
1
  • Since "Current Page" is not going to be a link why not name it "Product," or "Acme Super Blue...," or "Product Details," etc...
    – Dave Nelson
    Apr 19, 2011 at 15:00

6 Answers 6

Reset to default
8

I don't see a huge problem with this, although the danger is that the second line is misinterpreted - e.g. as a 'sublisting' as opposed to a continuation of the breadcrumbs. You might want to emphasise the continuation with a leading separator, and a negative text-indent might also help (so the second line is then indented).

I would suggest that, if your breadcrumb 'row' is full width, and it's still wrapping over more than one line, you might have either too many levels in the hierarchy, or your breadcrumb page titles are too long, each of which could lower usability.

Improve this answer
1
  • depends on the device. Mobile or other smaller screens will show a wrapping. I don't think a full row width breadcrumb trail can be summarized that simply.
    – richard
    Feb 6, 2016 at 19:53
2

I tend to agree with DA01 that breadcrumbs often just take up real estate and offer no significant value, particularly if your core navigation is easy to understand and you've got a good site search capability.

If you must use them, one way to avoid breadcrumbs wrapping is to only show "x levels back" so that you indicate there is more via a "..." convention prefixing the crumbs or something. To a certain depth users will see all breadcrumbs and then once they get something like 4 levels deep, they will only see that many levels back. The three dots can be clicked to get back to that hierarchy level.

I'd say that you just avoid them and make findability and information scent strong on your site. I don't think you'll miss the crumbs.

Improve this answer
0

I believe this requires one of those "it depends" responses. Setting and task will determine if it's appropriate or not.

We're currently implementing a breadcrumb menu that will span several lines - because users asked for it. Basically it's a hierarchy of selections the users make as they navigate through a report generation procedure.

The benefits for the users are fairly considerable - the report selections are lengthy and users often get halfway through before realizing they made a mistake somewhere. The breadcrumb allows them to quickly scan their selections and then go back to where the mistake occurred.

I hated the idea, but when offered various choices the breadcrumb is what they preferred. I got the impression it's because it's terse, familiar, and requires little cognitive effort. All of which is fair.

In terms of how it looks - we're not altering font sizes or anything. Hopefully others can weigh in on this as I'd be keen to see good examples.

Improve this answer
0

I'd first question the use of breadcrumbs to begin with. They can be useful, for sure, but I have a hunch they are often used in situations where they aren't really providing much for the user.

If they are a benefit, then I'd say making them readable should trump trying to force it all into one line.

Improve this answer
0

It depends.

For search result filters (e.g. product listings), this seems best handled by putting every additional filter on a new line. The breadcrumbs are summarily boxed and titled to indicate they are related.

For breadcrumbs for a multi-part process, steps can be categorized. Steps belonging to the same category as the current step are shown, others are represented only by a category title. The category title may expand or dropdown to show sub-steps or clicking on it may take you back to the first step in that category.

One example of the second style may use an image that numbers and includes a description of the categories. Previous categories will have their section grayed out or otherwise marked as complete, current category will be highlighted, later sections will be as incomplete. Clicking on the appropriate section of the image should work as per the corresponding category breadcrumb. An example image is provided in the link below.

http://www.hse.gov.uk/stress/img/standards2.gif

Improve this answer
0

I think jbreadcrumb has a nice solution for this. Although, you mentioned you don't want to shrink the names, this solution allows you to see the expanded names on hover.

Improve this answer
1
  • Casey, welcome to the UX SE. This answer is short enough, that it might work better as a comment. If you think it should be its own answer, perhaps you might consider expanding it? What works well about using a hover? Have you read (or done) any studies to suggest that this method works better than splitting the breadcrumb into multiple lines?
    – Graham Herrli
    Apr 16, 2013 at 0:44

Your Answer

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

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