I have a unique situation (if there is another post here outlining it please link to me so I can remove mine).
I have a menubar at the top of my page with six links in it. Each link will take you to a new area within the webapp, and each new area will have a magnitude of sub pages to it. So My first thought was breadcrumbs, here is where my first snag comes into play:

I initially had each area link back to the users 'dashboard' (home page), but that was odd looking because the links to the dashboard sit on the same level as the rest of the links...

Here is a image to help you understand (this is what the user will see upon logging into the system)

From here if the user clicks 'Inventory' should they see

or

and furthermore: Do I need to keep the menu item 'selected' for the active page? or do the breadcrumbs take care of the identification.

I often get really hung up on the little things like this: so if anyone can offer their 2 cents that would be much appreciated.

4 Answers
4

The last mockup (Dashboard >> Inventory) is not an appropriate use of breadcrumbs; it would appear that I am in the Inventory subsection of the Dashboard section.

Think of breadcrumbs in terms ofa file directory like this:

Each breadcrumb is a subsection of the previous one, it's not a history it is a directory structure. Breadcrumbs should start at the top level directory of the current page. The browser's Back button will take care of the "back" functionality you're emulating.

Your second question seems unrelated, but showing which tab is "active" is logical and is standard practice on most platforms with an established Human Interface Guidelines document, including both Android and iOS.

Thanks! That is exactly the type of reassurance I needed to move past this - I was not for or against either way of life. Just needed someone to make the call for me (with a logical argument). As for the unrelated question regarding active pages... It just looked redundant to me to show >> Inventory when Inventory is already displayed as active.. but I can see your point here, it may look odd to me but the more I look at the more I notice other sites/apps function the same.
–
rlemonJan 27 '12 at 19:34

1

I think you are confusing breadcrumb trail with hierarchical links. A breadcrumb trail will track exactly where you have been, so the example shown by @rlemon is valid. What you are describing in your answer is hierarchical links, which yes, will follow the directory structure. Think of Hansel and Gretel when you think of breadcrumbs, they need to retrace their steps, so it is in fact a history!
–
DigiKevJan 27 '12 at 19:47

1

@DigiKev breadcrumbs aren't necessarily hierarchical but that is the default use case, it's very rare (for good reason) to show non-hierarchical bread crumbs. They're supposed to follow your IA, not replace the Back button.
–
Ben Brocka♦Jan 27 '12 at 19:50

1

@DigiKev: I've never seen breadcrumbs online that would trace the navigational path. They always display hierarchical relationship to the homepage, unless they're faceted (think NewEgg) where you can remove some of them from the middle as a way of changing results filter.
–
dnbrvJan 27 '12 at 20:07

1

@DigiKev I totally see your point; however at this point your are arguing semantics. :P breadcrumbs in the literal sense is a 'history' of what path I have taken to end up on this page. This type of tracking has very few use-cases in Web 2.0 (it has some, and is very useful to them). So +1 for calling it out correctly. -1 for kicking a dead horse.
–
rlemonJan 27 '12 at 20:32

The term breadcrumbs comes from a fairy tale, where a trail of breadcrumbs is left to trace the path taken.

On web sites, however, this is RARELY how they work. 10 years ago people experimented with that model, but these days, nearly universally, the term 'breadcrumb' now refers to the path back up the site map to the home page.

I don't like that term for that reason, but it's now the standards, so be it. (I had always preferred the term "topic path navigation").

So, that said, none of your examples make sense.

I'd say your main nav bar is the top level pages. They are self explanatory. The breadcrumbs below would then start at the secondary level pages.

So if you clicked on Inventory, then a page under inventory, then a page under that, it'd look like this:

Location Breadcrumbs show the user where they are within the site's hierarchy.

Path Breadcrumbs show the user the path they took to get to the content.

Attribute Breadcrumbs show the user the attributes they've chosen while conducting a faceted search.

Application Breadcrumbs show the user the progress they've made in an application.

But as said in answers already, Path (historical) Breadcrumbs are rather odd nowadays. I guess because your browser history does this job, too.

To your examples:
Third one could be a Path Breadcrumb, but wouldn`t it feel strange if you click back to Dashboard having a trail like Dashboard > Inventory > Dashboard?
Best is to stick to Location Breadcrumbs in your case (First two examples)

If you are looking to add a breadcrumb trail to your interface, then what you have posted with your images is correct, you will see exactly where you were last, and where you are now. Think of Hansel and Gretel when you think of breadcrumbs, they need to retrace their steps from exactly where they have been.

It is actually a very difficult thing to implement as you will need to have some logic that can track exactly the last page and add this to the breadcrumb. Most sites in fact use hierarchical links, which is what Ben Brocka has described in his answer, but called it the wrong name.

Think carefully about the application. Do you need to track exactly where someone has been so they can retrace their steps, or do you need to just show what hierarchy they are currently in? If it is the latter, which is usually the case, implement hierarchical links.

For an example of how breadcrumbs should operate, take a look at the NHS health explorer and click one of the spokes that comes off the centre, and keep continuing to do so until you have a bunch of history in the bar above. This shows you where you have been, not a hierarchy.

At first my assumption was to build a hierarchical link system (under the pretence of 'breadcrumbs'), however now that I'm considering the wins/loses of the other approach. The only case I can see (and i'll likely just hack around it) is there will be a section where browser history (GET request) will need to be tracked for a maximum of three pages. (user clicks on A, sets some request vars, clicks on B -> C-> back to A (I want to remember the vars) - if I were to implement what you are talking about here would be the only place i would need it.
–
rlemonJan 27 '12 at 20:38

I agree that 'breadcrumbs' aren't the right name, but whether we like it or not, it is the accepted term for hierarchical navigation.
–
DA01Jan 27 '12 at 20:39