top of page

Guide

Step-by-Step Guide: How to Design a Website

Wix Blog

How to Improve Your Website's UX

Wix Blog

Outstanding Website Menus

Breadcrumb


 

What are breadcrumbs?


A breadcrumb, or breadcrumb trail, is a secondary website navigation scheme that displays the location of a page in relation to the rest of the site or web application. Similar but more complex than a status bar, this higher-level of specification allows users to understand and explore a webpage, and makes it possible for them to easily navigate through the different related pages and levels.


Breadcrumb trails are most commonly presented across the top of a page as a series of horizontal links separated by the “greater than” (>) symbol. In certain cases, this sign may be replaced by a small arrow or a slash in order to keep in line with the site’s visual language. Furthermore, when displayed on mobile devices with smaller screens, breadcrumb trails often show only the page immediately before the current one.



Main types of breadcrumbs in web design


1. Location-based


Location-based breadcrumbs show the hierarchical relation between the page currently viewed by the user and those at a higher level. This is the most popular type of breadcrumb navigation, and is most commonly seen in online stores with several categories, subcategories and product pages linked from their homepage.


2. Attribute-based


Attribute-based breadcrumbs present the different attributes users select on a page. Also known as history-based breadcrumb trails, these are almost exclusively seen in eCommerce websites with filtering capabilities.


3. Path-based


Path-based breadcrumbs display the different pages users clicked on in chronological order, allowing them to easily go back to one of the previous pages they visited. The most often-used application of path-based breadcrumb trails is the “Back to results” link.



 

You may also be interested in:


Website menus

UX design



 

Benefits of using breadcrumbs


  • Improved user experience: The main purpose of breadcrumb trails is to offer an alternative way of navigating multi-level websites and provide them with better access to the different categories.

  • Reduced bounce rate: Encouraging web visitors to browse through related pages or effortlessly go back to their starting point makes them less likely to exit the site.

  • Structured internal linking: Categorizing a site hierarchically makes it easier to connect webpages to higher-level pages immediately above them and ensure the entire platform follows the same internal strategy.

  • Optimize SEO crawling: Search engines use breadcrumbs to crawl sites and categorize its content. By providing them with a breadcrumb trail to follow, your site can be indexed faster and thus might be more likely to rank higher on the search results.

  • Enhanced SERP presence: In 2015, Google replaced the URL on its site results with the site name and breadcrumb trail of the page. Since then, defining a breadcrumb trail for your site gives you more control over how your website or web application is perceived by potential visitors and offers the opportunity to further optimize your SERP presence.

Related Term

User Interface (UI)

Related Term

User Experience Design (UXD)

Ready to create your own website?

The latest trends in business, marketing & web design. Delivered straight to your inbox.

Thanks for submitting!

bottom of page