Airbnb Breadcrumbs
2022 | Role: Experience Designer
Breadcrumbs are a secondary navigation pattern for websites that help a user understand the hierarchy among page levels and navigate back through them.
The problem
Product areas were constructing and maintaining their own breadcrumb patterns. This was creating inconsistencies in the product and causing engineering to maintain redundant patterns.
Research
I conducted an audit of breadcrumbs across Airbnb to understand the current state of them.
Guidelines for desktop and mobile (Source: Nielsen Norman Group)
...the links are usually separated by the symbols “>” or “/”. We recommend the “>” character...
The last breadcrumb (denoting the current page) should not be a link.
For mobile, consider shortening the breadcrumb trail to include only the last level(s).
Solutions
Forward slash divider icon
Carat divider icon
Chevron icon
Based on the research, we determined that the chevron icon is the best option because of how common it is used in breadcrumbs.
Text treatment explorations
Final treatment
Book weight and non-underlined links makes breadcrumbs more reduced on the page.
Clear visual difference between links and active page.
Final treatment applied to Airbnb Help Center
Link hover state
Mobile
Design system site documentation
An internal page for understanding the Breadcrumbs component.
