Maintaining a Strong Breadcrumb Trail: Why Hansel Should Have Stuck With the Stones
When a technical hurdle turned our attention to the breadcrumb, we asked the question, why is it a UX best practice to include the current page in the breadcrumb? The answer was, “well, it’s unclear.”
Recently one of our clients was running into an issue with how the “current page” of the breadcrumbs on their website was constructed. As a quick background, the current page is the name of the page that the user is, well, currently on. The question became: should we include the current page in the breadcrumb trail, especially when it’s sometimes lengthy and takes up a lot of real estate?
Including the current page in the breadcrumb is often cited as a best practice (see Nielsen’s write up here). Given the issue of length we were running into, we decided to look a bit more closely at the why behind the best practice to see if there was good evidence or current thinking to validate the practice of ending breadcrumb trails with the current page (vs. ending at the parent level).
As a Requirement
There is not—in my knowledge or research—any official or technical requirements that dictate that breadcrumb trails need to end with the current page. Even the WCAG allows for flexibility in approach here:
"A breadcrumb trail (or 'breadcrumb navigation') helps the user to visualize how content has been structured and how to navigate back to previous web pages. Many even identify the current location in the series of web pages, commonly as the last element in the trail and with a variation in its visual style." [emphasis mine] - From Technique G65, WCAG 2.2, with the same flexibility allowed for in the testing procedure for this technique
For what it’s worth, WCAG doesn’t even require breadcrumbs at all. It’s just a technique that can be used for a AAA success criteria.
As a Best Practice
Surprisingly, and I may be splitting hairs here, I’m not convinced that ending a breadcrumb with the current page is even an actual best practice. It’s just common (and conventional or historic) practice, that makes sense in certain contexts.
In a quick bit of research and an unscientific survey of top sites online, it seems that, for sites that do utilize breadcrumbs, they are divided upon the following dichotomy. A few sites does not a research study make, so consume your breadcrumbs here with several grains of salt:
Websites with mostly durable, evergreen pages, and where the page titles are more curated (these are what we often refer to as sitemap pages) …
… tend to end their breadcrumbs with the current page.
Websites that are more library-like, with lots of end-level content that is changing or continually being added to (i.e. e-commerce, news/media, research-heavy sites—these are what we often refer to as posts, articles or product pages) …
… do not tend to include the current page in breadcrumbs.
(Or in some cases they have breadcrumbs for main sitemap pages or sections, but then remove the breadcrumb entirely on end-level pages, for example on the current Walmart.com)
The Cross-Border Design System Faceoff!
That led me to check what was advocated by US and Canadian national website design systems. Here there are also “best-practice” disagreement:
The U.S. government’s Web Design System does advocate listing the current page, without providing rationale for why.
While the Government of Canada Design System provides direction that current pages should not be included, saying:
"Don't display the current page at the end of the breadcrumb trail (linked or unlinked). It increases the length of the breadcrumb unnecessarily, especially on mobile. The heading of the page is enough to let people know where they are."
This is essentially the same advice given by Smashing Magazine, which writes: “The current page can be dropped if breadcrumbs live above headings.” (Which is a fairly conventional design layout for webpages, with an H1/title at the top of the page, usually near or just below the breadcrumb).
For good measure, a few other design systems that mention a stance on the current page question (many others are seemingly agnostic), and where they fall…
Pro-current page:
Anti-current page:
So Where Do We Go From Here?
In summary, neither approach is bad or best practice. Both are technically “allowed” and I think the answer depends on the context.
If we use an internal rubric of something like:
- Does the maximum breadcrumb trail have many levels of depth, starting with—and including—the homepage (i.e. more than 3)? Give yourself one point if yes.
- Are the sitemap page titles likely to be long (i.e. more than 15 characters)? Give yourself another point if that’s true.
- How long are the longest post/article/product page titles? Add one point if it’s 50-99 characters; two points for 100-149 characters; and three points for 150+ characters.
If your total combined points is less than three, then including the current pages in your breadcrumbs is likely the preferable, more conventional way to go, and shouldn’t cause space constraints. But if the total points are 3 or more, then it likely makes sense to omit current pages from your ‘crumbs.
There’s more here to write about making mobile solutions to breadcrumbs more robust that also impacts this (such as only showing a single level up in the structure, or truncating with an ellipsis, etc.) but I’m gonna stop here for now as that’s a post for another day. :)