On desktop the breadcrumb display reveals a user's current location within a site's hierarchy, serving as a persistent way-finding aid that reduces cognitive load by offering direct shortcuts to higher-level pages without relying on browser history or menus.
On mobile the breadcrumb display is a simplified one, that indicates and offers navigation to the parent page.
Do's
- always present the current page, without a link, as the final item
- display breadcrumbs consistently in the same location across all eligible pages
- keep labels concise and meaningful, reflecting page titles or section names
Don'ts
- do not use breadcrumbs as a replacement for primary navigation
- avoid verbose labels that create visual clutter or wrap across multiple lines
When to use
- useful in a large, multi-level information architecture where users may enter deep pages through search or external links
- use on pages that are 2nd or lower in the site hierarchy
When not to use
- avoid if there is no clearly defined site hierarchy (i.e. hub-and-spoke model) where pages have a non-hierarchical relationship
- do not use if your website's navigational structure is less than 3 levels deep - it may add complexity without navigational benefit