Breadcrumb navigation is a secondary website navigation system that shows the position of the current page within a website and provides links back to its higher-level pages. A common breadcrumb looks like Home > Blog > SEO > Breadcrumb Navigation.

Breadcrumb navigation works by arranging pages, categories or previously selected attributes into a short trail. The main types of breadcrumb navigation are Location-Based Breadcrumbs, Attribute-Based Breadcrumbs and Path-Based Breadcrumbs. Location-based breadcrumbs are the most common type for normal hierarchical websites.

Types, components, properties, purpose, sitemap difference, uses, benefits, risks, SEO impact, best practices, common mistakes and implementation of breadcrumb navigation are explained below.

What is breadcrumb navigation?

Breadcrumb navigation is a secondary navigation system that displays the current page’s position within a website hierarchy and provides a path to its parent pages.

For example, a visitor reading an article under the Technical SEO category can see:

Home > SEO > Technical SEO > Breadcrumb Navigation

What is an example of a breadcrumb?

An example of breadcrumb navigation on an online computer store is:

Home > Computers > Components > Graphics Cards > RTX 5070

A visitor viewing the RTX 5070 page can select Graphics Cards to see other graphics cards, Components to move to a broader hardware category or Computers to move farther up the website hierarchy.

Another example for a blog is:

Home > Blog > SEO > Technical SEO > Breadcrumb Navigation

An example for a documentation website is:

Documentation > WordPress > SEO > Breadcrumbs

What are the types of breadcrumb navigation?

The types of breadcrumb navigation are Location-Based Breadcrumbs, Attribute-Based Breadcrumbs and Path-Based Breadcrumbs. These three classifications are also described by established design systems.

1. Location-Based Breadcrumbs: Location-based breadcrumbs show where the current page exists inside the fixed website hierarchy. They are also called hierarchy-based breadcrumbs. An example is Home > Computers > Storage > SSDs > Samsung 990 Pro. This type is suitable for blogs, documentation sites, ecommerce websites and other sites with clear categories.
2. Attribute-Based Breadcrumbs: Attribute-based breadcrumbs show properties, filters or attributes associated with the current selection. An ecommerce example is Shoes > Men’s > Running > Black > Size 10. Attribute breadcrumbs are useful for product catalogs and faceted navigation where visitors narrow a large set of products using filters.
3. Path-Based Breadcrumbs: Path-based breadcrumbs show the route a particular visitor followed before reaching the current page. They are also called history-based breadcrumbs. An example is Search Results > Laptop Comparison > Product Page. Unlike location-based breadcrumbs, this trail can change depending on the user’s browsing history. Baymard’s ecommerce usability research found value in combining hierarchy navigation with a history-oriented “back to results” mechanism where users need to preserve filters or sorting.

What are the components of breadcrumb navigation?

The components of breadcrumb navigation are Breadcrumb Container, Root Item, Intermediate Items, Links, Separators, Current Page and Breadcrumb Structured Data.

1. Breadcrumb Container: The breadcrumb container holds the complete navigation trail. Accessible implementations commonly use a <nav> element with a label such as aria-label="Breadcrumb".
2. Root Item: The root item represents the highest useful level, commonly Home or the main section of an application.
3. Intermediate Items: Intermediate items represent categories, parent pages or sections between the root and current page.
4. Breadcrumb Links: Parent breadcrumb items are normally clickable links that let users move upward in the hierarchy.
5. Separators: Separators visually divide breadcrumb items. Common separators are >, /, → and ›. Separators are presentation rather than destinations.
6. Current Page: The last item normally identifies the page currently being viewed. W3C guidance allows the current location to be plain text, or it can be a link identified using aria-current="page".
7. Breadcrumb Structured Data: A website can describe the breadcrumb trail to search engines using Schema.org BreadcrumbList structured data. Google supports this markup for breadcrumb presentation in Search.

What are the properties of breadcrumb navigation?

The main properties of breadcrumb navigation are Order, Label, Link, Position, Current State, Separator and Hierarchical Relationship.

For search-engine structured data, Google uses a BreadcrumbList containing ordered ListItem objects. Important breadcrumb structured-data properties are itemListElement, position, name and item. Google requires at least two ListItem entries for breadcrumb structured data to be eligible for its breadcrumb feature. The item property is not required on the last breadcrumb because Google can use the URL of the containing page.

What is the purpose of breadcrumb navigation?

The purpose of breadcrumb navigation is to show location, provide upward navigation, expose website structure and help visitors understand the relationship between the current page and its parent pages. They can easily navigate or define the hierarchy of pages.

What is the difference between sitemap and breadcrumb navigation?

The difference between a sitemap and breadcrumb navigation is that a sitemap describes a wider set of website pages, while breadcrumb navigation describes the path or hierarchy related to one current page.

What are the uses of breadcrumb navigation?

The uses of breadcrumb navigation are Website Orientation, Parent-Page Navigation, Category Navigation, Product Browsing, Documentation Navigation, Filter Representation, Internal Linking and Search Appearance.

1. Website Orientation: Breadcrumbs tell users where the current page exists inside the website.
2. Parent-Page Navigation: Users can move from a detailed page to a broader parent page without reopening the main menu.
3. Category Navigation: Blogs, news websites and knowledge bases use breadcrumbs to connect articles with categories and sections.
4. Product Browsing: Ecommerce websites use breadcrumbs to connect product pages with product categories and subcategories.
5. Filter Representation: Attribute-based breadcrumbs can represent selected product properties such as brand, color, size and price.
6. Documentation Navigation: Documentation sites use breadcrumb trails to show relationships between products, sections, topics and individual documentation pages.
7. Internal Linking: Breadcrumb links create crawlable connections between child pages and related parent pages. Google says internal links help both users and Google understand and find other pages on a website.
8. Search Appearance: BreadcrumbList structured data can make a page eligible for breadcrumb presentation in Google Search. Google does not guarantee that structured-data features will always be displayed.

What are the benefits of breadcrumb navigation?

The benefits of breadcrumb navigation are Better Orientation, Faster Navigation, Better Internal Linking, Clearer Site Hierarchy, Better Mobile Context and Improved Search Appearance.

Better Orientation: Breadcrumbs immediately tell visitors where they are within the website.

Faster Navigation: A visitor can jump several levels upward with one click instead of repeatedly using the Back button or reopening menus.

Clearer Site Hierarchy: Breadcrumbs expose relationships between broad topics, subtopics and individual pages.

Better Internal Linking: Crawlable breadcrumb links connect deeper pages with their category or parent pages. Google recommends crawlable internal links because they help Google discover pages and understand the website.

Useful Context for Deep Entrances: A visitor arriving directly on a product, article or documentation page can understand the surrounding section without having followed the original navigation path.

Search Appearance: Google can use breadcrumb information as part of the visible URL area in a search result, and supported structured data can influence the breadcrumb trail shown there.

Accessibility Support: Correct semantic HTML and ARIA attributes can make the breadcrumb landmark and current location understandable to assistive technologies.

What are the risks of breadcrumb navigation?

The risks of breadcrumb navigation are Incorrect Hierarchy, Duplicate Navigation, Long Breadcrumb Trails, Mobile Crowding, Broken Links, Inaccessible Markup and Incorrect Structured Data.

Breadcrumb navigation itself is not normally risky. Problems occur when breadcrumbs are implemented incorrectly.

Incorrect Hierarchy: A breadcrumb that displays a category relationship different from the site’s real information architecture can confuse users.

Long Breadcrumb Trails: Very deep websites can produce breadcrumbs containing many items. This becomes difficult to scan, especially on small screens.

Mobile Crowding: Long labels can consume too much horizontal space. Baymard’s mobile usability research found that hiding important hierarchy levels can also make it harder for users to understand their location, so shortening the trail must be handled carefully.

Duplicate Systems: Showing breadcrumbs from a theme and another breadcrumb plugin at the same time can create duplicate trails. Rank Math specifically recommends ensuring it is the only system producing the breadcrumb when its breadcrumb functionality is used.

Broken Parent Links: Breadcrumb links that return 404 errors or lead to unrelated sections weaken the navigation.

Accessibility Problems: Separators announced unnecessarily by screen readers, missing navigation labels or an unclear current-page state can reduce accessibility. W3C recommends a labeled navigation landmark and an appropriate current-page indication.

Incorrect Structured Data: Breadcrumb schema that does not accurately represent the page can become invalid or violate Google’s structured-data guidelines. Google states that markup outside its guidelines can result in a structured-data manual action.

How does breadcrumb navigation impact SEO?

Breadcrumb navigation can impact SEO through internal linking, site structure, crawlability, content context and search-result presentation.

Firstly, breadcrumb links create additional internal links between detailed pages and their parent pages. Google states that internal links can help people and Google understand a site and find other pages.

Secondly, breadcrumbs communicate website hierarchy. Google’s SEO Starter Guide recommends organizing sites logically because understandable relationships between pages can help both users and search engines.

lastly, breadcrumb structured data describes this hierarchy in a machine-readable format. Google supports BreadcrumbList and can use breadcrumb information when presenting the visible URL in Search.

What are the best practices for breadcrumb navigation?

The best practices for breadcrumb navigation are using a logical hierarchy, using descriptive labels, keeping parent items clickable, placing breadcrumbs consistently, supporting accessibility, making breadcrumbs responsive, adding structured data and testing the final implementation.

1. Use the user’s logical hierarchy: Google recommends breadcrumbs that represent a typical user path rather than simply copying every part of the URL structure.
2. Prefer location-based breadcrumbs for hierarchical sites: Location-based trails give every visitor a stable representation of where the page exists regardless of the route used to reach it.
3. Use short and descriptive labels: Breadcrumb names should clearly identify each page or category. Avoid vague labels such as “Page” or “Section.”
4. Keep higher levels clickable: Parent breadcrumb items should normally use standard crawlable <a href> links. Google recommends crawlable links for page discovery.
5. Show the current location clearly: Place the current page at the end. If it is represented by a link, identify it using aria-current="page"; alternatively, the current page can be plain text.
6. Use semantic HTML: Place the trail inside a <nav> landmark and use a list, commonly <ol>, to represent the ordered sequence. W3C’s breadcrumb pattern uses this approach.
7. Treat separators as presentation: Do not create unnecessary clickable separator characters. Decorative separators should not produce distracting announcements for assistive technologies.
8. Keep breadcrumbs close to the top of the content: Breadcrumbs commonly appear below the main site navigation and above the page heading. This location makes the current hierarchy visible before users begin reading.
9. Design for mobile screens: Preserve useful hierarchy while allowing long trails to scroll, wrap carefully or use another space-efficient treatment. Removing important category levels can remove the context breadcrumbs are designed to provide.
10. Add <strong>BreadcrumbList</strong> structured data: Use valid itemListElement, position, name and item values.
11. Keep visible and structured breadcrumbs consistent: Structured data should describe the real page and navigation rather than an artificial hierarchy created only for search engines.
12. Test the implementation: Google recommends testing breadcrumb structured data with its Rich Results Test and checking deployed pages through URL Inspection and Search Console.

What are the common mistakes of breadcrumb navigation?

The common mistakes of breadcrumb navigation are Using Wrong Hierarchy, Copying URLs Blindly, Linking the Current Page Unnecessarily, Missing Parent Levels, Using Non-Crawlable Links, Duplicating Breadcrumbs, Creating Long Trails, Ignoring Mobile Devices, Ignoring Accessibility and Adding Invalid Schema.

1. Using the wrong hierarchy: The breadcrumb says one thing while categories and navigation say another.
2. Copying the complete URL structure: A URL folder does not always represent the best path for a user. Google recommends representing a typical user path instead of automatically mirroring URLs.
3. Treating breadcrumbs as the main navigation: Breadcrumbs are secondary navigation and should not replace an understandable primary menu.
4. Removing important hierarchy levels: Users can lose context when meaningful categories are omitted, particularly on ecommerce product pages.
5. Using JavaScript elements that are not normal crawlable links: Use real anchor links for breadcrumb destinations when possible.
6. Showing two breadcrumb systems: A theme, ecommerce platform and SEO plugin can sometimes generate competing breadcrumb trails.
7. Using unnecessarily long labels: Long breadcrumb text makes the trail difficult to scan and difficult to fit on mobile screens.
8. Making separators confusing: Separators should visually divide levels, not look like additional links.
9. Ignoring accessibility: A breadcrumb without an accessible navigation label or clear current-page indication can provide less information to assistive-technology users.
10. Adding incorrect Breadcrumb Schema: Incorrect position, URLs or hierarchy can create structured-data errors.

How do I implement breadcrumb navigation on my website?

To implement breadcrumb navigation on a website, there are 8 main steps. Firstly define the website hierarchy. Secondly generate the breadcrumb trail. Thirdly create crawlable links. Fourthly mark the current page. Fifthly add accessibility markup. Sixthly add structured data. Seventhly test the trail. Eighthly monitor the implementation.

1. Define the website hierarchy:
Determine the real parent-child relationship for each page.

Example:

Home → Blog → SEO → Technical SEO → Breadcrumb Navigation

2. Generate the visible breadcrumb:
Create the breadcrumb from those hierarchy levels.

3. Link parent pages:
Use normal HTML links for all navigable parent levels.

4. Identify the current page:
Display the current page as the final item.

5. Add semantic and accessible markup:
A basic custom breadcrumb can use:

<nav aria-label="Breadcrumb">
  <ol class="breadcrumbs">
    <li><a href="/">Home</a></li>
    <li><a href="/seo/">SEO</a></li>
    <li><a href="/seo/technical/">Technical SEO</a></li>
    <li aria-current="page">Breadcrumb Navigation</li>
  </ol>
</nav>

This follows the same basic semantic pattern described by W3C: a labeled navigation landmark containing an ordered sequence with the current page identified at the end.

6. Add Breadcrumb Schema:
A corresponding JSON-LD implementation can be:

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "BreadcrumbList",
  "itemListElement": [
    {
      "@type": "ListItem",
      "position": 1,
      "name": "Home",
      "item": "https://example.com/"
    },
    {
      "@type": "ListItem",
      "position": 2,
      "name": "SEO",
      "item": "https://example.com/seo/"
    },
    {
      "@type": "ListItem",
      "position": 3,
      "name": "Technical SEO",
      "item": "https://uppleadseo.com/seo/technical/"
    },
    {
      "@type": "ListItem",
      "position": 4,
      "name": "Breadcrumb Navigation"
    }
  ]
}
</script>

Google supports JSON-LD breadcrumb markup using BreadcrumbList and ordered ListItem entries.

7. Test the implementation:
Check all parent links, mobile layout and accessibility. Validate structured data with Google’s Rich Results Test.

8. Monitor Search Console:
After deployment, monitor structured-data errors and inspect pages after major template changes. Google specifically recommends monitoring breadcrumb structured data after first implementation and after significant template updates.

How to Add Breadcrumbs with Yoast SEO?

To add breadcrumbs with Yoast SEO, go to WordPress Dashboard → Yoast SEO → Settings → Advanced → Breadcrumbs, turn Enable breadcrumbs for your theme on, configure the breadcrumb appearance and save the changes.

If the WordPress theme already supports Yoast breadcrumbs, the breadcrumbs can be displayed through that integration. Yoast also provides a Breadcrumbs block for individual posts and pages.

The Yoast shortcode is:

[wpseo_breadcrumb]

For a theme template, Yoast documents the following function:

<?php
if ( function_exists('yoast_breadcrumb') ) {
    yoast_breadcrumb( '<p id="breadcrumbs">', '</p>' );
}
?>

Theme-file modifications should normally be made through a child theme or another update-safe method because direct edits can be overwritten by theme updates. Yoast also outputs breadcrumb JSON-LD data for its breadcrumb implementation.

How to Add Breadcrumbs with Rank Math?

To add breadcrumbs with Rank Math, first use Advanced Mode when necessary, then go to Rank Math SEO → General Settings → Breadcrumbs and enable the breadcrumb function. Rank Math provides options for the separator, homepage link, labels, categories and other breadcrumb settings.

Rank Math’s shortcode is:

[rank_math_breadcrumb]

For a theme template, Rank Math provides:

<?php
if ( function_exists('rank_math_the_breadcrumbs') ) {
    rank_math_the_breadcrumbs();
}
?>

Rank Math recommends using a child theme when editing template files. It also warns against allowing another plugin or theme breadcrumb system to produce a second breadcrumb trail at the same time.

How to Add Breadcrumbs on a Custom Website?

To add breadcrumbs on a custom website, generate the breadcrumb from the website’s information architecture, output the parent levels as HTML links and add matching BreadcrumbList JSON-LD.

For example, a page at:

Home > Computers > Components > Storage > SSD

should connect every parent level to its actual destination.

The application should determine:

Current Page → Parent → Parent’s Parent → Root

The hierarchy is then reversed for display:

Root → Parent’s Parent → Parent → Current Page

For a database-driven website, store or derive the parent ID, category ID, slug, title and canonical URL for each hierarchy level. The application can then generate both the visible breadcrumb and structured data from the same source. Using one source reduces the risk that the visible breadcrumb and Schema markup describe different hierarchies.

After implementation, make sure parent links are standard crawlable links, use a labeled navigation landmark, identify the current page correctly and validate the structured data.

What is the Right Time to Use Breadcrumb Navigation?

The right time to use breadcrumb navigation is when a website has multiple hierarchical levels, many categories, deep pages or users who regularly enter the website somewhere other than the homepage.

Breadcrumb navigation is especially useful for:

Ecommerce Websites: Product pages commonly sit below departments, categories and subcategories.

Large Blogs: Articles can sit inside topic categories and subcategories.

Documentation Websites: Documentation usually contains products, versions, sections and individual topics.

News and Publishing Websites: Articles can belong to sections and sub-sections.

Directories: Locations, industries and listing categories often create several hierarchy levels.

Knowledge Bases: Support content normally follows product and topic hierarchies.

Large Corporate Websites: Services, resources and departmental pages can contain several layers.

How does breadcrumb navigation relate to semantic SEO?

Breadcrumb navigation relates to semantic SEO by expressing meaningful relationships between pages, categories and topics in both human-readable navigation and machine-readable structured data.

For example:

Home > Computers > Computer Components > Storage > SSD

does more than provide five links. It expresses that SSD belongs to Storage, Storage belongs to Computer Components, and Computer Components belongs to the wider Computers section.

Breadcrumb navigation supports semantic organization in four main ways.

Page Relationships: Breadcrumbs expose parent-child relationships between pages.

Contextual Anchor Text: Labels such as Computer Components, Storage and SSD provide descriptive context about the linked pages. Google states that descriptive internal-link text helps users and Google understand linked pages.

Structured Meaning: BreadcrumbList, ListItem, name, item and position convert the breadcrumb hierarchy into structured information that search systems can parse. Schema.org defines BreadcrumbList as an ordered chain of linked web pages, while Google supports it as breadcrumb structured data.

Consistent Information Architecture: Repeating a logical category structure through navigation, internal links and breadcrumbs gives users and search engines a consistent description of how pages relate to each other. Google’s SEO Starter Guide recommends logical site organization because it helps users and search engines understand relationships between pages.