Do you use breadcrumbs effectively?

Users can quickly become lost when navigation patterns are unclear or used inconsistently. Using the wrong navigation component can create confusion, make workflows harder to complete, and reduce usability.

Different navigation components solve different problems. Choose the component that best matches the user's goal and the structure of the experience.

When to use Breadcrumbs

Breadcrumbs help users understand where they are within a site's hierarchy and navigate upward easily.

Use them when the site has:

• multiple navigation levels
• users may land on deep pages
• parent–child relationships are important.

How to use Breadcrumbs

Breadcrumbs should be short, predictable, and based on the actual structure of the site so users can understand where they are and move back up the hierarchy easily.

• Keep trails to 5 labels maximum.
• Always start with "Home" (or the root page) and end with the current page title as plain, unlinked text.
• Make sure the trail reflects the site's actual information architecture, not invented or browsing-history-based categories.
• If your breadcrumbs regularly exceed 5 levels, it's a signal to simplify the site's navigation structure.
• Individual labels should truncate after ~80 characters. Separate items with a universally understood character like / or > with consistent spacing.

❌ Figure: Bad example - 9 labels is too many, difficult to scan and suggests an overly complex site structure

✅ Figure: Good example - 4 labels, clear hierarchy, current page is unlinked

Handle breadcrumb overflow gracefully

When trails exceed 4 items, collapse the middle links behind an ellipsis (...) rather than letting the trail wrap onto multiple lines. Always keep "Home" and the immediate parent visible. On mobile, also consider showing only the immediate parent to avoid wrapping entirely.

❌ Figure: Bad example - Multi-line breadcrumbs are difficult to scan and create visual clutter

✅ Figure: Good example - Collapsed intermediate levels keep the trail readable while preserving context

For further reading, see the Nielsen Norman Group's breadcrumb design guidelines and the Pencil & Paper breadcrumbs UX guide.

Breadcrumbs on mobile

Mobile screens have limited space, so breadcrumb trails can quickly become cluttered and reduce usability. Long or multi-line breadcrumbs push important content below the fold and make the hierarchy harder to scan.

Keep mobile breadcrumbs short and touch-friendly.

Mobile breadcrumb guidelines

• Never allow breadcrumbs to wrap onto multiple lines
• Avoid tiny or tightly packed links - touch targets should remain easy to tap
• Prefer showing only the immediate parent category on mobile
• Keep the full breadcrumb trail on desktop where space allows
• Ensure breadcrumbs do not push important content (like page titles) below the fold

❌ Figure: Bad example - Many items on mobile takes up too much screen realestate

✅ Figure: Good example - Showing only the immediate parent preserves screen space and keeps the page title above the fold

Make navigation accessible

All navigation components should follow accessibility best practices.

Ensure that:

• Navigation is keyboard accessible
• Semantic HTML is used
• Current location or state is clearly indicated
• Color contrast meets accessibility standards

Example breadcrumb markup:

<nav aria-label="breadcrumb">
  <ol>
    <li><a href="/">Home</a></li>
    <li><a href="/products">Products</a></li>
    <li aria-current="page">Surface Laptop</li>
  </ol>
</nav>