Breadcrumb

What is a breadcrumb?

Breadcrumb navigation is a secondary navigation on a website. It allows the user to track their current position within the website structure and jump back through the various hierarchical levels of the page.

This works by following the so-called breadcrumb trail. This shows links to the individual levels in the structure of the website. These are usually arranged hierarchically, e.g. from the home page to category pages and subcategory pages to product pages.

By the way, breadcrumb navigation takes its name from the fairy tale “Hansel and Gretel”, in which the siblings scatter breadcrumbs on their way through the forest to find their way back home. The way breadcrumb navigation works is similar – through it, the user can easily follow the levels of the visited website and thus quickly find their way back to the home page.

Especially for websites with deep structure, i.e. numerous categories and subcategories, the implementation is useful for easier orientation. However, since a breadcrumb navigation traces the logical hierarchy of a page, it is important that you give your website a basic, logical structure – otherwise you will only confuse the user by including breadcrumbs.

What does breadcrumb navigation look like?

You can find the breadcrumb navigation above-the-fold on a web page. That means it is located in the upper area, which is immediately visible to the user without scrolling. This is important because it serves as an aid to navigation for the visitor.

As a rule, breadcrumbs have an unobtrusive design. In fact, in their function they are mainly there as a point of orientation for the user and should not replace the main navigation or menu of a website.

Example breadcrumb of this article:

The different hierarchy levels are clickable except for the last item (usually the home page). So the user can easily navigate back to the different levels by clicking on them.

Types of breadcrumbs

• Location: It shows the user’s position within the website. Based on the predefined levels of the page (e.g. category, subcategory), the path to the top level of the hierarchy (home page) is displayed. This variant is the most commonly used navigation type.

• Path (click path): depicts the actual click path of the user based on his or her travelled path on the website. This can be very confusing if the user frequently switches back and forth within the hierarchies. Therefore, this form is rarely encountered. Since the click path is displayed from the entry page onwards, the user can understand which steps they took to reach the target page.

• Attributes (attribute-based): This type of breadcrumb shows the category affiliation of the currently visited page as well as its assigned attributes. It is often used in online stores where products are sorted by their attributes. For example, in the example below, a pair of shoes falls into the “Sneakers” category. It also has the additional attributes “size 38” as well as the color “white”.

Why is the breadcrumb displayed on a web page?

It often makes sense to include it, as this type of navigation offers several advantages:

• Usability: users can easily navigate and also jump back levels in the page hierarchy.
• Helps users find their way around the site
• Can reduce bounce rate, as visitors can navigate back in the level (e.g. to view more products in a category)
• Is unobtrusive and easy to implement, does not take up much space
• Intuitive use due to simple structure

Breadcrumbs and SEO

Breadcrumbs are not only relevant for a website visitor, but also for search engine optimization. A breadcrumb navigation is seen as a positive signal for user-friendliness – and in SEO this is an important factor for a good ranking.

Breadcrumbs also help search engine crawlers to understand the structure of a website. So that a user can click on the individual levels of the breadcrumb navigation, these are linked internally. The web crawler also follows these links. This enables it to better recognize the relevance and structure of the pages. Even before a visitor even calls up an internet page, he can already come into contact with its breadcrumbs. Google displays them as rich snippets in the SERPs. Thus, the breadcrumb replaces the usually displayed URL in the search results. Due to the easy readability, this is often more pleasant for the user and an influence on the click rate.