The concept of crumb navigation comes from the fairy tale "Hansel and Gretel", when Hansel and Gretel accidentally get lost when they cross the forest, but they find that they scatter breadcrumbs everywhere they walk along the way, and let these crumbs help them find their way home. Breadcrumbs are secondary navigation schemes that allow users to know where they are on a website or app and easily return to their original location. This article focuses on how breadcrumb navigation is designed.
Support wayfinding with breadcrumbs that reflect your site's information hierarchy. On mobile devices, avoid using breadcrumbs that are too small or display them on multiple lines.
Breadcrumbs are an important navigation element, and it supports pathfinding — letting users know where they are in the hierarchy of a site.
It is a list of links representing the current page and its "ancestors" (parent page, grandparent page, etc.), usually all the way back to the home page of the site. NN/g has been recommended since 1995 because they provide users with many benefits and hardly any cost in the user interface.
Breadcrumbs are usually at the top of the page, just below the global navigation, indicating the trajectory in the form of a series of links.
The home page (or the root node of the hierarchy) is the first link, often separated by the symbol ">" or "/"; although there is no functional difference, both are acceptable, but the ">" character is recommended.
rei.com: "️ 1⃣" – Appears at the top of the page in a typical position, below the global navigation bar. The path shows the position of the current page in the site hierarchy. Each item in the path is a link to the parent page; the ">" character separates the breadcrumbs. Of course, in this example, the home page and the current page are ignored in the breadcrumb path and are not recommended.
If a user visits a deep page after browsing all the parent pages of the path, they will have a very clear idea of their position in the information hierarchy of the site. But when they skip some of these levels (for example, they arrive at a website by clicking on external links – such as search engine results), breadcrumb navigation also helps them find other pages that may be more relevant.
Deep pages often display relatively narrow content on a specific topic, but breadcrumb tracks can lead the user to find more content in multiple parent pages of the current page.
Breadcrumbs are used to supplement other navigation components, such as a global navigation bar that spans the top of each page, or a local navigation bar that is usually on the left; breadcrumbs complement but do not replace the main forms of navigation.
Travelsouthdakota.com shows the breadcrumb path, which is also used as part navigation. Unlike the traditional breadcrumb path (which will be: home/explore/rineries/cultural immersion), this breadcrumb trail contains a layer 1 item (explore) and another parent page (more interneries). The link to the parent page is a drop-down menu that contains the siblings of the current page (below). A better design would be to have a separate UI module for local navigation, enabling users to access parallel pages in the current part of the site.
Breadcrumbs should not be displayed in the history of pages viewed during a visit to the website (the history can be returned via the back button of the browser itself);
They are designed to show hierarchies within a site. We've noticed this for many years, but it still needs to be emphasized over and over again;
Trying to display a list of pages visited by the user in order can quickly become lengthy and confusing, and it is a lot of repetition, and at the same time, this is one of the main uses of breadcrumbs for users who enter deep pages directly from external links.
Breadcrumbs create an inherent tension over multi-level websites where one page has multiple parents. In this case, we don't recommend showing two or more breadcrumb paths to reflect different paths in multiple hierarchies because they confuse users and take up a lot of space at the top of the page.
If a page has multiple different parents, identify the canonical path for the page in the site hierarchy and display it in the breadcrumbs.
Don't try to personalize the breadcrumb path so that it reflects each user's personal path in the site hierarchy, as this can be confused with the functionality of the search engine itself. You still need to specify a path in the hierarchy as the primary path for visitors from external links.
The path corresponding to the current page (the last crumb) should not be linked, because clicking on it will not cause anything to happen. To avoid confusing the user, visually distinguish between the current page and the breadcrumbs of the previous link, it is best to use underscores or blue text.
On the British Red Cross website, there is no visual distinction between "volunteer in emergencies" and other breadcrumbs, which is not a link in itself.
Information architecture
Each node in the breadcrumb track should be a link to the parent page (except for the link corresponding to the current page).
If some of the subcategory labels in the global navigation don't have separate pages dedicated to them, don't include those subcategories in your breadcrumb tracks.
The ability to "click and jump" is a key part of a user's understanding of breadcrumbs, so all items (except the current page) should represent where the user can access.
newegg.com: The global navigation (on) subcategory does not have its own specific page, for example, commercial networking 1⃣️. On the "wired networking" page (bottom), 2⃣️does not include "commercial networking" because there are no associated pages for this subcategory.
7. For websites with only 1 or 2 levels of hierarchy, or websites with a linear structure, breadcrumbs are not required (or useless)
For sites with parallel hierarchies with only level 1 or 2 categories, breadcrumbs are not required as path guides. In this case, consider clearly indicating the top-level menu or category in which the page is located.
MIT's main website has a unified hierarchy with only one page per module. Although it has breadcrumbs at the top of the page, this crumb is not required. In the main navigation, the position of the page is highlighted.
NPR has a miniature site about the history of color, which is designed as a linear experience where users can navigate through each page sequentially. The structure of the site is non-hierarchical, so there is no need to include breadcrumb paths (and no value).
Just like our global navigation, we still need to link to the home page. Note, however, that it is not recommended to have both a home link in the global navigation and breadcrumb paths – one of the two is fine.
There is a breadcrumb trail on the Oregon government website that omits the link to the home page.
However, in this case, this is acceptable, as the site also includes a "home" link in the global navigation – it doesn't have to exist at the same time for the home page link, but it needs to be displayed in one of two places.
Unfortunately, on mobile devices, the cost of using breadcrumbs far outweighs the benefits gained.
On the mobile side, breadcrumbs may exist in the form of multiple lines and take up valuable space on an already crowded mobile display.
Multi-line breadcrumb paths do not illustrate the structure of a link very well (especially since one label occupies a single line, while other labels may have two or more in a row).
rei.com mobile site uses multi-line breadcrumbs, which fold path names and even appear incomplete (hidden) on other mobile devices (pictured iPhone x).
Some websites try to save screen space by making the breadcrumb link smaller or closer.
Unfortunately, the solution does not work on the touch screen: the hot zone of the touch screen clicking on the target is at least 1cm x 1cm.
On some pages, a single breadcrumb pointing to a certain level may be all that is necessary for the primary user target.
For example: On an ecommerce site, if a user lands on a product detail page (e.g., by google search), she might want to see other product options in that category for comparison, so linking breadcrumbs to a parent in a hierarchy can support this common task. The solution avoids overly long and crowded breadcrumb trails and also saves valuable mobile touchscreen space.
Note that this recommendation does not conflict with Article 8 (Breadcrumb paths should start with a link to the home page), which can only be enforced on mobile devices. On the desktop (with more space), always display the full record, still following Rule 8 guidelines.
bestbuy.com: The mobile site (top) displays a truncated breadcrumb trail 1⃣️, allowing access to the direct parent page.
The desktop website (bottom) shows the full trace 2⃣️. This scenario on mobile devices supports pathfinding and avoids taking up valuable space.
Breadcrumbs are an auxiliary form of navigation that helps users access content from other paths in the hierarchy.
They are especially useful when users arrive at a website through an external link instead of starting from the homepage. Make sure that all the labels in the breadcrumb path are links, and that each node becomes more specific as you drill down to the site.
On mobile devices, breadcrumbs can take up too much space or be difficult to click. If your user tasks allow, consider shortening the breadcrumb path.
Original address: https://www.nngroup.com/articles/breadcrumbs/
Original author: Page Laubhheimer
This article was translated by @henry-lee and published by Everyone is a Product Manager. Reproduction without permission is prohibited
The title image is from unsplash, based on the CC0 protocol