Breadcrumb Navigation in Website Design: Outdated or Trending?

Breadcrumb is a type of navigation which helps a website user to trail the path back. The term ‘breadcrumb’ comes from the famous ‘Hansel and Gretel’ fairy tale in which two kids drop breadcrumbs so that they can easily trace their way back home.Breadcrumb navigation is used for the same purpose in website and web applications. In short, breadcrumbs are the short links, kept horizontally, separated by the ‘greater than’ symbol, ‘>’ to indicate the level of the each link is greater than the next one. For example in an eCommerce website: Men > Apparels > Shirts are the breadcrumbs.

Types of Breadcrumbs

Breadcrumbs can either be on the basis of: location, path and attribute.

1.Location based

The location based breadcrumb navigation is used in the websites that have a huge amount of content in the hierarchical manner. Each text link in a horizontal line is at the greater level than the next one and the last one is the actual location, the website page on which you are landed.

2.Path based

The path based breadcrumb navigation shows the entire path traveled by the user to reach on a particular page. It displays all the pages a user visited before he reached to the present page.

3.Attribute based

The attribute based breadcrumb navigation tracks the attributes of the page. The best example can be given through an eCommerce website.

Breadcrumbs Symbols: An Important Consideration

As mentioned earlier, the most of the times, ‘greater than’ symbol (>) is used in the breadcrumbs between the links., but that is not the only way. We can also use right angle quotation marks, right arrows, slashes and many more. There is a reason behind using any symbol and one should choose the one that suits the website.

If the breadcrumbs are location based, then ‘>’ can be used as it will be in hierarchical manner. For the path based breadcrumbs, there is no need for ‘>’ symbol as it is not necessary that the pages visited will be in hierarchical order.

You can used slash sign ‘/’ for the path based breadcrumbs.

If there is any kind of process, then each link should be separated by the right arrow.

Is It In Or Dated?

Breadcrumb navigation has been one of the most useful web design features all these years. It is convenient for users as it reduces the number of time users have to click to get back to the higher level visited pages. It is better than keep on clicking ‘Back’ button numerous times. The best thing is that it does not affect the looks of the web page adversely. Moreover, it is a compact mechanism not taking much of the page space as it is just the text with links in a horizontal line. It works the best when a user has landed to site through Google search. In this situation, if the user goes back he will get out of the website straight away. Instead, the visitor can click on the higher level links from the breadcrumbs to gain more information. Breadcrumbs help users know their current location in the website or web application.

Everything has it’s own merits and demerits, so breadcrumbs navigation has too. If the breadcrumbs are not properly updated when more pages are added in the website, there can be inconsistency. As it is does not occupy much space, it will be apt for stylus driven devices but not be suitable for scroll and select devices.

Well, it is not about the latest trends or outdated, it is about the ‘need’. You can use a breadcrumb navigation as a feature or a secondary navigation. You can not replace it with menus, the primary navigation. If you are confused whether you should include this feature or not, here is a decision way. Prepare a site map, see how many levels does it have. If it is a complex multilevel website, having a lot of content inside it, you should use breadcrumb navigation.

So, it is not about they are in or dated. It is like, use them if you need it. It is just an another way to navigate your content driven website!