The breadcrumb navigation in online shops
For online shops, it’s essential to surprise customers with an engaging and compelling customer experience. The better a visitor finds his way through your online shop, the more likely he is to check out with a full shopping cart. You can make the customer’s journey to purchase completion as convenient and comfortable as possible with various measures. One of them is the implementation of breadcrumb navigation.
In this article, we will tell you what breadcrumb navigation is in detail, what the advantages of using breadcrumbs in navigation are, and how you can make good use of this secondary navigation.
What is breadcrumb navigation?
The breadcrumb navigation is a secondary navigation you use to complement your primary navigation. The breadcrumb trail or link path of the breadcrumb navigation is located in the upper area of the web page and serves the visitor for better orientation in your online shop.
The breadcrumb navigation is logically structured from the initial page through the various levels to the current page. Thus, the visitor can see at a glance where he is in the hierarchy of the page structure and how he got there. In addition, there is the option that he or she can easily jump back to any of the stations via the internally set links.
Advantages of breadcrumb navigation
Breadcrumb navigation brings some notable advantages. When customers visit your online shop, it is important that they can intuitively click through the page elements. Breadcrumb navigation contributes significantly to this, as it is relatively self-explanatory. At a glance, the visitor can see in which hierarchical level he is currently located and can also retrace his path. The link path is kept small and space-saving as an element on the page. This means that the secondary navigation has hardly any impact on the overall design.
- Optimized customer experience: Improved navigation on a page necessarily leads to an enhanced customer experience. The sooner visitors find exactly what they’re looking for on your site, the greater the chance they’ll make a purchase. Breadcrumb navigation makes it easy and quick to navigate without always having to return to the main menu. You reduce the bounce rate with breadcrumb navigation and at the same time increase the probability of a smooth checkout.
- Search engine optimization: Breadcrumb navigation is further a way to influence search engine optimization (SEO). The Google bots can follow the clear link path on your website and crawl your pages accordingly. Since 2019, the Breadcrumb Navigation content is displayed in Google’s search results instead of the URL path in some cases. At the same time, the reduced bounce rate is a positive sign for the search engine.
- Increase conversion rate: All the above-mentioned advantages of breadcrumb navigation increase the conversion rate. If your online shop is ranked higher in search results and gains visibility, you will see more visitors. If they can quickly find exactly what they are looking for via the breadcrumb navigation, the user experience in turn increases and the chance that the potential customer will convert to a new customer by completing the purchase.
Always remember: the fewer clicks a user needs to find the solution to a problem, the better the user experience and the higher the conversion probability.
Decide on the most suitable breadcrumb navigation
Unlike the primary navigation, which is your main menu, the breadcrumb navigation is much smaller, more discreet and essentially simpler as well as designed with little text. With the primary navigation system, the user can go directly to the pages that are of primary interest to him or her – for example, a particular category page. The breadcrumb navigation additionally offers the user the possibility to jump back to previously visited pages. For this reason, breadcrumb navigation is used as a secondary navigation only in support of your main navigation. In the upper area it is recognizable as a small row of links.
When displaying the breadcrumb navigation, you can work with arrow symbols, slash signs or the “greater than” sign. They are used to visualize the link path logically and map the path of the hierarchy.
There are three different types of breadcrumb navigation:
- Location-Based: Shows the current position in the web page hierarchy
- Click-Path (Path): Shows the click path used
- Categories (Attributes): Refers to the category and the search functions used
Location-Based Breadcrumb Navigation
Home > Category XY > Product XY
Location-Based breadcrumb navigation represents the website structure and shows the visitor the current position within the website hierarchy. It is used quite often.
Click Path Navigation
Home > Category 1 > Home > Category 3 > Category 2 > Home
It is easy to see that click path navigation looks complicated and in most cases does not strengthen the user experience, but on the contrary weakens it by confusion. Thus, click-path navigation is rather less suitable for complex pages. Rather, you should rely on a simplified breadcrumb navigation.
Breadcrumb navigation by category
Home > Clothing > Men > Pants > Jeans > Blue > Size 32
For most online shops, breadcrumb navigation based on categories is interesting. This breadcrumb navigation represents the greatest added value for the visitor, as it is extremely informative from the user’s point of view. At the same time, you can include your most important keywords in the link path.
When a breadcrumb navigation is essential
A breadcrumb navigation is not relevant for all websites. However, unless you have a complex website with subordinate pages that cannot be accessed from different pages, you should not do without its implementation. Consequently, a breadcrumb navigation is always useful if several pages are created linearly. Experts advise to integrate breadcrumb navigation from three levels. Small websites with few subpages usually do not need breadcrumb navigation.
Smaller online shops with few product categories and a manageable assortment are thus not necessarily dependent on breadcrumb navigation. However, if your online shop has several product categories and the product range is larger, breadcrumb navigation helps your customers and visitors find their way around.
How to use breadcrumb navigation
Breadcrumb navigation can increase user experience and make crawling easier for Google bots. However, this only works if you use breadcrumb navigation correctly. The following tips will help you with this.
Implement breadcrumb
You can implement the breadcrumb navigation on your website in different ways:
- Content Management System (CMS): If you have a CMS system like WordPress or Typo3, the integration of the breadcrumb navigation is simply done via your backend. You may need to install a plugin first. To create the breadcrumb navigation, use the information from your metadata.
- PHP/JavaScript: You can embed the breadcrumb navigation as code in PHP or JavaScript.
- HTML: It is also possible to define the link path using HMTL. Here the summary is done via Div and the design via CSS.
Build breadcrumbs usefully
Pay particular attention to a logical and coherent structure for breadcrumb navigation. A breadcrumb navigation is always read from right to left. The right link marks the current position. The preceding links mark the way. Never skip a level on the breadcrumb trail. Only if all levels build on each other in a sensible way, the visitor can find his way and discover your page comfortably.
Furthermore, keep the breadcrumb navigation consistent and use keywords that clearly reflect the content of the page. Link the individual stations so that the user can also jump back to the appropriate level.
Ideally, make the breadcrumb navigation stand out a bit from the rest of your website design so that it still remains discreetly in the background. Basically, the breadcrumb navigation should be as unobtrusive as possible and still be found quickly by the user when he is looking for orientation. Test, for example with an A/B test different variants and play with colors of the breadcrumb navigation.
Optimize breadcrumb navigation with keywords
To take advantage of the search engine optimization benefits of breadcrumb navigation, it is important to include keywords in your breadcrumb trail. There are some interesting examples of how websites got significantly more visibility and better rankings on Google in a very short time by including relevant keywords in the breadcrumb navigation. Analyze your most important keywords in advance and add them to the breadcrumb navigation.
Take advantage of breadcrumb navigation
With breadcrumb navigation, you improve navigation on your website and help customers find their way around. Especially if your website consists of many pages and levels or it is an online shop, you should not do without breadcrumb navigation.
By optimizing the user experience, you reduce the bounce rate and increase the conversion rate. At the same time, you increase the chance of a better ranking on Google.
Frequently asked questions about Breadcrumb Navigation
How can online retailers implement breadcrumb navigation?
Three routes are common. In a content management system such as WordPress or Typo3 you add it through the backend, sometimes after installing a plugin, and build the trail from your metadata. Alternatively you embed it as code in PHP or JavaScript. A third option is to define the link path in HTML, grouping it with Div and styling it with CSS.
When do online shops need breadcrumb navigation?
Breadcrumb navigation becomes relevant as soon as a site has several levels; experts advise integrating it from three levels upwards. Small websites with few subpages and smaller shops with a manageable assortment usually manage without it. If your shop has several product categories and a larger range, the trail clearly helps customers find their way around.
What are the benefits of breadcrumb navigation for online shops?
Breadcrumb navigation improves the customer experience, because visitors move between levels without returning to the main menu, which lowers the bounce rate and smooths the way to checkout. It also supports SEO: Google bots follow the clear link path when crawling, and since 2019 the breadcrumb trail is sometimes shown in search results instead of the URL. Together this lifts the conversion rate.
What is breadcrumb navigation?
Breadcrumb navigation is a secondary navigation that complements the primary menu. The link path sits in the upper area of the page and is structured logically from the start page through the various levels to the current page. Visitors see at a glance where they are in the hierarchy, how they got there, and can jump back to any station via the internal links.
Which types of breadcrumb navigation are there?
There are three types. Location-based navigation shows the current position in the page hierarchy, leading from the home page through a category to the product, and is used most often. Click-path navigation reproduces the actual click sequence, which quickly looks confusing and weakens the user experience. Category-based navigation refers to categories and search filters and offers most shops the greatest added value.
How should breadcrumb navigation be structured?
Build the trail logically and never skip a level. It is read from right to left: the right-hand link marks the current position, the preceding ones mark the way. Keep the wording consistent, use keywords that clearly reflect the page content, and link every station so visitors can jump back. Set it off slightly from the design, but keep it discreet and test variants.
What is the difference between primary navigation and breadcrumb navigation?
The primary navigation is your main menu and takes users directly to the pages they are most interested in, such as a category page. Breadcrumb navigation is much smaller, more discreet and text-light, appears as a small row of links in the upper area, and lets users jump back to previously visited levels. It supports the main menu rather than replacing it.
