Breadcrumbs (or breadcrumb trail) are a navigation system that shows the location in a site or app. The term comes from the Hansel and Gretel fairy tale in which the main characters create a trail of breadcrumbs in order to track back to their home.

Breadcrumbs serve as a visual “cue”, indicating the location of the current screen within the context of your site’s or app’s hierarchy of screens. They typically appear as horizontal text links, separated by the “greater than” symbol (>).

Home > Search > Search Results > Details

Breadcrumbs are typically a secondary form of navigation in a website or web app but can be the primary navigation in a mobile UI experience – like how you navigate ‘Settings’ in a smartphone.

Benefits of Breadcrumbs

Breadcrumbs enhance the experience because people hate being lost. When confronted with a new location, people often look around in search of recognizable objects or landmarks – and the same is true of websites or app. Breadcrumbs reduce “friction” since they are a common interface element that instantly shows people where they are and a way out.

  • Breadcrumbs can lower bounce rates because you’re offering visitors an alternative way to browse your site.
  • For commerce experiences, breadcrumbs afford one-click access to higher site levels and thus rescue customers who “parachute” into a specific destination through search or deep links.
  • For websites and web apps, Google loves them. They give Google another way of figuring out how your site or app is structured and may also use them in the actual search results, which makes your result much more enticing to prospective customers.

Types of Breadcrumbs

Location Based

Location-based breadcrumbs are a representation of a site’s or app’s structure. They facilitate understanding and navigation of your site’s or app’s content hierarchy. The breadcrumb trail displays the links in the order they connect in your sitemap or app hierarchy.

Search > Results > Details.

Attribute Based

Attribute-based breadcrumb lists the categories to the specific page or most often product — as this kind of breadcrumb type are useful for e-commerce sites. This type of breadcrumbs helps the visitors to understand the relationship of products and offers a different approach. The breadcrumb trail is usually made up of product attributes.

Home > Product category > Gender > Size > Color.

Path Based

Path-based breadcrumbs (also known as a “history trail”) show the entire path traveled to reach a particular screen. This type of breadcrumb link needs to be dynamically generated using state logic. Path-based breadcrumbs can be helpful for some applications where you need to drilldown on information and know how to get back to a particular place in your investigation. Think of these as an alternative to your internet history bar, so you get something like this:

Home > Previous page > Previous page > Previous page > Current page.

Breadcrumbs are powerful because they use so little screen real estate for such great benefits. They help your customer’s better find their way through your site or app. And they instill confidence and trust in your solutions and brand.

What are breadcrumbs? Why are they important for SEO?. 5 March 2020.

Babich, Nick. How to use breadcrumbs on websites: Best practices and types of breadcrumb navigation. Usersnap.

Forsey, Caroline. 9 Breadcrumb Tips and Examples to Make Your Site Way Easier to Navigate. HubSpot.

Nielsen, Jakob. Breadcrumb Navigation Increasingly Useful. Nielsen Norman Group. April 9, 2007.