Breadcrumb navigation is a supplementary tool you can offer visitors to your website to help them find the information or products they want quickly and efficiently. Breadcrumbs are a great way to keep browsers on your ecommerce store. Read what the best practices for implementing them are, and see what types of breadcrumbs are available.
What are breadcrumbs on a website?
Website breadcrumbs are a navigational aid used to help visitors understand and keep track of their location within a website’s structure. They’re like a trail of digital breadcrumbs, similar to the actual breadcrumb trail Hansel and Gretel left in the fairy tale so they could find their way home. There are numerous benefits to having breadcrumbs on your site; they can improve both user experience and a site’s overall SEO performance.
Types of website breadcrumbs
- Location or hierarchy-based breadcrumbs
- History or path-based breadcrumbs
- Attribute-based breadcrumbs
There’s more than one way to add breadcrumbs to your website. Here are three of the most commonly used forms:
Location or hierarchy-based breadcrumbs
These breadcrumbs display the site’s hierarchical structure and are the most commonly used form of website breadcrumbs. They show the full navigational path, including parent pages and subpages, leading to the page users are currently on. For example, it might work like this: Home > Products > Category Page > Subcategory Page > Product Page.
The Shopify retail blog uses hierarchy breadcrumbs to help users navigate the site: You can see the page below has the category page “Selling Online & Offline,” which you can reach from the homepage.
History or path-based breadcrumbs
These breadcrumbs often display the entire path or history the user took to arrive at the current location, like this: Home > Previous Page > Previous Page > Current Page. Sometimes path or history-based breadcrumbs are made simpler by nesting the previously visited pages into a singular Back button.
On Wayfair’s product page, you can click on Back to Results to see the full list of results for area rugs.
Attribute-based breadcrumbs
Attribute-based breadcrumbs display the attributes or tags a user has applied to filter results on a page. These breadcrumbs are most often used on ecommerce sites where customers can choose different attributes to narrow down their product choices, for example by size, color, style, fit, and so on.
In this example, jewelry brand Pura Vida’s website allows you to filter the products in its Harry Potter collection by category, Hogwarts house, and finish. Your selected tags are then displayed on the right side, just above the pieces that fit all these criteria. Here, you can see the attribute-based breadcrumbs showing that the selection is of Hufflepuff rings in gold and silver finishes.
Why use breadcrumb navigation?
By implementing breadcrumbs on your website, you can help customers find their way around more easily and encourage them to explore your product offerings more effectively—but breadcrumb navigation is not necessary or useful for every website.
Sites with simple architecture and few pages don’t always need breadcrumbs. Websites with deep architecture, such as ecommerce sites, containing multiple high-level categories that divide into subcategories and individual product pages, can benefit from website breadcrumbs.
Benefits of breadcrumb navigation
Here are three of the main benefits of using breadcrumb navigation on your ecommerce site:
Enhanced user experience
Breadcrumbs enhance the user experience by making it easier for visitors to navigate your site and safeguards against them getting lost. If a user wants to return to a previous category or a particular page, they can simply click on one of the breadcrumb links rather than using the browser’s Back button or searching for links in the site’s primary navigation menus.
Improved crawlability and page ranking
Breadcrumbs can help search engines understand your site’s structure, hierarchy, and purpose, allowing them to index your site more effectively. This, in turn, can help page rankings and the site’s general visibility in search results. With properly structured data (also known as schema markup), breadcrumbs may appear in Google search results in the URL displayed above the title tag and meta description. In the image below, you can see the breadcrumbs that lead to a Shopify article on SEO marketing.
Reduced bounce rates
Whether they enter your site through the home page or arrive through an organic search query, users are more likely to explore when they can easily navigate and understand your website’s structure. This can reduce bounce rates, increase the time users spend on your site, and improve your chances of conversion.
Breadcrumb navigation best practices
- Keep it simple and clean
- Consider size, placement, and design
- Use a horizontal layout
- Be consistent
- Include clickable links
- Highlight the current page
- Use responsive design
- Test for usability
- Make it accessible
When designing breadcrumb navigation for your website, here are some best practices to keep in mind:
Keep it simple and clean
Make breadcrumbs concise and easy to understand. Use familiar symbols like “>” or “/” between breadcrumb links to separate entries and indicate website hierarchy.
Consider size, placement, and design
Breadcrumb components are generally smaller than page titles or main navigational elements. Most sites place breadcrumbs near the top of the current page, though this can vary with site structure and design. Keep font choices and colors consistent with the rest of the site’s visual identity.
Use a horizontal layout
Breadcrumbs that are horizontally laid out from left to right are most intuitive to website visitors.
Be consistent
Breadcrumb link names should match the page titles used in the main navigation menu.
Include clickable links
Ensure that each breadcrumb link is clickable, allowing users to navigate directly to a previous page in their path or within the site’s hierarchy.
Highlight the current page
The current page often looks different from the others in breadcrumb navigation because it’s the only one that’s not clickable, though you can add other visual elements (bolding, font color, etc.) to make it visually distinct.
Use responsive design
Ensure your breadcrumb navigation is responsive and adjusts for different screen sizes, especially mobile devices.
Test for usability
You can also conduct usability testing to ensure users understand and can easily utilize the breadcrumb navigation while moving around your website.
Make it accessible
Make sure your breadcrumb navigation is accessible to all users, including those who rely on screen readers. Use semantic HTML elements like <nav> and proper ARIA attributes.
Remember that breadcrumb navigation is just one part of your website’s overall user experience. Breadcrumbs act as a secondary form of navigation and should complement other navigational elements to contribute to a seamless browsing experience.
Website breadcrumb FAQ
Should every website have breadcrumbs?
Not every site needs breadcrumb navigation. Sites with simple structures and few landing pages generally do not need it. By contrast, websites with a deep architecture and many pages, such as ecommerce sites, would likely benefit from it.
Where is the best place to put breadcrumbs?
Placement of navigational breadcrumbs can vary with site design and structure, though most sites put breadcrumbs at the top of the current page, either below the main navigation bar or above the page title. Most users instinctively look for breadcrumbs at the top of a page.
Why do visitors need breadcrumb navigation?
Breadcrumb navigation can help visitors make their way around your website, enhancing their experience and encouraging them to spend more time there. This can lead to additional benefits like increased conversions and repeat visits. It is also a simple and digestible way to help users understand your site architecture, which is especially helpful for complex sites that tend to have multiple categories, subcategories, and product pages.
Do breadcrumbs help with SEO?
Breadcrumbs can support and enhance your website’s SEO by helping visitors navigate your site and improving user experience, which can reduce bounce rates. Breadcrumbs also help search engines understand your site’s hierarchy and purpose, which can help your site rank higher and improve visibility in organic search.
What mistakes should I avoid when using breadcrumbs on a site?
When adding breadcrumbs to your site, make sure they are a good fit for your architecture. Breadcrumb trails are best for sites with complex architecture and multiple pages. Keep in mind that breadcrumbs are a secondary navigation scheme and cannot take the place of well-designed information architecture and thoughtful primary navigation. Follow other best practices, including size, placement, layout, and accessibility.
