How to Add Breadcrumb Navigation to Your Website

What breadcrumb functionality does

A breadcrumb trail is a secondary navigation aid. It shows the path from the home page to the current page and turns each step, except the last, into a link:

Home  /  Cakes  /  Birthday cakes  /  Chocolate fudge cake

It does three jobs at once:

• Orientation for visitors. Someone landing on a product page from search sees straight away which section they are in and can move up to browse similar items.
• Internal links. Every page links to its parent sections with clear, descriptive anchor text. That spreads links to category pages and helps crawlers understand the structure. The internal links guide explains why that matters.
• Structure for search engines. With BreadcrumbList structured data, Google can read the hierarchy directly and may use it to describe where the page sits in your site.

Breadcrumbs supplement your main menu; they never replace it. They suit sites with more than two levels: shops, documentation, blogs with categories and service businesses with several locations or services. A one-page site or a flat site with five pages gains little from them.

Types of breadcrumbs and which to use

Use location breadcrumbs that reflect one stable hierarchy. If a product sits in two categories, choose one primary category and use it in the trail every time, so the trail and the markup do not change from visit to visit.

Accessible breadcrumb HTML

The pattern recommended in the W3C's ARIA Authoring Practices is a nav landmark containing an ordered list:

<nav aria-label="Breadcrumb">
  <ol>
    <li><a href="https://example.com/">Home</a></li>
    <li><a href="https://example.com/cakes/">Cakes</a></li>
    <li><a href="https://example.com/cakes/birthday/">Birthday cakes</a></li>
    <li><a href="https://example.com/cakes/birthday/chocolate-fudge/" aria-current="page">Chocolate fudge cake</a></li>
  </ol>
</nav>

Why each part is there:

• nav with aria-label="Breadcrumb" creates a named landmark, so screen reader users can jump straight to it and tell it apart from the main menu. See aria-label not working if it is not announced.
• ol tells assistive technology the items are in order and how many there are.
• aria-current="page" marks the last item as the current page. You can also leave the last item as plain text with no link.

Add the separators with CSS, not as characters in the HTML, so screen readers do not read out a string of slashes:

nav[aria-label="Breadcrumb"] ol { display: flex; flex-wrap: wrap; list-style: none; padding: 0; margin: 0; }
nav[aria-label="Breadcrumb"] li + li::before { content: "/"; margin: 0 0.5em; }
nav[aria-label="Breadcrumb"] [aria-current="page"] { font-weight: 600; text-decoration: none; }

Place the trail above the main heading, after the site header and any skip to content link. Use flex-wrap so long trails wrap on phones rather than overflowing the screen.

Matching BreadcrumbList schema

The visible trail and the structured data should describe the same path. Add a JSON-LD block like this to the same page:

<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": "Cakes", "item": "https://example.com/cakes/" },
    { "@type": "ListItem", "position": 3, "name": "Birthday cakes", "item": "https://example.com/cakes/birthday/" },
    { "@type": "ListItem", "position": 4, "name": "Chocolate fudge cake" }
  ]
}
</script>

• position starts at 1 and counts up in order.
• name is the text shown in the trail.
• item is the full URL of that level. Google allows it to be left out for the last item, which is the current page.
• Use absolute URLs with your canonical host, the same ones your pages declare as canonical.

Google shows breadcrumb paths in desktop search results; since early 2025, mobile results show the site name and domain rather than the trail. The markup is still read on both and remains a clear statement of your site structure. For the format itself see what JSON-LD is, and for common Search Console messages see breadcrumb structured data issues.

Adding breadcrumbs in WordPress, Shopify and custom sites

WordPress

Many themes include breadcrumbs in their customiser settings. If yours does not, an SEO plugin can output both the trail and the schema:

• Yoast SEO: enable breadcrumbs in the plugin settings under Advanced, then add the Yoast breadcrumbs block to your template in the site editor, or add this to a classic theme file such as single.php:

<?php
if ( function_exists( 'yoast_breadcrumb' ) ) {
  yoast_breadcrumb( '<nav aria-label="Breadcrumb">', '</nav>' );
}
?>

• Rank Math: enable breadcrumbs under General Settings, then use its breadcrumb block, its shortcode or rank_math_the_breadcrumbs() in the theme.

Make sure only one source prints breadcrumb schema. A theme and a plugin both adding BreadcrumbList gives two different trails. Edit a child theme, never the parent theme, or updates will remove your change.

Shopify

Some themes have a breadcrumb setting; many, including Dawn, do not. Create a snippet called breadcrumbs.liquid:

<nav aria-label="Breadcrumb">
  <ol>
    <li><a href='{{ routes.root_url }}'>Home</a></li>
    {%- if template contains 'product' and collection -%}
      <li><a href='{{ collection.url }}'>{{ collection.title }}</a></li>
      <li><a href='{{ product.url }}' aria-current="page">{{ product.title }}</a></li>
    {%- elsif template contains 'product' -%}
      <li><a href='{{ product.url }}' aria-current="page">{{ product.title }}</a></li>
    {%- elsif template contains 'collection' -%}
      <li><a href='{{ collection.url }}' aria-current="page">{{ collection.title }}</a></li>
    {%- endif -%}
  </ol>
</nav>

Render it with {% render 'breadcrumbs' %} in your product and collection sections. A product only has a collection object when the visitor arrived through a collection URL, which is why the snippet falls back to Home and the product. See building schema on Shopify for the matching JSON-LD.

Hand-coded and framework sites

Build the trail from one data source, such as the URL path or your page tree, and generate both the HTML and the JSON-LD from that same array. That way the two can never disagree.

A worked example

Example Bakery sells cakes online. Its product URLs look like /cakes/birthday/chocolate-fudge/, but product pages have no breadcrumbs, and its theme prints a BreadcrumbList with only Home and the product name.

1. It decides the hierarchy: Home, then Cakes, then the cake type, then the product, using one primary category per product.
2. It adds the accessible HTML trail above the product heading, with separators drawn in CSS.
3. It switches off the theme's breadcrumb schema and outputs a new block from the same data that builds the visible trail.
4. The Rich Results Test shows one valid Breadcrumbs item with four positions; the visible trail and the markup name the same pages.
5. A screen reader announces Breadcrumb, navigation, list, 4 items, and the last item is read as the current page.

Within a few weeks the Breadcrumbs report in Search Console lists the product pages as valid, and the category pages gain internal links from every product beneath them.

The fix, step by step

Edge cases worth knowing

• Products in several categories. Pick one primary category for the trail. Shifting trails confuse visitors and produce inconsistent markup.
• Home page. Do not show breadcrumbs on the home page; there is nowhere above it to go.
• Levels with no page. If a level in the trail has no real page, such as a folder in the URL with nothing at that address, do not link to it. Either create a useful category page or leave that level out.
• Paginated categories. Page 2 of a category still belongs to the category; keep the same trail. See pagination SEO.
• Redirected or non-canonical URLs in the trail. Every link in the trail should go straight to a live, canonical page, not through a redirect.
• Very long names. Shorten trail labels rather than the page title, but keep them recognisable.

Keeping breadcrumbs accurate

• Generate breadcrumbs from your category structure, not by hand, so a renamed category updates everywhere.
• After changing categories or URLs, crawl the site and check for trail links that return 404 or redirect. The broken internal links guide covers this.
• Check the Breadcrumbs report in Search Console monthly for new invalid items.
• Re-test one page per template after theme or plugin updates, both visually and in the Rich Results Test.