A breadcrumb is a secondary navigation aid that improves customer experience by helping users understand their location on a website or mobile application. <\/p>\n\n\n\n
The term \u2018breadcrumb\u2019 or \u2018breadcrumb trail\u2019 is borrowed from the story of \u2018Hansel and Gretel\u2019 where the kids drop a trail of breadcrumbs to trace their way back home. <\/p>\n\n\n\n
Similarly, breadcrumb navigation is used to indicate the user\u2019s journey along with their current location. A breadcrumb menu or trail usually appears in a horizontal line at the top of the user\u2019s current page in the form of clickable links. <\/p>\n\n\n\n
To provide a clear representation of the user\u2019s journey, each of these links is separated by a particular sign such as an arrow or the \u2018greater than\u2019 (>) symbol. <\/p>\n\n\n\n
The most popular breadcrumb navigation example was seen in Microsoft\u2019s Windows Vista, following which the \u2018breadcrumb trail\u2019 became an essential feature in every Windows edition. <\/p>\n\n\n\n One of the main reasons for using breadcrumb navigation<\/a> is that it instantly shows the user’s location, while also providing a clear visual representation of the website\u2019s hierarchy and orientation.<\/p>\n\n\n\n Since users often struggle to identify the overall structure of a website, a breadcrumb trail solves this challenge and allows them to easily navigate from a particular page to different parent pages. <\/p>\n\n\n\n Apart from the primary navigation menus<\/a>, it is crucial to have breadcrumb navigation as well so that users can easily find what they want and spend more time on your website. <\/p>\n\n\n Location-based breadcrumbs help a user go to a broader category (higher-level page) from the page they are on. <\/p>\n\n\n\n Consider someone who is searching for a pair of desert shoes. They click on one of the Google search results and land on the product page of your e-commerce site. After going through the page, they want to explore some more options. <\/p>\n\n\n\n How can the user now go back to the main category page (Men\u2019s Shoes) or a sub-category page (Men\u2019s Shoes – Desert Shoes)?<\/p>\n\n\n\n A hierarchy-based breadcrumb trail allows users to see their current location with respect to the other pages of your site. Moreover, this breadcrumb type also helps them to easily move to any one of these pages.<\/p>\n\n\n\n In the above image, you can see how Best Buy uses location-based breadcrumb navigation, making it easier for the user to jump to any of the relevant categories.<\/p>\n\n\n This breadcrumb path serves the same purpose as the browser back button, letting a user go back to a previous page they visited. <\/p>\n\n\n\n This is quite useful, especially when the user has reached the product page after applying multiple filters on the category page.<\/p>\n\n\n\n With path-based breadcrumbs, the user can quickly jump to one of the previous pages in their journey, with all of their current selections intact.<\/p>\n\n\n\n The most common application of history-based breadcrumbs is the use of the \u2018Back To Results\u2019 link, as seen in the above example.<\/p>\n\n\n As the name suggests, attribute-based breadcrumbs simply show the attributes a user has selected on a particular page. <\/p>\n\n\n\n These breadcrumb trails are often used by e-commerce platforms<\/a>, where users are given the option to select product attributes and filter search results on a category page.<\/p>\n\n\n\n Initially conceptualized as a simple navigation aid, breadcrumb navigation has slowly come to affect various aspects of a user\u2019s online experience.<\/p>\n\n\n\n Let\u2019s look at some of the most important benefits of using breadcrumbs on websites and applications.<\/p>\n\n\n If a user reaches a product page that they are not interested in, they will either leave the site or go back to the category page to start over. <\/p>\n\n\n\n Breadcrumb trails encourage the user to start over instead of leaving the page. In a study conducted by Hull<\/a>, S.S. (2004), it was found that users who received instructions to use breadcrumbs completed tasks much faster than users who received no such instructions. <\/p>\n\n\n\n Also, if you have a complex site hierarchy with multiple categories and sections, a breadcrumb trail will make it easier for users to find the information they want. <\/p>\n\n\n\n This improves the overall experience of the user and encourages them to spend more time on your website, reducing drop-offs and bounce rates<\/a>. <\/p>\n\n\n In simple terms, findability is all about making it easier for users to find information on your website. <\/p>\n\n\n\n Using breadcrumbs can help improve findability as it allows your website users to easily navigate through different pages and find exactly what they are looking for. <\/p>\n\n\n\n Findability also plays an important role in improving the overall user experience. <\/p>\n\n\n Breadcrumb navigation is known to reduce anxiety among users as it gives them a clear idea of a specific process. <\/p>\n\n\n\n For instance, once you start a free trial of VWO<\/a>, you are asked to set up your account, which involves a few mandatory steps. <\/p>\n\n\n\n To avoid confusion and reduce user anxiety, VWO uses a breadcrumb trail to provide a clear indication of the number of steps involved in this process. <\/p>\n\n\n\n It also allows users to go back to any of the previous steps whenever they want. This gives the user a clear idea about the commitment (time and effort) required to complete this process. <\/p>\n\n\n\n Once a user initiates an attempt, a breadcrumb trail acts as a strong motivator to finish the process. <\/p>\n\n\n A breadcrumb trail takes up very little space on a page and has also remained fairly consistent in its appearance over the years.<\/p>\n\n\n\n This makes the trail instantly recognizable and therefore, offers maximum value to the users.<\/p>\n\n\n Breadcrumbs never cause problems in user testing<\/a>. Also, people pay attention to breadcrumbs only 30% of the time and when they do take notice, they offer instant navigational cues to the user.<\/p>\n\n\n\n Now that you know the benefits of breadcrumbs, let\u2019s understand if you should use them on your website.<\/p>\n\n\n\n Even though there are no major drawbacks to using breadcrumb navigation, you still need to decide whether your website even needs it. <\/p>\n\n\n\n Since breadcrumbs are meant to act as a navigational aid for websites having complex hierarchies or multiple categories, using them would not make sense if you have a simple site structure. <\/p>\n\n\n\n In this case, using a breadcrumb trail does not offer any valuable benefit and can even confuse users. <\/p>\n\n\n\n However, if you feel that breadcrumbs can make navigation easier for your users, then you should go ahead and use them. <\/p>\n\n\n Once you decide on using breadcrumbs, the next step is to implement schema markup. This part involves adding a separate code to your website with the aim to provide structured data to search engines. <\/p>\n\n\n\n In other words, the breadcrumb schema markup allows search engines to understand your site\u2019s hierarchy, which helps them display the breadcrumbs within the search results in an informative way.<\/p>\n\n\n\n Google gives you the option<\/a> to add schema markup to the existing breadcrumb navigation on your website. You can use either JSON-LD, RDF, Microdata, or HTML to insert the breadcrumb schema, depending on the format you are using. <\/p>\n\n\n\n Here\u2019s an example of the schema markup for a single breadcrumb trail in HTML: <\/p>\n\n\n\n In case you are using a Content Management System<\/a> (CMS), Google recommends using a plugin that\u2019s integrated with the CMS itself.<\/p>\n\n\n\n In the below image, you can see how Google breaks the URL and displays breadcrumbs in the search result itself. This is possible because the website has implemented schema markup. <\/p>\n\n\n\n One of the major breadcrumb schema benefits is that users instantly understand your site\u2019s structure which helps them make informed decisions. This improves your click-through rate<\/a> and enhances the overall user experience. <\/p>\n\n\n\n Breadcrumbs help users understand the site architecture and also make it easier for them to find relevant information.<\/p>\n\n\n\n Moreover, breadcrumb schema markup helps Google crawl and index your pages more effectively. Apart from displaying a breadcrumb trail within Google search results, users are also shown rich snippets with additional information and context. <\/p>\n\n\n\n A rich snippet is basically another type of search result that offers extra information in the form of clickable links. These snippets provide additional context in search results, which again helps in improving the click-through rate<\/a>. <\/p>\n\n\n\n In the above example, you can see additional information like ratings and votes displayed with the search result itself. Combined with reduced bounce rates and improved visibility, breadcrumb navigation ends up having a positive impact on your website’s SEO.<\/p>\n\n\n Before you go about adding breadcrumbs and implementing the breadcrumb schema, there are a few important pointers that you should keep in mind.<\/p>\n\n\n\n Let\u2019s take a quick look at some best practices that will help you enjoy the benefits of breadcrumb navigation. <\/p>\n\n\n The main goal of a breadcrumb trail is to provide a clear representation of the user\u2019s journey from a certain starting point right up to the current page. <\/p>\n\n\n\n For this, you need to ensure that the breadcrumb trail displays the entire path and does not exclude any part of the journey. <\/p>\n\n\n A breadcrumb trail works best when it displays the user\u2019s journey from one end to the other. <\/p>\n\n\n\n Including the homepage in the trail and displaying the logical categories acts like a strong anchor giving a strong sense of orientation to the users.<\/p>\n\n\n\n This helps users easily retrace their journey and go back to any higher-level page.<\/p>\n\n\n Although it is not mandatory, the \u2018greater than\u2019 (>) symbol is commonly used as a separator in breadcrumb trails all over the internet. <\/p>\n\n\n\n People are used to it and they instantly recognize what it represents. So, it only makes sense to use the same symbol on your website too. But, in case you want to experiment, try using colons (:) or arrows (->) in your breadcrumb trails. <\/p>\n\n\n Breadcrumbs act as a secondary navigation scheme, which is why they need to appear at the top of the current page.<\/p>\n\n\n\n However, they should not replace your primary navigation menu. A good placement for breadcrumbs<\/a> is just below the main navigation bar and above the page title.<\/p>\n\n\n Even though it occupies very little space, you need to ensure the trail is easily visible so that users can take advantage of the navigation path.<\/p>\n\n\n\n Adding a contrasting color is a great best practice for breadcrumb navigation and helps the trail stand out among the other information on your page. <\/p>\n\n\n Boldfacing the last item or the current page gives it prominence and tells the user \u2018This is where you are currently\u2019.<\/p>\n\n\n\n It is a great way to provide instant cues about the user\u2019s current location and helps them navigate between the higher-level pages and lower-level pages.<\/p>\n\n\n Why would you hyperlink a text that leads to the same page? It does not serve any purpose and can be extremely frustrating for the user. <\/p>\n\n\n\n Instead, as mentioned before, it makes sense to only boldface the last item so that users know about their current location. <\/p>\n\n\n The homepage is where your user\u2019s journey starts. Using a secondary navigation scheme like breadcrumbs on this page would be extremely confusing for the user. <\/p>\n\n\n Adding full-page titles in the breadcrumb link helps users understand where each of the hyperlinks will take them. In case you are dealing with long page titles, you can choose to truncate the title using ellipses (see image below). <\/p>\n\n\n\n In such cases, it’s better to omit phrases such as ‘You are here’ to make space for the more important elements which are the page titles themselves.<\/p>\n\n\n\n The page URL gives users a clear idea about the site hierarchy. <\/p>\n\n\n\n Mirroring the URL and breadcrumb link helps you avoid inconsistent messaging from both of these elements.<\/p>\n\n\n If your site contains only a few pages, without many levels of hierarchy, applying breadcrumb trails won’t be very useful.<\/p>\n\n\n\n Including breadcrumbs in this scenario is unnecessary and potentially confusing to the website visitor. Instead, stick to the primary navigation menu and optimize it so users can navigate your website with ease. <\/p>\n\n\n Now that we\u2019ve had a closer look at some breadcrumb navigation best practices, it\u2019s time to see some real-life examples of breadcrumb navigation.<\/p>\n\n\n LinkedIn offers a variety of courses for users ranging from Team Management to Email Marketing. In the below image, you can see one of these course pages. <\/p>\n\n\n\n LinkedIn uses simple hierarchy-based breadcrumbs to help users go back to any of the previous categories like \u2018Business\u2019 or \u2018Professional Development\u2019. <\/p>\n\n\n In the below image, you can see how Macy’s uses breadcrumbs on its product page. <\/p>\n\n\n\n Here, both location and history-based breadcrumbs are shown. So, if a user does not like the product they can quickly go back a page and choose another product.<\/p>\n\n\n Another breadcrumb navigation example of hierarchy-based breadcrumbs can be seen on the website of Penn Foster<\/a>, a for-profit online college.<\/p>\n\n\n\n With the help of hierarchy-based breadcrumbs, the website allows users to return to a higher-level category page without clicking the back button.<\/p>\n\n\n This is another example that uses two types of breadcrumbs simultaneously. In this image, you can see how e-commerce sites like Flipkart use breadcrumbs navigation.<\/p>\n\n\n\n Flipkart shows both path-based breadcrumbs and attribute-based breadcrumbs to help users quickly understand how they got here and what filters have already been applied.<\/p>\n\n\n Breadcrumb navigation is often used on blogs and other content-related pages.<\/p>\n\n\n\n Here, you can see how Shopify uses hierarchy-based breadcrumbs on one of its blogs. This type of breadcrumb allows users to go back to the main landing page or home page. <\/p>\n\n\n\n Breadcrumbs have been around for more than a decade.<\/p>\n\n\n\n But they have never found much spotlight owing to their permanent status as a navigation bar that appears below the primary navigation menu. <\/p>\n\n\n\n Despite their status, breadcrumb trails are a powerful element to improve user experience<\/a> and boost engagement. From a business standpoint, it helps in both acquisition (think SEO) and conversion (eases on-site navigation).<\/p>\n\n\n\n So should you have breadcrumbs on your site? <\/p>\n\n\n\n Look at your users and ask a simple question – will they benefit? I think that’s the only question worth asking, really.<\/p>\n\n\n\n Note: Some of the screenshots used in the blog belong to the author.<\/p>\n\n\n\nWhy do your visitors need breadcrumb navigation?\u00a0<\/strong><\/h2>\n\n\n
Types of breadcrumbs in website design<\/strong><\/h2>\n\n
Location or Hierarchy-Based Breadcrumbs<\/strong><\/h3>\n\n\n
Path or history-based breadcrumbs<\/strong><\/h3>\n\n\n
Attribute-based breadcrumbs<\/strong><\/h3>\n\n\n
What are the benefits of using breadcrumb navigation?<\/strong><\/h2>\n\n\n
Reduces bounce<\/strong><\/h3>\n\n\n
Improves findability<\/strong><\/h3>\n\n\n
Lowers anxiety<\/strong><\/h3>\n\n\n
Has little to no drawbacks<\/strong><\/h3>\n\n\n
Should you use breadcrumbs?<\/strong><\/h2>\n\n\n
How to add breadcrumbs to your website?<\/strong><\/h2>\n\n\n
Explore A\/B Testing Tools<\/strong><\/a><\/em><\/h3>\n\n\n
How do breadcrumbs help in improving SEO?<\/strong><\/h2>\n\n\n
Breadcrumb navigation best practices<\/strong><\/h2>\n\n\n
Display the full breadcrumb trail<\/strong><\/h3>\n\n\n
Start with the home page<\/strong><\/h3>\n\n\n
Use \u2018>\u2019 as a separator between levels<\/strong><\/h3>\n\n\n
Put the breadcrumbs at the top<\/strong><\/h3>\n\n\n
Add some contrast<\/strong><\/h3>\n\n\n
Boldface the last item<\/strong><\/h3>\n\n\n
Do not hyperlink the last item\u00a0<\/strong><\/h3>\n\n\n
Avoid using breadcrumbs on the homepage<\/strong><\/h3>\n\n\n
Use full-page titles in breadcrumbs<\/strong><\/h3>\n\n\n
Page URL should mirror the breadcrumb trail<\/strong><\/h3>\n\n\n
When should you not use breadcrumbs?<\/strong><\/h3>\n\n\n
5 best examples of breadcrumb navigation<\/strong><\/h2>\n\n\n
1. LinkedIn Courses<\/strong><\/h3>\n\n\n
2. Macy\u2019s<\/strong><\/h3>\n\n\n
3. Penn Foster<\/strong><\/h3>\n\n\n
4. Flipkart<\/strong><\/h3>\n\n\n
5. Shopify<\/strong><\/h3>\n\n\n
Breadcrumbs: Secondary in status, primary in value<\/strong><\/h2>\n\n\n
\n\n\nFAQs on Breadcrumbs<\/h2>\n\n\n
![\"A](\"https:\/\/lh6.googleusercontent.com\/p4I7xuqcd5_fMz7B6G2UktStLGmM6lEu4E_vF2xzrEvoFRgN6MLoDLf2ipE_6sb6qhTAuMT-QJ2NtuhpFD2fKJZpppS0jyF8HJqe0u9j-8NSVSvh-3-Ix8xrBCyexmC7EJhqoj6NhYgBIb9PwWZUnpU\")
![\"A](\"https:\/\/lh4.googleusercontent.com\/R9Wm3gNVnj63mVcXNONN5zK34bU7wNqZIyDo0yjIkPAYjiFu1k7jaEHlkMW9S5OMU4PA0Ll4ZbaCoKj5Is14wCq5uV7wiviB0SCzXkYnXMXarnVIOdT3Eq7DuQQGa057gEhH2h4thO9XnRcNBX4DgnM\")
![\"A](\"https:\/\/lh6.googleusercontent.com\/_S23925RfT8MWKRq1YnN9_lvjEdYINj2fp9aDA3Ss5M_1RV8XRiR-h1dWdPeJ0bSXV81727nEZ4Z8v7Y0fKqhh3s1UTKYDqzQxrXE64GeEYW9VPYe6FC-hSa5L_OGnJFfPePrOGqnl55qWCc-BkEJYU\")
![\"A](\"https:\/\/lh3.googleusercontent.com\/pvGJrk8lEzp0VHYB5X8XFpNLYWC5hVMKFoJcHprNcbwUSMtEuyZSX-8CRMqO9Vn3pz2xqonQj_Rk7bCW0xcbl3m27GWO7n4uW0ZsUJwF1b3969prCq293d9ZA6g67hme80yFlm9AIL4xalKSBnr5d4A\")
![\"A](\"https:\/\/lh6.googleusercontent.com\/jvo-QNJkYg8eNpJTx6PFU6PvIWdy7YRSd86aCfbxaEuW6EECyxpT4lNCABBuBDNuFV3hZAWRQZylasNSDzjVAojnVT8_OwitEExy4UD-HZhN5GatZEqtJleFY1Ksaj73EyXEYPjAOQxyC4SYyx_MA2A\")
![\"A](\"https:\/\/lh3.googleusercontent.com\/He8wx2HqraEyYTG7xrF2r8WU-oqP1XCO-q3pwPQhm3Xe7m6ZtRoylwCeUxurAwid35jtunsE0qoB5eS_6AH4GG5pafcGjXFQGk1Bvu-PXi5FqSBCjkiVXn-8sVrMi4KrTCAW8v9tuJBH2TFPGOAvi0o\")
![\"A](\"https:\/\/lh6.googleusercontent.com\/33AJi3fUQuB5wYBaHxwAsYAw-OT0VCpUQQ8Mgzzg84k_XbJeEcuxrG-phkeN4Ih4hBccNAXwlYW7AraPQVfwmqn_Ng1K5eoSxn1Mnaitt98MuXkMZAdszygLaaZ_-JHu2ZYOv9MLPZ4hNMjYZvNy9fY\")
![\"A](\"https:\/\/lh6.googleusercontent.com\/46gb_QPOxy_tZDnIHhDG8alj8XCL1EE9wtg9bnNvfIF5qLzMCQrEn5Hm4xds7OtlUJFVnEbIzwkI1ZEteav288asIl0NM2CMz7GKD0j_nvDYpwISoPJe_A7CHALj4iNNyh64EJkmNknzs6nKdWPds3Y\")
![\"The](\"https:\/\/lh4.googleusercontent.com\/ae3ky7C23QCg6BuhM3YQYCQDhKG8eNsfJdwmYbPdDKw_RC5bCXlV_DhIzhHuV-8X_u7NXFL57PI_3epNuZI5EaP5io_Hhnw0orphmyVfjD-Q-l-Be6oCmC13dAdwIg-mMFVjX7vXmkuKx0P5Kh33ucY\")
![\"The](\"https:\/\/lh3.googleusercontent.com\/VMdMcf1nR0rQMJl_b6-2I29iIJqjlNKjULhDizfDLpCudrKBHzsj1HBlPeNFC6zIj_R3LHq1Cm-pLywVCnBvKZqi1n23hkWSOurPDk2yjzwT801qkKqjRb6NWoE7NsNs8uA7zZpOKPGv0pg1jluWjn4\")
![\"The](\"https:\/\/lh6.googleusercontent.com\/5KfuyehHGZuFQzjLKh7DxcCcVpasyEy8cf-8gMuQYbJ54YrOHEssvyN9hjzqgTsMlcw4ief-dKtd0fBSZF-Eilj3PNT2Si00HROCo60CS0kv7I_8qMNVY2yLKvEzO7UlULqm69x0RDtKYzSMk9RpZLs\")
![\"The](\"https:\/\/lh5.googleusercontent.com\/6wZcDwWgNoZB9dl6cI-JNk4qEY0CwHuaK9mowcgDcs9V3W_q_aqdTjHGkkyddheJ8qfR9ZfKa0QjrLMxygdpzQwF9h5PclR4kPGOIIz5NbADoEASP-GrJQ-aAgW-cuvL9M8dpsqvSrqUDaygSNDh_ek\")
![\"The](\"https:\/\/lh6.googleusercontent.com\/mB-drj5F0OGLQFEKvnLWX1uxRdcHUIzNDHI0af0QnVIXOzhVvN--WeEELTpAXUv0Dx_OTAZFNcV5G8Q70k7uwuGPllG8mneuvYRza-x-GJAhm178lPj6sBuhd8TyDDqBM9sCPJZHczvHGbOwiLHlId4\")
![\"banner](\"https:\/\/static.wingify.com\/gcp\/uploads\/sites\/3\/2015\/10\/RCA-FB-1024x538.png\")
<\/a><\/figure>\n<\/div>","protected":false},"excerpt":{"rendered":"