Breadcrumb navigation patterns
Breadcrumbs sit at the seam between navigation and SEO. The right pattern depends on catalogue depth, how often shoppers browse laterally, and whether the surface ever has to fit in a 360-wide mobile viewport without wrapping.
Simple text breadcrumb trail
A single horizontal line of category links separated by chevrons, sitting above the page title. The default pattern across most retail catalogues, doubles as a SEO signal via BreadcrumbList structured data.
> what's good
- +Lightweight, accessible, and predictable for shoppers and crawlers.
- +Pairs cleanly with BreadcrumbList JSON-LD for Google rich-result eligibility.
- +Reinforces site hierarchy without taking up vertical space.
> what's risky
- ·Easy to forget on dynamic landing pages, leaving orphaned URLs without context.
- ·On deep catalogues the trail can wrap awkwardly on tablet widths.
- ·Often built as cosmetic chrome, not as a real navigation aid users actually click.
Dropdown breadcrumbs with sibling categories
Each crumb opens a dropdown listing sibling categories at that level, letting shoppers jump sideways without going up first. Common on department stores and large fashion retailers where lateral browsing matters.
> what's good
- +Surfaces lateral navigation that flat breadcrumbs hide entirely.
- +Reduces the up-and-down clicks needed to compare adjacent categories.
- +Useful on broad catalogues where shoppers don't yet know which sibling fits.
> what's risky
- ·Adds JS weight and accessibility complexity to a normally trivial component.
- ·Hover-only triggers fail on touch and screen readers if not built carefully.
- ·Easy to overload with dozens of siblings, defeating the focused-list intent.
Horizontal-scroll breadcrumb on mobile
On narrow viewports the breadcrumb stays on a single line and scrolls horizontally rather than wrapping. A small fade or chevron at the right edge hints at overflow. Used by deep-catalogue retailers like Instacart and large grocery sites.
> what's good
- +Preserves full hierarchy on mobile without consuming multiple lines of vertical space.
- +Single-line layout keeps the page title above the fold on small screens.
- +Fade or chevron affordance signals overflow without adding chrome.
> what's risky
- ·Horizontal scroll on a non-list element trips up touch users and assistive tech.
- ·Without an affordance, deep paths can feel hidden behind invisible scroll.
- ·Easy to swipe past the most important crumb, the current page, while exploring.