Why show the path
Information foraging theory (Pirolli & Card, 1999) says people follow 'information scent'. For someone landing on a deep product page from search, breadcrumbs say where they are and where similar items live. Deeper hierarchies get users lost more easily (Miller & Remington, 2004), so breadcrumbs help most in information architecture three or more levels deep.
Keep it short on mobile
Small-screen attention concentrates at the top (Kim et al., 2015), so a two-line trail pushes the title down. Laubheimer (2018) suggests showing only the parent, like '‹ Category', or a single horizontally scrolling line. Respect thumb target sizes (Parhi et al., 2006). Leave primary movement to bottom navigation.
Design and markup
End with the current page as plain text, and use directional separators like '>' or '/'. Keep breadcrumbs small and quiet in the visual hierarchy. Per the ARIA pattern (W3C, n.d.), wrap them in a nav labelled 'breadcrumb' and mark the current item with aria-current, which also supports WCAG 2.2 (W3C, 2023) criterion 2.4.8.
FAQ
- Do mobile apps need breadcrumbs?
- Shallow apps manage with back and bottom navigation; deep catalogues benefit from a parent-only breadcrumb.
- Should the current page be a link?
- No; keep it as text and mark it with aria-current.
Sources reviewed: 2026-10-27
References
- Laubheimer, P. (2018, December 23). Breadcrumbs: 11 design guidelines for desktop and mobile. Nielsen Norman Group. Eleven breadcrumb guidelines for desktop and mobile.
- Pirolli, P., & Card, S. (1999). Information foraging. Psychological Review, 106(4), 643–675. Information scent guides navigation.
- Miller, C. S., & Remington, R. W. (2004). Modeling information navigation: Implications for information architecture. Human–Computer Interaction, 19(3), 225–271. How hierarchy depth and breadth affect navigation.
- Kim, J., Thomas, P., Sankaranarayana, R., Gedeon, T., & Yoon, H.-J. (2015). Eye-tracking analysis of user behavior and performance in web search on large and small screens. Journal of the Association for Information Science and Technology, 66(3), 526–544. Small-screen attention concentrates at the top.
- Parhi, P., Karlson, A. K., & Bederson, B. B. (2006). Target size study for one-handed thumb use on small touchscreen devices. In Proceedings of MobileHCI 2006 (pp. 203–210). ACM. Thumb target sizes for crowded links.
- World Wide Web Consortium. (n.d.). Breadcrumb pattern. ARIA Authoring Practices Guide. nav landmark and aria-current markup.
- World Wide Web Consortium. (2023). Web Content Accessibility Guidelines (WCAG) 2.2. Criterion 2.4.8 location.