A breadcrumb is the short trail of links near the top of a page, such as Home > Shoes > Running shoes, showing where the page sits in the site. Visitors use it to step back up a level. Marked up with BreadcrumbList structured data, it also helps Google understand your site's hierarchy.
| Type | Example | Best for |
|---|---|---|
| Location (hierarchy) | Home > Shoes > Running shoes | Shops, blogs and most sites |
| Attribute | Shoes > Size 9 > Blue | Showing filters chosen on a product list |
| Path (history) | The pages this visitor clicked through | Rarely useful; the browser back button already does this |
Updated
The name comes from the fairy tale trail of crumbs. On a website it is a secondary menu, so it never replaces the main navigation. Below you will find the accessible HTML pattern from the W3C, the structured data Google reads, and a builder that writes both from your own trail.
Your trail, one level per line: Name | full address
Home | https://www.example.com/
Shoes | https://www.example.com/shoes/
Running shoesHome / Shoes / Running shoes
<nav aria-label="Breadcrumb" class="breadcrumb">
<ol>
<li><a href="https://www.example.com/">Home</a></li>
<li><a href="https://www.example.com/shoes/">Shoes</a></li>
<li><a aria-current="page">Running shoes</a></li>
</ol>
</nav><script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "BreadcrumbList",
"itemListElement": [
{
"@type": "ListItem",
"position": 1,
"name": "Home",
"item": "https://www.example.com/"
},
{
"@type": "ListItem",
"position": 2,
"name": "Shoes",
"item": "https://www.example.com/shoes/"
},
{
"@type": "ListItem",
"position": 3,
"name": "Running shoes"
}
]
}
</script>Built in your browser from what you type. Nothing is uploaded.
This CSS draws a small chevron before every crumb except the first, so the separators never appear in the text a screen reader announces.
Edit the names to try it. The chevrons come from the ::before rule, not from characters in the HTML.
<style>
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: .25rem .5rem; list-style: none; margin: 0; padding: 0; }
.breadcrumb li + li::before { content: ""; display: inline-block; margin-right: .5rem; width: .4rem; height: .4rem;
border-right: 1px solid currentColor; border-top: 1px solid currentColor; transform: rotate(45deg); vertical-align: middle; }
.breadcrumb [aria-current="page"] { color: inherit; font-weight: 600; text-decoration: none; }
</style>
<nav aria-label="Breadcrumb" class="breadcrumb">
<ol>
<li><a href="#">Home</a></li>
<li><a href="#">Shoes</a></li>
<li><a href="#" aria-current="page">Running shoes</a></li>
</ol>
</nav>The WAI-ARIA Authoring Practices pattern has three requirements: put the trail in a navigation landmark, label that landmark with aria-label or aria-labelledby, and set aria-current to page on the link to the current page. MDN describes the page value of aria-current as the link to the current document in a breadcrumb.
The W3C example structures the links as an ordered list and draws the separators with CSS borders, so assistive technology announces only the page names.
Schema.org explains that the position property is used to reconstruct the order of the items, with lower numbers first. Start at 1 for the top of the trail, usually your home page or a main category.
JSON-LD, a block of structured data in a script tag, is the easiest format to add because it lives apart from your visible HTML. The builder below writes it from the same list that drives the visible trail.
Google's breadcrumb documentation says it uses breadcrumb markup in the body of a page to categorize the information on it. They also give crawlers more internal links up the hierarchy. They are not a ranking shortcut by themselves.
An itemListElement array of at least two ListItem entries. Each needs a name, a position starting at 1, and an item with the page URL. The last crumb may leave out item, in which case Google uses the URL of the page it is on.
The W3C pattern does include it as the final link, marked with aria-current set to page. Many sites show it as plain text instead. Either is fine as long as screen reader users can tell which item is current.
A nav element with a label such as aria-label="Breadcrumb", and an ordered list inside it. The W3C example uses exactly that, because the order of the links carries meaning.
Yes. Google's page shows an example with two BreadcrumbList items for a page reachable through two categories. Show both trails to visitors too, so the markup matches the page.
Related: Schema markup generator, Schema markup validator, Orphan pages, On-page SEO checklist.
Start for free or see all free tools. We.Inc is free to start, with no card needed. AI building is on paid plans from $20 a month.
We.Inc is an AI-powered website builder you can resell under your own brand. Launch a branded client dashboard, bill on Stripe Connect, and deliver AI-generated websites in minutes. White-label plans start at $99 a month for 25 client sites, with a 7-day free trial and no per-site fees.