Website Breadcrumbs: Types, Benefits and Best Practices

Website breadcrumbs are a secondary navigation trail, such as Home > Blog > Post, that shows visitors where they are and lets them jump up a level. Google can also use BreadcrumbList markup to understand a page’s place in your site.

This guide covers the three types, benefits, best practices, WordPress setup and common mistakes. Validate your markup with the Schema Markup Analyzer.

What Are Website Breadcrumbs?

Breadcrumbs are a secondary navigation system that helps users track their location within a website’s hierarchy. This trail shows the path to the current page, allowing users to navigate back to previous sections without using the back button.

Commonly found on e-commerce sites and content-heavy websites, breadcrumbs enhance usability by organizing pages into a clear structure, such as categories and subcategories. For example, a breadcrumb trail might appear as Home > Category > Subcategory > Current Page.

Breadcrumbs add internal links and, with BreadcrumbList markup, give Google a clearer view of where a page sits in your site.

Types of Breadcrumbs with Examples

Breadcrumbs serve as a secondary navigation aid, enhancing user experience by providing a clear path through a website’s structure. Below are the three primary types of breadcrumbs, along with examples:

History-Based Breadcrumbs

These breadcrumbs display the sequence of pages a user has visited, offering a history of their navigation path. They benefit users who want to revisit previously visited pages without retracing their search results.

Example:

Home > Search Results > Product Page

Here, users can navigate back to the search results directly, bypassing intermediate categories.

Attribute-Based Breadcrumbs

Attribute-based breadcrumbs highlight specific attributes or filters applied to arrive at a particular page. Common in e-commerce, they allow users to refine their search further or reset particular filters.

Example:

Home > Electronics > Laptops > Brand: Dell > Price: $500-$1000

This shows the narrowing process based on product features like category, brand, and price range.

Directional or Hierarchical Breadcrumbs

These breadcrumbs present the user’s position within the site’s hierarchical structure. They allow easy navigation between levels of the hierarchy, making them ideal for websites with a well-defined taxonomy.

Example:

Home > Blog > Web Design > Responsive Web Design Tips

This setup provides a top-down view, helping users move between related sections effortlessly.

When Are Breadcrumbs Useful?

Breadcrumb navigation is especially useful for large websites or those with a clear hierarchical structure. Websites like e-commerce platforms, news sites, or any website with many pages organized into categories benefit the most from breadcrumb navigation.

For example, an online store with multiple product categories (e.g., Electronics > Phones > Smartphones > Samsung Galaxy S21) uses breadcrumbs to help users track where they are in the navigation structure and quickly navigate back to higher levels.

Breadcrumbs may not be necessary for websites with limited content or flat structures. Sites with just one level of navigation or minimal content may not need breadcrumbs. For instance, a straightforward navigation bar would better serve a simple blog or a single-page website.

However, breadcrumbs should complement, not replace, the primary navigation system. They serve as a secondary navigation form, providing users quick access to other parts of the site without cluttering the primary menu.

Benefits of Breadcrumb Navigation

Below are the top benefits of breadcrumb navigation for websites.

Improves User Experience (UX)

One of the most significant benefits of breadcrumb navigation is improving user experience. Breadcrumbs enhance site usability by reducing the clicks needed to return to a previous page or access higher-level content. Breadcrumbs provide a direct path to higher levels, such as the homepage or category pages.

For example, imagine a visitor on an e-commerce site viewing a product page. If breadcrumbs are available, visitors can quickly return to the parent category or homepage.

Increases Internal Site Linking and SEO

Breadcrumbs are crawlable internal links to parent pages. They help Google find those pages and see how pages relate, but they do not replace a sitemap or good internal linking.

Helps Google Determine Site Structure and Enhance Visibility

Google says it uses breadcrumb markup to categorize the information from a page in search results.

Google lists the breadcrumb search feature as available on desktop, and valid markup does not guarantee it will be shown.

Encourages Exploration and Reduces Bounce Rate

Breadcrumbs help users explore more content on your website by providing quick links to other relevant sections. Visitors following breadcrumb trails may discover new sections or products they weren’t initially seeking.

For example, on an e-commerce site, a visitor might land on a product page for a specific pair of shoes but notice the breadcrumb trail that links to the broader “Footwear” or “New Arrivals” category. With just a click, the user can explore more options without having to navigate away from the current page.

Provides Clear Navigation for Complex Websites

Breadcrumb navigation is a lifesaver on large websites with numerous categories, subcategories, and products. It lets users quickly see where they are within the site structure, helping them understand the relationship between sections and pages.

Reduces the Need for Multiple Menus

Breadcrumbs eliminates the need for users to rely on multiple menus for navigation. A good breadcrumb trail provides a secondary, non-intrusive navigation option that complements the primary menu. Instead of forcing users to click through drop-down menus or multiple categories to find relevant content, breadcrumbs offer an efficient alternative.

Increases Conversion Rates and Sales

Breadcrumbs make it easier to move between categories and related products, but we have no verified figures showing they raise sales on their own. Test the effect on your own site.

Enhances Mobile Navigation

Breadcrumb navigation is handy on mobile devices with limited screen space, and users often navigate through long, scrolling pages. On mobile devices, breadcrumbs provide a compact and efficient way to move between pages, reducing the need for users to scroll to the top of the page or search for a navigation menu.

If you add BreadcrumbList markup, keep it on the mobile version too: Google’s mobile-first indexing guide lists Breadcrumb among the first structured data types to prioritize.

Check your links: the Broken Link Checker finds breadcrumb links that lead to errors, which defeats the purpose of the trail.

Best Practices for Breadcrumb Navigation

Breadcrumb navigation has become a staple of good user experience, especially for websites with complex hierarchies and deep structures.

1) Use Breadcrumb Navigation Only If It Fits Your Site’s Layout.

 

Breadcrumb navigation is most effective on websites with complex hierarchies or multiple content layers. If your site has a simple structure with only a few main pages, breadcrumbs may need to be revised and could clutter the interface.

Breadcrumbs pay off on content-rich or ecommerce sites where people move between categories and subcategories.

2) Make Your Way Down From The Topmost Level.

When designing breadcrumb navigation, it’s crucial to maintain a left-to-right flow that begins with the homepage and ends with the user’s current page. Put the highest-level page first.

Google recommends breadcrumbs that represent a typical user path to a page, instead of mirroring the URL structure.

3) Take design to the next level.

While the standard breadcrumb design uses a horizontal list with a “greater-than” symbol (>) as a separator, experimenting with unique designs can enhance your website’s aesthetic.

Non-traditional separators or stylized fonts can create a cohesive look that reflects your brand’s personality while still being functional. Ensure that any design changes maintain clarity and usability.

4) Decide what breadcrumb navigation works best for your site.

Choosing the right breadcrumb type depends on your site’s structure and user needs. Location-based breadcrumbs help users understand their position within a site’s hierarchy and suit most sites.

Attribute-based breadcrumbs are ideal for sites with customizable products.

History-based breadcrumbs track the visitor’s own path. They suit dynamic apps, but Google recommends markup that shows a typical user path to the page.

5) Breadcrumb navigation should provide the whole route.

Breadcrumbs should display the complete path to ensure users can understand the context and hierarchy of a page, even if they land on it via search.

For example, Home > Admissions > Application Process shows visitors the whole route even if they arrived from Google.

Incomplete breadcrumbs that skip levels can confuse users, reducing their ability to explore related content.

6) Keep the breadcrumb navigation somewhat small.

Breadcrumb navigation should complement, not compete with, your website’s primary navigation. It is best placed below the main navigation bar and should use a smaller font size to avoid visual clutter.

Keep links easy to tap: WCAG 2.2 sets a minimum pointer target size of 24 by 24 CSS pixels, with some exceptions.

7) Match breadcrumb titles to page titles.

Breadcrumb titles should align with the corresponding page titles to ensure clarity and usability. This consistency helps users understand their current location and reinforces SEO by using relevant keywords. For example, Home > Electronics > Headphones > Sony WH-1000XM5 mirrors the titles of each linked page.

8) Make sure it’s fresh and clean.

Breadcrumb navigation should be unobtrusive yet functional, avoiding unnecessary elements or clutter that might distract users. The breadcrumb trail is straightforward, showing only the necessary categories, and excludes redundant phrases like “You are here,” which can clutter the experience.

Some Design Considerations For Breadcrumb Navigation

Clarity and Simplicity

Breadcrumbs should be simple and intuitive and provide users with a clear path to higher-level pages. Overcomplicating breadcrumbs with too many categories or redundant information can confuse visitors.

Placement and Size

Breadcrumbs should be placed in a location that doesn’t interfere with the primary navigation. Typically, they are positioned below the main navigation or header, ensuring they don’t compete for attention with more prominent elements like menus. Additionally, the font size should be smaller than the main navigation but still large enough to be legible.

Responsive Design

With increasing numbers of users accessing websites via mobile devices, breadcrumb navigation must be responsive. It should adapt to different screen sizes and provide a simplified or collapsible format on smaller devices.

Consistent Labeling

The labeling within breadcrumbs should remain consistent with the language and terminology used elsewhere. Inconsistent terms or mismatched category names can confuse.

Clickable Links vs. Non-clickable Elements

It’s important to distinguish between clickable and non-clickable breadcrumb elements. The last item in the breadcrumb trail should not be clickable as it represents the current page. Visual cues like different text styles can help users quickly identify interactive versus non-interactive elements. For accessibility, wrap the trail in a labelled navigation landmark and set aria-current=”page” on the current-page link (W3C ARIA Authoring Practices).

Validate the markup: after setup, paste a page into the Schema Markup Analyzer to confirm the BreadcrumbList is present and readable.

The WordPress Breadcrumb Plugin: How to Install It?

Here’s a step-by-step guide on how to install and configure a WordPress breadcrumb plugin:

1. Choose a Plugin

There are several breadcrumb plugins available for WordPress, with some of the most popular being Yoast SEO and Breadcrumb NavXT. Yoast SEO is an excellent all-in-one solution, while Breadcrumb NavXT is more focused on breadcrumb navigation. Choose the one that suits your needs.

2. Install the Plugin

• Go to your WordPress Dashboard.
• Navigate to Plugins > Add New.
• In the search bar, type the name of the breadcrumb plugin you wish to install (e.g., “Yoast SEO” or “Breadcrumb NavXT”).
• Click Install Now next to the plugin.
• Once installed, click Activate.

3. Configure the Plugin

After activation, most breadcrumb plugins will add a new settings menu under the Settings or SEO tab in the WordPress Dashboard. Follow the steps below to configure:

• Yoast SEO:
  • Go to SEO > Search Appearance and click on the Breadcrumbs tab.
  • Enable breadcrumbs by checking the box and customizing the appearance, such as the separator or breadcrumb prefix.
• Breadcrumb NavXT:
  • Go to Settings > Breadcrumb NavXT.
  • Customize your breadcrumb settings, such as separators, taxonomy inclusion, and appearance.

4. Place the Breadcrumb Code

After configuring the plugin, you need to add the breadcrumb code to your theme:

• If using Yoast SEO, you can add the breadcrumb function by inserting the following code in your theme’s template files (typically header.php or single.php):

Breadcrumb NavXT will usually automatically add breadcrumbs to your pages, but you can manually insert them using the following code in your theme template:

5. Test Your Breadcrumbs

Visit your pages to confirm the trail displays, then validate the BreadcrumbList markup with Google’s Rich Results Test.

Audit the site: the Website SEO Audit flags missing structured data and internal-link problems across a page.

Common Mistakes & Solutions in Breadcrumb Implementation

Common breadcrumb mistakes and how to fix them:

Mistake No 1: Not Using Proper Hierarchy

One of the most common mistakes in breadcrumb navigation is failing to maintain a proper hierarchical structure. Breadcrumbs should represent the logical structure of your website, reflecting the path users have taken to get to the current page. A breadcrumb trail that includes unrelated categories or places users in the wrong order can confuse visitors.

Solution: Ensure that your breadcrumbs follow a top-down structure, starting from the homepage and narrowing down to the current page. For instance, on an e-commerce site, breadcrumbs should look like this: Home > Category > Subcategory > Product.

Mistake No 2: Not Including the Current Page

Another mistake is omitting the current page from the breadcrumb trail. While breadcrumbs are often used as links, some websites fail to include the page the user is currently on. This can confuse, as users may need to realize they are already on the page they wanted.

Solution: Always include the current page as the final element in the breadcrumb trail, but make sure it is not clickable. This provides a clear indication of the user’s current position.

Mistake No 3: Making Breadcrumbs Too Complex or Too Simple

Breadcrumbs that are too detailed or too sparse can both hinder user experience. Too much information, such as unnecessary subcategories, can overwhelm users, while breadcrumbs needing more detail can leave them lost.

Solution: Strive for simplicity and clarity. Avoid overloading breadcrumbs with excessive details. Instead, include only the essential categories to help users navigate without feeling overwhelmed.

Mistake No 4: Not Using Structured Data for SEO

Visible breadcrumbs give Google fewer cues than marked-up ones. Google Search uses BreadcrumbList markup to categorize a page’s information in results, and without valid markup a page is not eligible for the breadcrumb feature.

Solution: Add BreadcrumbList markup in JSON-LD, Microdata or RDFa with at least two ListItems, each with position and name, and an item URL on every item except the last. Old data-vocabulary.org markup is no longer eligible.

Mistake No 5: Overloading with Non-Essential Links

Breadcrumb navigation should not be cluttered with non-essential links like “You are here” or similar phrases. These additional words can create visual clutter and make the navigation trail harder to read, ultimately reducing effectiveness.

Solution: Keep your breadcrumbs as minimal as possible. Eliminate any extra text that doesn’t serve a functional purpose. The primary goal is to provide users with a clear path back to higher levels of the site without distractions.

Mistake No 6: Inconsistent Breadcrumb Labels

Inconsistent labeling in breadcrumb navigation can confuse users. For example, switching between “Home” and “Homepage” or using different terms for the same category in other places can disorient users.

Solution: Maintain consistent terminology throughout your website. Ensure that the names of categories, subcategories, and pages are uniform in your primary and breadcrumb navigation.

Mistake No 7: Not Considering Mobile Users

Breadcrumbs that work well on desktops may perform differently than expected on mobile devices. Many websites need to adapt their breadcrumb navigation for mobile users, making navigating through the site harder, especially on pages with long content.

Solution: Ensure that breadcrumbs are mobile-responsive. On mobile devices, breadcrumbs should be displayed in a clear, concise format that is easy to tap. Consider using a collapsible breadcrumb menu or shortening the breadcrumb trail for smaller screens.

Mistake No 8: Mirroring the URL Structure

A trail that copies the URL path can show levels that visitors never actually pass through.

Solution: Google recommends breadcrumbs that represent a typical user path to a page, instead of mirroring the URL structure.

Mistake No 9: Failing to Test Breadcrumbs

Lastly, many websites need to test breadcrumb navigation thoroughly, which can result in issues that affect user experience. For instance, breadcrumbs may display incorrectly, be unresponsive, or fail to update as the user navigates the site.

Solution: Regularly test breadcrumb functionality, especially after site updates or redesigns. Ensure that breadcrumbs work as expected across all devices and browsers, and conduct user testing to check if they enhance navigation as intended.

Finally, Why Breadcrumbs Are Good for SEO?

Breadcrumbs help visitors and, with valid markup, give Google a clearer view of your site structure. They do not boost rankings by themselves.

FAQs

What are breadcrumbs on a website?

Breadcrumbs are a secondary navigation trail, for example Home > Blog > Post, showing a page’s position in the site hierarchy. Each earlier level is a link, so visitors can go up a level without using the back button.

Are breadcrumbs good for SEO?

Indirectly. Breadcrumbs add internal links, and BreadcrumbList markup lets Google categorize the page in results, a feature Google lists for desktop. They do not boost rankings by themselves, so use them where they help visitors and add valid markup.

What are the three types of breadcrumbs?

Hierarchy (location) breadcrumbs show where a page sits in the site structure. Attribute breadcrumbs list the filters applied, such as brand or price. History breadcrumbs show the pages the visitor viewed. Hierarchy trails suit most sites and are the simplest to maintain.

How do I add breadcrumb structured data?

Add a BreadcrumbList in JSON-LD, Microdata or RDFa with at least two ListItems. Give each item a position and name, and a URL on every item except the last. Then validate it with Google’s Rich Results Test and watch Search Console for errors.