How To Use Website Breadcrumbs on Your Website

Fluffy yellow balls in a row.

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

  1. Location or hierarchy-based breadcrumbs
  2. History or path-based breadcrumbs
  3. 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.

Shopify page with hierarchical breadcrumbs: Home, Selling Online & Offline followed by article title

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. 

Wayfair product page shows path-based breadcrumbs with a "back to results" button

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. 

Pura Vida product line page features attribute-based breadcrumbs

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

  1. Enhanced user experience
  2. Improved crawlability and page ranking
  3. Reduced bounce rates

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.

Screen grab of Shopify article in Google search about SEO. 

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

  1. Keep it simple and clean
  2. Consider size, placement, and design
  3. Use a horizontal layout
  4. Be consistent
  5. Include clickable links
  6. Highlight the current page
  7. Use responsive design
  8. Test for usability
  9. 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.