Breadcrumbs - is this a valid use?

Question

Recently we've received a design that uses breadcrumbs, but specifies a breadcrumb for a page that does not exist. In effect, the breadcrumb in question, relates to a section of a top-level page. We're wondering if this use of breadcrumbs is not advisable or whether this is more common than we're aware of.

Example: Page 1 (main information page) contains 2-4 sections describing topics contained in sub-pages. Each topic's text is marked up using html (a H1 or H2). Page 2 (is a page that list products and info related to the topics on Page 1).

The design is this: Page 1 > This is our top-level page. The user is presented with 3-4 sets of products grouped by hyperlinked Topic text (as HTML H1's or H2's).

When the user clicks on a Topic they are taken to Page 2: The breadcrumb this new design specifies is this: Page 1 > Topic Text > Page 2

And when a user clicks the Topic Text "breadcrumb", they are taken to Page 1, and CSS is used to highlight the Topic Text the user originally clicked on.

The above seems odd in that the "Topic text" breadcrumb does not relate to a page. Are we being too purist in our interpretation of the use of breadcrumbs?

Also, suggestions for how to best to implement this would be welcome. We'll need to pass some value or indicator from the second level page back to the first when the user selected the "Topic text" breadcrumb. JavaScript? queryString?

Thanks for your insights.

Answer 1

It's a slippery slope because breadcrumb is typically used to indicate page, rather than page-section.

First, I would only use ">" to indicate hierarchy drill-down.

Second, I would avoid page-section level text in the breadcrumb altogether, but use generic label.

For example:

Page 1 >

Page 1 : Products Summary > Page 2 >

where Page 1 and Topics are two distinct URL, separated by colon. So if user clicks on "Page 1", it goes to top of the page. If user clicks on "Products Summary", it goes to the section of the page where the user originally clicked on the link.

In other words, the actual URL behind the "Products Summary" may change depending on what the user clicked on Page 1. But the actual breadcrumb label should be generic and just say "Products Summary".

Answer 2

It isn't invalid, but it isn't conventional.

Breadcrumbs, should in the simplest of form, represent steps of a use. The name has after come from leaving a literal trail while walking to find your way back.

As long as the steps are unique I see nothing wrong with idea of having breadcrumbs back to a certain point on a page. In fact this is actually a very clever way of doing it I think, if the page is long in content then it is poor UX to simply only direct the user back to the top - then force them to refind themselves of the page.

This page on UI Patterns will be very relevant to you.