Home > Products > Electronics > Televisions > 55-Inch > Samsung QN55
That trail tells you exactly where you are. It tells you how you got here. It gives you shortcuts back to any level of the hierarchy.
Breadcrumbs are named after the fairy tale. Hansel and Gretel dropped bread crumbs to find their way home. Website breadcrumbs serve the same purpose: they prevent users from getting lost.
Breadcrumbs aren’t universal requirements. A portfolio with five pages doesn’t have deep enough structure for breadcrumbs to matter. But sites with complex hierarchies transform with proper breadcrumb implementation.
Where Breadcrumbs Are Necessary
Ecommerce is the classic case.
Product catalogs have depth. Categories contain subcategories contain products. A user who drilled from Men’s Clothing to Shirts to Dress Shirts to Blue Dress Shirts to a specific product needs to understand where they are.
Without breadcrumbs, the user’s only orientation comes from the product page itself. They see the product but lose context about what other products exist nearby. Going back to blue dress shirts requires browser back button repeatedly or starting over from main navigation.
With breadcrumbs, each level is one click away. Browse blue dress shirts. Jump to all dress shirts. Return to all shirts. The hierarchy remains accessible throughout the browsing journey.
Documentation sites face similar challenges. Technical documentation often nests deeply. A user lands on a specific API reference page from a search engine. The breadcrumb shows: Documentation > API Reference > Authentication > OAuth 2.0 > Authorization Flow. Instantly the user understands the structure they landed in.
Knowledge bases, help centers, educational content, wikis. Any content organization with multiple hierarchy levels benefits from breadcrumbs.
Where Breadcrumbs Are Unnecessary
Flat site structures gain nothing from breadcrumbs.
A marketing website with Home, About, Services, Contact doesn’t need breadcrumb navigation. Users are never more than one level deep. The main navigation handles all orientation needs.
Single-page applications often lack meaningful page hierarchy. The navigation model differs fundamentally from traditional page hierarchies. Breadcrumbs designed for hierarchical content structures don’t map well to app-like interfaces.
Landing pages specifically avoid breadcrumbs. Keep users on the page, moving toward conversion. Breadcrumbs provide escape routes back to parent pages. For focused conversion flows, those escape routes work against the goal.
Blog posts are borderline. A blog post belongs to a category or tag, but the relationship is loose. Breadcrumbs reading Blog > Marketing Tips > [Article Title] provide some context but minimal utility. Users rarely want to browse all marketing tips from a breadcrumb. They’re more likely to read the article, then leave or search for something specific.
SEO Benefits Beyond Usability
Search engines use breadcrumbs to understand site structure.
Properly marked-up breadcrumbs with Schema.org structured data appear in search results. Instead of just a URL, users see the hierarchy: example.com > Products > Electronics > Televisions. This rich snippet provides context before the click.
Click-through rates improve when breadcrumbs appear in results. Users get more information to judge relevance. The path helps them understand what kind of page they’ll land on.
Internal link equity flows through breadcrumb links. Every product page links back to its category. Categories link back to their parents. The result is a dense internal linking structure that helps search engines discover and prioritize pages.
Site structure signals help search engines understand content relationships. Breadcrumbs make explicit what hierarchy implies. The Electronics category clearly contains Televisions as a child. This semantic relationship aids relevance calculations.
Implementation Approaches
Two main models exist: hierarchy-based and path-based.
Hierarchy-based breadcrumbs show the content’s position in the site structure regardless of how the user arrived. A television’s breadcrumb always shows Products > Electronics > Televisions even if the user arrived via search.
Path-based breadcrumbs show the actual journey the user took. If they went Home > Sale > Electronics > Product, that’s what the breadcrumb shows. This reflects their browsing history but can produce odd sequences.
Hierarchy-based is usually better. Users learn the site structure by seeing consistent breadcrumbs. Path-based can show random sequences depending on browsing patterns. Most users expect breadcrumbs to show where content lives, not where they’ve been.
Hierarchy needs to be clean for breadcrumbs to work. If your information architecture has inconsistent nesting or ambiguous categorization, breadcrumbs will reflect that confusion.
Visual Design Considerations
Breadcrumbs should be visible but secondary.
Primary navigation gets prominent placement and styling. Breadcrumbs serve users who need orientation, not everyone. Subtle styling, smaller type, and positioning below main navigation keep breadcrumbs available without dominating.
Separator choices are mostly cosmetic. Arrows (>), slashes (/), or other dividers all work. The choice is aesthetic. Arrows subtly imply directionality into the hierarchy.
Link styling should indicate clickability. Breadcrumb items are links. They should look like links, with color differentiation, underlines on hover, or other standard link treatments.
Current page, the final breadcrumb item, should not be a link. Linking to the current page serves no purpose. The current item might be styled differently, often unlinked and in a different color.
Length can become a problem. Very deep hierarchies produce very long breadcrumbs. Home > Category > Subcategory > Sub-subcategory > Sub-sub-subcategory > Item becomes unwieldy. Truncation strategies help: show first and last few items, hide middle with ellipsis expandable on click.
Mobile Breadcrumb Challenges
Horizontal breadcrumbs consume width that mobile viewports can’t spare.
Long paths overflow the screen. Home > Products > Electronics > Televisions > 55-Inch > Samsung won’t fit on a 375px viewport without truncation or wrapping.
Common solutions include showing only the parent level as a back-style link. Instead of full breadcrumb, just “< Electronics" appears. This loses multi-level navigation but saves space.
Horizontal scrolling within the breadcrumb container lets users see the full path by swiping. This works but users might not discover the scroll is possible.
Collapsible breadcrumbs hide middle levels behind an ellipsis. Tap to expand. This preserves full information while managing space.
Some sites skip breadcrumbs entirely on mobile, relying on the back button and main navigation instead. This is acceptable when the alternative is a cluttered, unusable breadcrumb.
Accessibility Requirements
Screen readers need proper breadcrumb implementation.
Nav elements with aria-label=”Breadcrumb” identifies the breadcrumb region. Screen reader users can navigate directly to breadcrumbs if they want.
Each link in the breadcrumb trail should be properly labeled. The current page can include aria-current=”page” to indicate position.
Separator characters should be decorative, added via CSS rather than DOM content. Screen readers don’t need to announce “greater than sign” between each breadcrumb item.
Keyboard navigation should work. Users should be able to tab through breadcrumb links. Focus states should be visible.
Structure should make sense when announced. “Breadcrumb navigation: Home link, Products link, Electronics link, Televisions current page” should flow naturally.
Analytics Insights
Breadcrumb usage reveals navigation patterns.
Click tracking on breadcrumb links shows which levels users return to. If users frequently click the category-level breadcrumb, they’re browsing within categories. If they frequently click home, they’re reorienting completely.
Low breadcrumb usage might mean users don’t need them, or might mean users don’t notice them. Compare with navigation menu usage and search usage for context.
High breadcrumb usage on specific pages might indicate confusion. If users frequently escape via breadcrumb from certain pages, those pages might not provide what users expected.
Comparing breadcrumb paths to actual user paths shows whether hierarchical breadcrumbs match user mental models. Notable mismatch might suggest restructuring.
FAQ
Do breadcrumbs hurt SEO by diluting link equity across many internal links?
Opposite. Breadcrumbs improve internal linking in ways search engines understand and reward. The structured links help search engines discover content and understand relationships. Sites with proper breadcrumb implementation typically see SEO benefits, not harm.
Should we use breadcrumbs if our hierarchy has only two levels?
Probably not. Two-level hierarchies are shallow enough that main navigation handles orientation. Breadcrumbs add visual elements without proportional utility. Save breadcrumbs for depths where they genuinely help users.
Our content belongs to multiple categories. How do we handle breadcrumbs?
Pick a primary category for breadcrumb purposes. A product might appear in both “Gifts” and “Electronics” but the breadcrumb should show one consistent path, probably based on the canonical category assignment. Alternative paths can appear in other navigation but breadcrumbs need single unambiguous hierarchy.
Users aren’t clicking our breadcrumbs. Should we remove them?
Low clicks don’t necessarily mean low value. Breadcrumbs provide orientation even without clicks. Users glance at breadcrumbs to confirm they’re in the right place. That value doesn’t show in click metrics. Compare overall navigation behavior and user testing feedback before removing.
Sources
Nielsen Norman Group. Breadcrumb Navigation Increasingly Useful. nngroup.com/articles/breadcrumb-navigation-useful
Google Search Central. Breadcrumb Structured Data. developers.google.com/search/docs/data-types/breadcrumb
Baymard Institute. Breadcrumb Navigation UX. baymard.com/blog/breadcrumb-navigation
WebAIM. Accessible Breadcrumbs. webaim.org/techniques/aria
W3C. Breadcrumb ARIA Practices. w3.org/WAI/ARIA/apg/patterns/breadcrumb