Breadcrumbs are a navigation aid that displays the path from the homepage to the current page. They appear as a horizontal trail of links, typically near the top of the page. The name comes from the Hansel and Gretel fairy tale where children left breadcrumbs to find their way home.
Why Breadcrumbs Matter
Breadcrumbs serve both users and search engines. For users, they provide orientation and quick navigation to parent categories. For search engines, they clarify site structure and can appear in search results as rich snippets.
Despite their importance, 68% of ecommerce sites have sub-par breadcrumb implementations according to Baymard Institute research. 23% have no breadcrumbs at all. Only 6% of sites display both breadcrumb types simultaneously, which is the ideal implementation.
Types of Breadcrumbs
Hierarchy-based: Shows the site structure path. Example: Home > Men > Shoes > Running Shoes. This is the most common type and best for .
History-based: Shows the user's actual navigation path. Example: Home > Search Results > Product. This helps users retrace their steps.
Attribute-based: Shows product attributes. Example: Home > Shoes > Size 10 > Blue. Common on filtered product listings.
Ecommerce sites should offer both hierarchy-based and history-based breadcrumbs for the best user experience. Breadcrumbs improve structure and help search engines understand page relationships. Google uses breadcrumbs for crawling and often displays them in search results instead of raw URLs. Using BreadcrumbList markup increases the chance of breadcrumbs appearing in search results.
Best Practices and Common Mistakes
Place breadcrumbs at the top of the page, below the header. Use the greater-than symbol (>) or forward slash (/) as separators. Make all items clickable except the current page. Keep text concise but descriptive. On mobile, consider showing only the parent category to save space.
Common mistakes include linking the current page in the breadcrumb trail, using vague labels like "Products" instead of specific category names, hiding breadcrumbs on mobile devices, missing breadcrumbs on product pages, and not implementing for search engine display.
