Breadcrumb navigation might look like a small detail, but it carries a huge weight in user experience, SEO, and conversion rates. Whether you run an e-commerce shop with thousands of categories or a content-heavy blog, a well-designed breadcrumb trail helps users understand where they are and how to go back without burning through the browser back button.
In this practical guide, we will break down the three main breadcrumb patterns, show you when to use each one, and share clean CSS snippets you can copy directly into your project.
What Is Breadcrumb Navigation?
Breadcrumb navigation is a secondary navigation pattern that displays the user’s location within a website hierarchy, usually as a horizontal trail near the top of the page. The name comes from the Hansel and Gretel fairy tale, where breadcrumbs were dropped to mark a path home.
A typical breadcrumb looks like this:
Home > Men > Shoes > Running Sneakers
It is small, unobtrusive, and never meant to replace the main navigation. Instead, it complements it by offering quick access to parent categories.
The 3 Main Breadcrumb Navigation Patterns
Not all breadcrumbs work the same way. Choosing the right type depends on your site structure and user behavior.
1. Location-Based Breadcrumbs
These reflect the site’s hierarchical structure. They show users where the current page sits inside the website tree, regardless of how they arrived there.
Best for: Multi-level websites with clear categories such as documentation sites, government portals, or news magazines.
Example: Home > Blog > Web Design > Navigation Patterns
2. Attribute-Based Breadcrumbs
Attribute breadcrumbs display the characteristics or filters of the current page rather than its position in the hierarchy. They are especially common in e-commerce stores with faceted search.
Best for: Online stores, product catalogs, and listings with multiple filters.
Example: Home > Women > Dresses > Red > Size M
3. Path-Based (History) Breadcrumbs
Path-based breadcrumbs show the actual route the user took to reach the current page. While they sound user-friendly, they often duplicate the browser back button and can confuse users.
Best for: Web applications with linear workflows, like checkout funnels or multi-step forms.
Example: Dashboard > Orders > Order #4521 > Refund Request
Quick Comparison: Which Breadcrumb Type Should You Use?
| Pattern | Best Use Case | SEO Value | UX Strength |
|---|---|---|---|
| Location-Based | Blogs, docs, content sites | High | High |
| Attribute-Based | E-commerce, faceted search | Medium | High |
| Path-Based | Web apps, dashboards | Low | Medium |
Breadcrumb Navigation Design Best Practices
Following these guidelines will keep your breadcrumbs functional and accessible:
- Place them near the top: Just below the main navigation, above the page title.
- Keep them small: They should never compete visually with the primary navigation.
- Use clear separators: A simple
>,/, or chevron icon works best. - Make the current page non-clickable: The last item should not be a link.
- Use semantic HTML: Wrap them in a
<nav>element with anaria-label="Breadcrumb". - Add structured data: Implement
BreadcrumbListschema to get rich results in Google. - Truncate on mobile: Long trails should collapse or scroll horizontally.
Real Examples from Top Websites
Amazon (Attribute-Based)
Amazon uses attribute breadcrumbs that combine category and filters. Each level is clickable and reflects the search facets applied. This helps users backtrack to a broader product set with one click.
BBC News (Location-Based)
The BBC uses minimal location-based breadcrumbs that show section and subsection. They reinforce the site’s information architecture without distracting from the article.
GOV.UK (Location-Based, Minimalist)
The UK government’s design system uses a clean, accessible breadcrumb with chevrons. It is one of the most accessibility-friendly implementations available, with strong contrast and keyboard support.
Shopify Admin (Path-Based)
Shopify’s dashboard uses path-based breadcrumbs to help merchants navigate between settings, orders, and individual records. Each step reflects the user’s journey through the app.
CSS Examples You Can Copy
1. Clean Modern Breadcrumb with Chevrons
<nav aria-label="Breadcrumb" class="breadcrumb">
<ol>
<li><a href="/">Home</a></li>
<li><a href="/blog">Blog</a></li>
<li aria-current="page">Breadcrumb Design</li>
</ol>
</nav>
<style>
.breadcrumb ol {
display: flex;
flex-wrap: wrap;
list-style: none;
padding: 0;
margin: 0;
font-size: 14px;
color: #555;
}
.breadcrumb li + li::before {
content: "\203A";
margin: 0 8px;
color: #999;
}
.breadcrumb a {
color: #0066cc;
text-decoration: none;
}
.breadcrumb a:hover {
text-decoration: underline;
}
.breadcrumb li[aria-current="page"] {
color: #222;
font-weight: 600;
}
</style>2. Pill-Style Breadcrumb (Great for E-commerce)
<style>
.breadcrumb-pills ol {
display: flex;
gap: 6px;
list-style: none;
padding: 0;
}
.breadcrumb-pills li a,
.breadcrumb-pills li span {
display: inline-block;
background: #f1f3f5;
padding: 6px 12px;
border-radius: 999px;
font-size: 13px;
color: #333;
text-decoration: none;
}
.breadcrumb-pills li a:hover {
background: #e0e4e8;
}
.breadcrumb-pills li[aria-current="page"] span {
background: #0066cc;
color: #fff;
}
</style>3. Responsive Breadcrumb with Truncation
<style>
.breadcrumb-responsive ol {
display: flex;
overflow-x: auto;
white-space: nowrap;
scrollbar-width: none;
list-style: none;
padding: 8px 0;
}
.breadcrumb-responsive ol::-webkit-scrollbar {
display: none;
}
@media (max-width: 600px) {
.breadcrumb-responsive li:not(:last-child):not(:first-child) {
display: none;
}
.breadcrumb-responsive li:first-child::after {
content: " ... ";
margin: 0 6px;
color: #999;
}
}
</style>Don’t Forget Structured Data
To help Google display your breadcrumbs in search results, add JSON-LD structured data to your pages:
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "BreadcrumbList",
"itemListElement": [
{
"@type": "ListItem",
"position": 1,
"name": "Home",
"item": "https://fatcowwebdesign.com/"
},
{
"@type": "ListItem",
"position": 2,
"name": "Blog",
"item": "https://fatcowwebdesign.com/blog/"
},
{
"@type": "ListItem",
"position": 3,
"name": "Breadcrumb Design"
}
]
}
</script>
Common Mistakes to Avoid
- Using breadcrumbs as the primary navigation: They are a complement, not a replacement.
- Showing them on the homepage: There is nothing to backtrack to.
- Making the last item a link: Users should not click to reload the same page.
- Cluttered separators: Avoid heavy icons or oversized arrows.
- Forgetting accessibility: Always include
aria-labelandaria-current.
FAQ
What is breadcrumb style navigation?
Breadcrumb style navigation is a horizontal trail of links showing a user’s position within a website’s hierarchy. It usually sits near the top of the page and helps users move back to parent pages quickly.
What is the breadcrumb rule?
The main rule is that breadcrumbs should always reflect the site’s structure or the user’s path clearly, place the current page last as non-clickable text, and never replace the main navigation menu.
Should breadcrumbs be inside a nav element?
Yes. Wrapping breadcrumbs in a <nav> element with aria-label="Breadcrumb" is the recommended accessibility practice, as it lets screen readers identify the trail as navigation.
Do breadcrumbs help SEO?
Absolutely. Breadcrumbs improve internal linking, distribute page authority, and when paired with BreadcrumbList schema, they can appear directly in Google search results, boosting click-through rates.
Where should breadcrumbs be placed on a page?
Place breadcrumbs at the top of the content area, just below the main navigation and above the page title. This is the convention users expect, and it keeps the trail visible without intruding on the content.
Final Thoughts
Good breadcrumb navigation design is the kind of detail your users will never compliment, but they will absolutely notice when it is missing. Choose the right pattern for your site type, keep the styling clean, and don’t forget the accessibility and structured data. Done right, breadcrumbs are one of the easiest UX upgrades you can ship this quarter.
Need help redesigning your site’s navigation? Our team at FatCow Web Design builds intuitive, conversion-friendly websites that put users first. Get in touch and let’s talk about your project.
