4

What is the expected action when a breadcrumb is clicked?

I have a hierarchy of data that includes meta descriptors such as:

PersonName / Assets / House

I have a page for a list of Assets, a home detail, and a person detail page.

  1. Should clicking on "House" and clicking on "Assets" have the same action? (going to the list of assets)

  2. Should the rightmost leaf of the breadcrumb always take you to the current page?

  3. Should the rightmost leaf of the breadcrumb always take you a level "up"?

Improve this question

6 Answers 6

Reset to default
3

Take the normal URL,

https://ux.stackexchange.com/questions/3287/how-should-a-breadcrumb-behave

As you can tell it's very cryptic:

  • What's the domain? Is it http://stackexchange.com or https://ux.stackexchange.com/ or maybe https://ux.stackexchange.com/questions/ Truthfully it could be any of those. Writing "Home" in the URL isn't exactly useful or saying anything; particularly for your google users.

  • Which part are actually for me? is the 3287 for me? is "questions" for me? Most users tend to understand a lot of the URL they are just suppose to ignore.

  • Is the title of the page (seen in the URL) a question or affirmation? Now, of course, going by the fact we have a /questions/ segment we can deduce the answer in this case; but that may not be necessarily the case for some URLs.

We can fix a lot of this by using…

URL style breadcrums

ui.stackexchange.com / Questions / How should a breadcrumb behave?

ui.stackexchange.com / Questions

A few points,

  • prefer unix/URL style "/" (forward slash) as separator; all users understand it—your tech users will be happy.

  • almost anyone is familiar with the folder structure so it's best to just piggyback; one of the major benefits is you don't have to worry about it being interpreted as a hierarchy. Another good benefit is the user doesn't have to think about it: less thinking = happier user.

  • DONT make the current page a link! Ever! Why? because users will then confuse it with the "previous page"; one way or another they also lead to "I clicked it, why didn't anything happen?" problems. Also, what use does it serve? Link to current page? most people will just copy the URL, if you are presenting some canonical link, simply have a "permalink" anchor on the page. ¶ On a tangent, this also applies to navigation (don't make the current page a link). In the case of navigation, there are even more nonsensical situations, such as the case of two pages—how can the user know which is the current and which is the "other" page, a lot of the time he can't.

Don't show breadcrumbs on the domain, ie. https://ux.stackexchange.com/ in the example, since it makes absolutely no sense; you start using breadcrumbs when you venture into the wilderness; when you're at home your breadcrumb trail is zero (as in nil).

Keep it Short-n-Sweet

ui.stackexchange.com / Something / Very / … / Long / How should a breadcrumb behave?

Improve this answer
3
  • What do you think about a breadcrumb for the current page that has Javascript that will ask the user if they want to refresh the page? Maybe with a checkbox that says don't show this dialog again.
    – makerofthings7
    Feb 17, 2011 at 14:43
  • @makerofthings7, users may wonder what triggered the dialog. They may also think the site generated it automatically; like some sites out there would pop up an annoying "please subscribe to us" each time you drop on one of their pages, or leave the page. ¶ If you absolutely require the functionality, then make sure the popup clearly identifies the link as it's source; or make the message somewhat verbose (not a good idea; users don't like reading).
    – srcspider
    Feb 17, 2011 at 18:15
  • This solutions has usability issues, the next solution absolutely is a better one since supports all reasons for having a breadcrumb.
    – aliesifar
    Apr 27, 2015 at 18:21
10

A breadcrumb has two goals: show where you are and take you up (back), one or more levels. The current page in the breadcrumb is usually not a link and therefore displayed differently.

On a house page, you should have (the current page is bold, the others are links):

PersonName \ Assets \ House

The asset list page has:

PersonName \ Assets

The person page has only

PersonName

To navigate down in your hierarchy, the user has to take an action inside the current page.

Improve this answer
1
  • 1
    The general rule is the anchor label tells the user where a link goes. If you have a "House" link, then it should go to the house page. Anything else would be seriously confusing. Making it not a link is better because a link implies its content is different than the current content.
    – Michael Zuschlag
    Feb 2, 2011 at 13:58
2

Sun Microsystems (R.I.P.) had some decent usability-tested guidelines on breadcrumbs. Their guidelines also make the useful distinction between breadcrumbs and parentage paths, two commonly-used but different navigation techniques:

http://developers.sun.com/docs/web-app-guidelines/uispec4_0/06-content.html#6.3

Improve this answer
1
  • sadly, the link is also R.I.P now.
    – kumarharsh
    Nov 5, 2018 at 15:30
1

If Home\Assets points to the same site, than you should dismiss 'Home'

Anyways I would advice you to read the following Patternry article on breadcrumbs!

Improve this answer
0

Clicking Assets should take you to the list of Assets (of which House) is probably an element).

Clicking House should take you to the initial state of the House page, as if it was klicked from the Assets page. This might mean e.g. scroll to top.

Similary, if the House page allows additional navigation to sub-pages or related elements which would not change the breadcrumbs display, suhc a navigation would be "undone".

If such an action is not possible or not safe to do (e.g. the user would lose values entered in a form), House should not be clickable, just bolded:

PersonName / Assets / House

Improve this answer
0

If clicking on "House" and clicking on "Assets" happen to point to the same page, then I think the breadcrumb should be modified to no longer display "House":

PersonName \ Assets

Clicking on two different links of a breadcrumb should never open the same page in my opinion. It confuses.

Improve this answer

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.