Breadcrumb is a secondary navigation within a website (also called breadcrumb navigation). Breadcrumbs offer the users on the website the option, in the form of internal links, to quickly find their way back to the homepage or another level of the website. With breadcrumb navigation, the user can therefore reconstruct which pages they have previously visited. This secondary path-navigation is usually built hierarchically according to website and shows the logical path from the homepage to the current position. A breadcrumb navigation can be found regularly in the upper area of a website, and is usually not too noticeable as a design element.
The term derives from the fairy tale “Hansel and Gretel” from the Brothers Grimm. In the fairy tale, two children used breadcrumbs to find their way back home. Breadcrumbs, as it applies to the Internet, offer users the ability to find their way back to the main page. Breadcrumb navigation traces your preceding pages. This navigation is structured hierarchically and shows the path from the home page through to the current location in the page tree. Breadcrumb navigation is often at the top of the page and is usually not displayed in a flashy way.
Tags will be portrayed through arrows, other typographic symbols, or graphics and buttons. Through a click, the user either ends up on the homepage or on the main page of the wiki. The last point of the navigation can't therefore be clicked on. Breadcrumbs are constantly shown in an "Above-the-fold" area of a website, they are however fairly discreet in terms of font and colour so that the main navigation is still noticeable. Consistence is also relevant: if a secondary navigation is used, this should be available on all pages and subpages.
Strictly speaking, Breadcrumbs are to be differentiated from the click path, because click paths can be distinguished by jumps to different hierarchical levels, possibly circular and not necessary logically. However, the data for the production of breadcrumbs often comes from the click path that the user has followed. Depending on the variation of bread crumb, the navigation with a click path is identical or is relative to other elements and levels of a website.
Breadcrumb navigation can therefore be differentiated according to which relative website level or click path the user is currently on.
Breadcrumb navigation is mainly used for very large websites and portals that have a complex hierarchical structure. You will come across breadcrumb navigation options in online stores often as well, as these assist users in finding their way in the large category and product selection. If a website does not have a logical hierarchy, then breadcrumb navigation is not recommended. One way to do is to build the breadcrumb structure like a sitemap, which usually reflects the website architecture.
It is worth creating a sitemap and then cheking whether a breadcrumb navigation would help. In case the page structure includes many levels, this should be visible in the sitemap. Finally, the breadcrumb can be built up like the sitemap, as they reflect the page-architecture. The following rule is important: the breadcrumb navigation is constantly a secundary help that replaces neither the menu or a navigation. Therefore, primary and secondary navigation should be separated, even in regard to layout and design.
Breadcrumbs can be integrated in many ways:
Breadcrumbs have the following advantages for usability on websites:
Based on numerous usability tests, it is believed that breadcrumb navigation greatly assists users with navigating. From a usability standpoint breadcrumb is therefore indispensable. From an SEO and OnPage optimization perspective it is important to implement breadcrumb correctly. For some time now Google SERPs partly display breadcrumb navigation in the URL line as rich snippets. It is recommended to tag breadcrumb navigation in the source code using microdata (more information can be found at Google Support).
In a further sense, breadcrumbs help search engines with crawling and summarising websites. Through the navigation, the internal linking will be strengthened and URLs that thematically fit together will be linked via the navigation element. Therefore, via the breadcrumb navigation, deeper lying directories in the page hierarchy can be reached and more quickly crawled.