User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It only takes a minute to sign up.
Sign up to join this community
Should breadcrumbs ever be placed at the very top-left of a page?
Breadcrumbs seem to always be located either directly below the nav menu or above the page content. An article from 1stWebDesigner shows some creative examples of breadcrumb design, 99% of which use this format.
Putting the breadcrumbs above everything else on the page creates a false visual hierarchy.
I suggest you read Steve Krug's Don't Make Me Think for a more detailed explanation (chapter 6 discussed navigation and breadcrumbs).
To summarize it very briefly, each section on the page has a header, usually containing titles, but can also contain actions, which affect only that specific section.
A top most breadcrumbs-control implies that it everything on the page is unique to this location and changing the location, changes the entire page.
The mental image we usually have of a site is that it has a wrapping element that is global and common to all the pages. This element usually contains the title/logo, navigation, etc. Although it might technically get reloaded with each page, we (should) perceive it as constant and unchaning.
Also consider that if the navigation is beneath the breadcrumbs, it might feel weird navigating to another page, expecting to change only the content beneath the navigation (while it stays constant), but instead changing something "above" it in the hierarchy.
I think the best place to put breadcrumbs is in the trash. They don't really provide that much value to a site.
If you insist on having them, then after the site navigation is the best place to put them. Putting them at the very top of the site is a VERY bad idea to me. It's going to hurt your SEO and accessibility for sure, and it is also likely to hurt the aesthetic of your site. Breadcrumbs aren't exactly "pretty".
The reason that they are put right above the content is because they relate directly to the content. Putting them above your navigation/header breaks that link with the content and the breadcrumbs lose some context. I've seen this sort of thing referred to as cognitive resonance, although that really isn't a valid phrase, it kind of makes sense here.
EDIT: Expanding on how it hurts accessibility and SEO:
Accessibility: If you put the breadcrumbs at the very top of the page, people using assistive technologies like screen readers now have to move through all of your breadcrumbs in order to get to the site navigation links. Because of this, you need to really consider what the more likely target is for your user, clicking on a navigation link or clicking on a breadcrumb link. Unless you are Craigslist, where the only navigation you have is breadcrumbs, the more likely candidate is the navigation links.
SEO: Search engines only follow a certain number of links (and read a certain amount of content on a page, but that's less important here). Again, it leads to importance. What is more valuable for you to have followed by Google's crawler, your breadcrumb links or your main site nav links (which will ideally lead the crawler to much more content than the breadcrumbs will). Now, this is probably less of a concern, because most crawlers will probably follow deeper into the page than just your navigation and your breadcrumbs, but it's better to be sure with that sort of thing.
Also, thought of another reason to not put them at the very top of the site: Not every page on your site is going to have breadcrumbs. As such, the user will likely become used to your header looking a certain way and will learn to ignore it over time unless there is a specific action they want to take there. This means that your breadcrumbs are likely to get ignored even more than if they are right above your content. At least if they are above your content, they are more likely to be in the user's vision as he reads the content (again, the resonance between breadcrumbs and content).
An interesting way of doing it might be to create a breadcrumb/tab hybrid at the very top of the page, with function and form similar to Google Chrome's tabs on top UI pattern.
If you use them, I'd suggest they belong immediately before the H1.
But I tend to agree with the idea that they really aren't that useful most of the time. The one time they can be is if you have a site that has very compartmentalized items that get nested very deep. An example might be an online retailer where odds are that people might be landing on a specific product page and would like an easy way up to the general product category listings.
Jakob Nielsen recommends breadcrumbs for the following reasons
- Breadcrumbs show people their current location relative to higher-level concepts
- Breadcrumbs afford one-click access to higher site levels
- Breadcrumbs never cause problems in user testing
- Breadcrumbs take up very little space
However, he does refer to them as 'Secondary Navigation', and while he is non-specific in proposing a location, after and subsidiary to the site's main navigation is a strong implication.
Breadcrumbs are most useful in web applications where we have to use maximum of our screen space for data operation. Breadcrumbs helps in faster navigation, as the user does not have to memorize the path he took to reach his destination. Definitely a time and space saver. Best place for Breadcrumbs is right on top, above the page title.
