Breadcrumbs on websites are a type of navigation aid that allows users to keep track of their current location within a website’s hierarchy. Breadcrumb navigation gets its name from the story of Hansel and Gretel, who used a trail of breadcrumbs to find their way back home. Similarly, breadcrumb navigation allows website visitors to track their path back to the home page of a website from the page they’re currently on. We’ll go over how breadcrumbs help users, show you some examples of breadcrumbs, and explain how to create a breadcrumb trail.

Benefits Of Using Breadcrumbs Navigation

Breadcrumbs navigation makes it easy for users to navigate around complicated websites. They improve the user experience by clearly showing the website’s structure, helping users understand their current location and how they can return to previous pages without relying on the back button. This feature is especially useful on complex websites with multiple levels of content. Secondly, breadcrumbs support better Search Engine Optimisation (SEO) by providing search engines with a clear view of the structure of a website, potentially boosting the site’s ranking in Google search results. 

Last but not least, they can help reduce bounce rates by encouraging users to explore the site more instead of leaving if they can’t find what they’re looking for immediately. Reduced bounce rates lead to better conversion rates: The longer someone spends exploring your site, the more likely they are to convert into a paying customer or client. Overall, integrating breadcrumbs is a straightforward way to make sites more user-friendly and search-engine-friendly.

Different Types Of Breadcrumb Navigation

There are three main types of breadcrumb navigation used in web design, each serving a unique purpose.  Each breadcrumb type enhances navigation in different ways, making it important to choose the right one for your site’s needs.

The most common types of website breadcrumbs are:

• Hierarchy-based breadcrumbs
• Attribute-based breadcrumbs
• Path-based breadcrumbs

Hierarchy-Based Breadcrumbs

Hierarchy-based breadcrumbs, otherwise known as location-based breadcrumb navigation, are the most possible breadcrumb path you’ll stumble across. Location-based breadcrumbs show the user their position within the website hierarchy, providing a clear path from the home page to the current page. Each part of the breadcrumb is usually separated by a “greater than” symbol (>) or similar divider, with the last item in the trail (the current page) often presented as plain text rather than a clickable link. This keeps the trail clear and easy to follow.

We use location-based breadcrumb navigation on our own website. For example, if you find yourself reading SEO articles on our website, you’ll see the breadcrumb trail Home > Resources> Search Engine Optimisation at the top left of the screen. Had enough of SEO? Users can quickly go back to the resources page and jump ship to read about website design instead or go back to the homepage.

Attribute-Based Breadcrumbs

Unlike location-based breadcrumbs that follow the site’s fixed hierarchy, attribute-based breadcrumbs are dynamic and change based on the attributes the user selects. This flexibility makes them particularly useful for navigating complex inventories or content libraries.  A mainstay of eCommerce websites, these breadcrumbs display the categories or attributes that the user has selected or that apply to the current product or page. Attributes can include things like brand, size, colour, or any other characteristic that helps define the item.

Path-Based Breadcrumbs

Path-based breadcrumbs, also known as history-based breadcrumbs, show the entire path a user took to get to the current page they’re on rather than just the attribute of that page of the site’s overall hierarchy. The breadcrumbs are unique to that user and their browsing session, providing a more personalised experience and allowing the user to retrace their steps more easily. The catch is that users don’t always browse in a logical way, often jumping around wildly instead, meaning path-based breadcrumbs can quickly become convoluted on large sites. They’re better suited for simple sites where users can only take so many paths, where the benefits to the user’s navigation experience outweigh the potential for confusion.

How To Add Breadcrumb Navigation To Your Website Design

Implementing breadcrumb navigation on your website is more of a necessity than an option if you have a large site and want to provide a positive user experience, especially for eCommerce. Fortunately, the process of including breadcrumbs on your website is straightforward enough. To get started, decide which type of breadcrumb suits your site best: location-based for hierarchical structures, path-based for tracking user navigation, or attribute-based for sites with filtering options. Once you have made your choice, follow these steps:

1. Map out your site’s structure: Understand and outline your website’s hierarchy or the paths users might take. This step is crucial for location-based and attribute-based breadcrumbs.
2. Design your breadcrumbs: Keep the design simple and intuitive. Breadcrumbs should be easy to read and click but shouldn’t overshadow the main content. Use arrows, chevrons, or slashes to indicate the path progression.
3. Place breadcrumbs consistently: Breadcrumbs are generally placed at the top of a page, below the navigation bar, but above the page title. Consistent placement helps users quickly find and use them.
4. Implement breadcrumbs in code: For location-based and attribute-based breadcrumbs, you can manually create links based on your site structure or use plugins that automatically generate breadcrumb trails. Popular SEO plugins for WordPress, like Rankmath and Yoast SEO, have built-in functionality that allows you to place breadcrumbs within a page. This might sometimes need tweaking but generally works quite well out of the box. For path-based breadcrumbs, consider using session or cookie data to track and display the user’s path.
5. Integrate with SEO: Use structured data markup, like Schema.org’s breadcrumb list, to help search engines understand and display your breadcrumbs in search results. This step is beneficial for improving your site’s SEO.
6. Test and refine: Once breadcrumbs are implemented, test them with real users. Look for any navigation issues or confusion and refine the design or placement as needed.

Breadcrumb Trail Best Practices

There are a few rules you should always follow if you want your breadcrumbs to be more of a help to users than a hindrance. Most importantly, your breadcrumbs should be intuitive and easy to understand. They should clearly indicate the user’s current location within the site’s hierarchy and provide a clear path back to previous pages. You can achieve this by using descriptive labels and a logical hierarchy of page links.

Secondly, ensure your breadcrumbs integrate seamlessly into your website’s overall design. They should be visually consistent with the rest of your site’s navigation and design elements and not be obtrusive or distracting to the user. Last but not least, it’s important to ensure that your breadcrumbs are always up-to-date and accurate. If a user clicks on a link in the breadcrumb trail and ends up on a different page than expected, it can be confusing and frustrating. Regularly review and update your breadcrumbs to ensure that they always provide accurate and helpful information to your users, especially if you frequently change your website’s site structure.

There are a few other things you need to cross off your checklist to design better breadcrumbs:

1. Keep It Simple: Breadcrumb menus should be straightforward, with concise text that clearly describes each page or category. Avoid using lengthy titles or complex jargon that could confuse users. 
2. Use a Logical Hierarchy: The breadcrumb trail must reflect a logical structure, aiding users in understanding your site’s layout. Each step should logically follow the previous one, providing a clear path back to the home page or main category.
3. Ensure Clickability: Breadcrumbs are links. Apart from the current page, every item in the breadcrumb trail should be clickable unless you want frustrated users.
4. Maintain Consistency: For the best user experience, place breadcrumbs consistently across pages and maintain uniform separators between levels. This consistency allow uses to find breadcrumbs and retrace their steps quickly.
5. Highlight the Current Page: Make sure to clearly indicate the current page within the breadcrumb trail. Typically, the current page is shown as non-clickable text and may be styled differently to emphasise that it’s the final point in the navigation path.
6. Don’t Use Breadcrumbs as the Primary Navigation Menu: Breadcrumbs should act as a secondary navigation scheme and never replace the main navigation bar at the top of the page. Your main navigation should remain clear and intuitive, with breadcrumbs providing additional guidance. 

Using Breadcrumb Navigation 

Using breadcrumb navigation isn’t always necessary. If they have no practical benefit to the user, they only risk overwhelming the user with too many navigation options. To strike the right balance, we prefer path-based breadcrumbs and ensure breadcrumbs appear when users are at least two clicks deep. Here’s an example of a website we decided where applying breadcrumb trails was unnecessary: https://curlycuts.com.au/

Ultimately, we make an educated call on how far into the website a user is and how likely they are to need context about their location on a website. The only way to do this accurately is to carefully consider the user’s needs and behaviour. This is always the key tenet of good web design, whether you’re developing an entire website or just implementing small features like breadcrumb navigation. It helps us create seamless and intuitive websites that never fail to deliver a positive user experience.