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 hierarchy 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 organised hierarchically, e.g. from the homepage to category pages and sub-category pages to product pages.

Incidentally, 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. Breadcrumb navigation works in a similar way – it allows users to easily follow the levels of the website they are visiting and quickly find their way back to the homepage.
The implementation is particularly useful for websites with a deep structure, i.e. numerous categories and subcategories, for easier orientation. However, as 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 integrating breadcrumbs.

What does breadcrumb navigation look like?

Breadcrumb navigation can be found above the fold on a website. This means that it is located in the upper area, which is immediately visible to the user without scrolling. This is important as it helps the visitor to navigate.
As a rule, breadcrumbs have an unobtrusive design. In their function, they are mainly there as an orientation point for the user and should not replace the main navigation or the menu of a website.
Example breadcrumb of this article:

The various hierarchy levels are clickable, with the exception of the last point (usually the homepage). The user can therefore easily navigate back to the individual 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 hierarchy level (start page) is displayed. This variant is the most frequently used type of navigation.

• Path (click path): Depicts the user’s actual click path based on the route they have travelled on the website. This can be very confusing if the user frequently switches back and forth within the hierarchies. This form is therefore rarely used. As the click path is displayed from the entry page onwards, the user can trace the steps taken to reach the target page.

• Attributes (attribute-based): This type of breadcrumb shows the category of the page currently being visited and its assigned attributes. It is often used in online shops where products are sorted according to their properties. In the example below, a pair of shoes falls into the ‘Sneakers’ category. It also has the additional attributes size 38 and the colour white.

Why is the breadcrumb displayed on a website?

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

• Usability: users can navigate easily and also jump back levels in the page hierarchy
• Helps users find their way around the website
• Can reduce bounce rate as visitors can navigate back through the level (e.g. to view other 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 website visitors, but also for search engine optimisation. This is because breadcrumb navigation is seen as a positive signal for user-friendliness – and this is an important factor for a good ranking in SEO.
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 recognise the relevance and structure of the pages. Even before a visitor calls up a website, they can already come into contact with its breadcrumbs. They are sometimes displayed by Google as a rich snippet in the SERPs. This means that the breadcrumb replaces the URL that is usually displayed in the search results. Due to the easy readability, this is often more pleasant for the user and has an influence on the click rate.